Intro to HTML: Buttons

Submit Button

For a common HTML/PHP form, submit input fields are used to submit the user input contained on the form. On mouse click, any code tied to the form will be executed.

This is a submit button:

Example: Input Type Submit

<input type='submit' value='Submit' > 
            

Button Tags

Button tags are also used to make buttons. The input button is better to use for submiting information on a HTML/PHP form. However, there may be buttons that do not submit form information. For example, a button may be used to play a song or copy text. However, button tags can also be used create submit buttons. When we get to Javascript, we will be using more button tags.

This is a submit button:

Example: Basic Button

<button type='button'>Click Here<button> 
            

Navagation Links

You can turn almost anything into a button that redirects to another page. This is done by placing the element you want to redirect inside <a>tags

Example navigation Link:

If you click on the image above, you will be redirected to Coding Commanders Home Page.

Example: Image as Navigation Button

<a href = 'http://www.codingcommanders.com/'>
 <img width = '75px;' src = '../logo.png'>
</a>

            

We may want to use CSS to create a different effect when the user hoovers over the image with the mouse. We can do this with CSS.

Example: Hover Background-Color

a:hover {
 background-color: black;
}

            

Applied Assignment