≡ Menu

HTML Input Tags

input tagsOne of the most functional and useful aspects of HTML is the means by which it allows us to collect data from a user.

The most common way that this is done in HTML is by using the input tag.

The process of collecting data could be as simple as asking someone to enter their email address into a text box, or as complex as filling out a giant government issued form (oh the horror)!

All the ways that you can collect data from a user boils down to a handful of types of input tags (and one other tag that we’ll discuss later in this article).

So let’s take a look at the different ways we can get information from a user.

Input Type Text

Let’s start with something simple like showing a textbox on the screen.

To accomplish this, we’ll need to use the input type of “text” like so:

  <input type="text" id="myTextBox"/>

This will display a textbox on the webpage just like this one:

Pretty simple right?

One thing that you’ll notice is that I not only used a property called type to specify what type of input we want to use, but I also used an id property.

The id property is not mandatory, but it’s highly recommended if you’re ever going to write some JavaScript code that will interact with that textbox.

We’ll get into the topic of JavaScript after a couple more articles on HTML, but I just wanted to introduce the concept of the id tag and get you used to assigning it to your input tags.

Note: all id tags must be unique on any given webpage. So since I already used the id of “myTextBox”, it would be incorrect to use that same id again in this same webpage.

Fun with TextBoxes

There are plenty of other fun things you can do with textboxes outside of just assigning an id to them. You can use CSS to change it’s height, width, shape (you can make them have rounded corners), font and even assign placeholder text. Let’s take a look at how we can use all of these together to make a cool looking textbox.

Here’s the code snippet that I’ll use to create a textbox that makes it quite different from the “default” look and feel:

  <input type="text" id="myTextBox" style="width:6em; height: 2em; font-size: 2em; border-radius: 15px 50px 15px 50px;" placeholder=" look at me!" />

Here’s what that code would output:

As you can see, there’s probably no reason why you’d want to create a textbox that looks like the one above, but I just wanted to illustrate what can be done with some CSS and the placeholder tag.

Note: Not all browsers will be able to use the placeholder tag, so if you do not see grey text inside the textbox that reads “look at me!”, or if you’re still seeing the textbox as having square corners, then you’re likely using an old browser (and you should probably update it!)

Radio Buttons

Radio buttons are great for multiple choice type scenarios where the user should only be allowed to pick one answer from the group of answers.

The most important thing for you to remember is that they need to be grouped properly. If you don’t group them together, then the user will be able to “select” every single one of the radio buttons, and that would defeat their purpose!

So let’s take a look at how we could create two groups of radio buttons, starting with the first group:

  <input type="radio" id="radio1" name="hearAboutUs" value="P">Podcast</input>
  <input type="radio" id="radio2" name="hearAboutUs" value="B">Blog</input>
  <input type="radio" id="radio3" name="hearAboutUs" value="O">Other</input>

Here’s what that code would produce:

Podcast
Blog
Other

Alright so let’s dive into what this code is doing…

First off, we use the type of radio, this confused me at times when I first learned HTML as I always wanted to type in “radiobutton”, but I guess the people who created HTML wanted to save you some time by cutting out the “button” part.

Second, you’ll notice that I’ve assigned unique ids for every radio button. In this case, I didn’t choose ids that are very descriptive, but I wanted to be sure to have distinct values for each part of the radio buttons so as to be able to teach you properly.

Third, you should take note that there is a name property assigned to each radio button. This is what we use to group them together so that they will properly function as radio buttons. Each one in the group of radio buttons has the same name, this is what groups them together!

Fourth, you’ll see that we’ve assigned a value to each radio button. The value is what will actually be “sent” to the server if this radio buttons are ever submitted as part of a form… we’ll talk about forms in the next post. What this means is that whichever radio button is selected (let’s assume we choose the “Other” radio button) the value of the selected radio button will be submitted to the server (so with our assumption, the server would receive the value of “O”).

Finally, it’s also nice to include some kind of label for the radio button, this is done by assigning text inside the scope of the input tags… In our example above, I’m referring to the words “Podcast”, “Blog” and “Other”.

Alright, so now let’s make a second group of radio buttons just to illustrate how this “grouping” thing works:

  <input type="radio" id="ageRange1" name="ageRange" value="18-24">18-24</input>
  <input type="radio" id="ageRange2" name="ageRange" value="25-34">25-34</input>
  <input type="radio" id="ageRange3" name="ageRange" value="35-44">35-44</input>

Here’s what the second group would look like:

18-24
25-34
35-44

So things to note here are that we’ve assigned these radio buttons a different name, so this means that we’ll be able to select one option from the “hearAboutUs” group of radio buttons, and we’ll also be able to select one option from the “ageRange” group of radio buttons.

Easy peasy!

Check Boxes

When it comes to check boxes, they are easier to code than radio buttons, as they don’t need to be grouped together in order to function properly. Check boxes serve one purpose, to show that something is true, or false.

Here’s how you create them:

  <input type="checkbox" id="checkbox1" value="agree"/> I have read and agree to all terms and conditions 

Here’s what that would look like:

I have read and agree to all terms and conditions.

This is a checkbox that I’m sure you’ve seen before. I’m sure you’ve always checked it without reading the terms and conditions too right? Anyway, this is straightforward stuff. The only important thing to note here that differs from the radio buttons is the way data is sent to the server with checkboxes. If a check box is not checked, then nothing gets sent to the server. If a check box IS checked, then it will submit the value that you specified to the server. In this case the value we’ve specified is "agree".

You may be wondering why that’s important to note, it’s really only important if you’re also dealing with the server side of things. So if you’ve already gone through some of the Java and Spring Framework tutorials, then I would recommend reading up about it here.

Buttons!

Everyone likes pressing buttons right?

Here’s how you create them in HTML:

  <input type="button" id="myButton" value="Click Me"/>

Here’s the button the above code would create:

Well, this isn’t all that exciting right? Don’t worry, buttons will become much more important once we start talking about JavaScript and forms!

Drop down boxes (aka Select boxes)

There are a whole bunch more input types that you can create, but I think it’s important that I talk about one last commonly used input.

The curve-ball here is that you don’t create it using an input tag at all. Kind of a strange oversight in my opinion, but here’s how you create a dropdown list (in this case we’ll have a choice of a handful of countries):

  <select id="countries">
    <option value="Canada"></option>
    <option value="USA"></option>
    <option value="UK"></option>
    <option value="Australia"></option>
    <option value="New Zealand"></option>
  </select>

And here’s what the resulting drop-down list would look like:

Once again, the thing to note here is that whatever option is selected, the value is what is sent to the server. So although you may SEE that you’ve selected, say, “Canada” as an option… the server will actually receive the value of CA.

In Summary

As I mentioned, there are tons more useful input types you can use and many of them were recently introduced as part of HTML5. For a full list, please check out this article from W3Schools.

{ 0 comments… add one }

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Next post:

Previous post: