How To Add Different Kinds Of Buttons To A Web Page

The <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.

  1. <input /> must only be used to submit form data. So don’t even try to use <button> when you’ve got a form.
  2. <button> must have a closing </button> tag.
  3. You can place an image or text inside of the <button> container.
  4. <button> is commonly used as a link to web pages or other media.

First, How <input /> Can Be Used

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.

Let’s Start With Something That May Be Very Familiar

This is the most basic way to use the input tag to submit form data. I like it because it is, well, basic.

Code View

<input type="submit" name="submit" value="Send In The Data" />

Browser View

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.


Another Way Is To Use An Image

Code View

<input type="image" name="submit" value="submit" src="images/submit-button.jpg" alt="submit" />

Browser View

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.


Here’s A Way To Turn <input /> Into A Button

Don’t let this confuse you with the above two examples. This will NOT allow you to pass data to a server.

Code View

<input type="button" onclick="myFunction()" value="See Fancy Alert Box" />

Browser View

Notice that the type of input here is a "button." A way to use this is with a Javascript event handler to pop up an alert box. Oh, go ahead. Click on it.


Now, The Button Element

Just A Text Link To Open A Modal Window

Code View

<button href="#myModal" data-toggle="modal">Start Here</button>

Browser View

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.")


Instead Of A Text Link, This Time I Used An Image

Code View

<button href="#myModal" data-toggle="modal"><img src="images/push-button.jpg" alt="Push Button"/></button>

Browser View

This is really the same thing as the previous example. This time I embedded an image inside the <button></button> container.

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Happy And Start Learning HTML Right Now

Do The First Two Lessons For Free!!

Joy Of Code girl happy at her laptop

All Of My Free Web Design Tutorials