<button> element has been around for a long time but is only now starting to get more use. I’m going to explain how you can use it and how not to confuse it with its more well known brother, the
<input /> tag.
Here are the key points to help you keep them straight. Fasten your seat belts as you enter the input vs. button battle.
<input />must only be used to submit form data. So don’t even try to use
<button>when you’ve got a form.
<button>must have a closing
<button>is commonly used as a link to web pages or other media.
My focus is largely on how to send user-supplied form data to a server for processing. See a longer list of the input types and how they are used.
This is the most basic way to use the input tag to submit form data. I like it because it is, well, basic.
<input type="submit" name="submit" value="Send In The Data" />
Yeah, it’s rather blah but it will do the job of submitting form data to a server. But you can use CSS to dress it up and make it look oh so pretty.
<input type="image" name="submit" value="submit" src="images/submit-button.jpg" alt="submit" />
This is not as frequently used as the first example, but it’s still around. Again, use this only when you want to submit form data.
Don’t let this confuse you with the above two examples. This will NOT allow you to pass data to a server.
<input type="button" onclick="myFunction()" value="See Fancy Alert Box" />
<button href="#myModal" data-toggle="modal">Start Here</button>
This might look familiar as I have a million of these buttons on my site. The
href refers to the content which makes up the modal.
Data-toggle is an HTML5
attribute that calls the JQuery library which causes the modal to show up when you push the button.
(Yes, they are called "push buttons.")
<button href="#myModal" data-toggle="modal"><img src="images/push-button.jpg" alt="Push Button"/></button>
This is really the same thing as the previous example. This time I embedded an image inside the
Get Happy And Start Learning HTML Right Now
Do The First Two Lessons For Free!!
All Of My Free Web Design Tutorials