HTML Form Elements

HTML Form Elements

Regardless of what others will tell you, the internet is for forms. There are forms everywhere! Online shopping, personality quizzes, web mail, and even password login systems are all examples of forms. Forms are an excellent way to make a website more interactive and they allow us to collect information from our visitors. To demonstrate the versatility of the HTML form elements, lets create a website for ordering custom sandwiches.

Before we begin, I have to level with you. HTML forms are basically useless without a server-side script to process the data submitted, or JavaScript to provide client-side interactivity. Because learning another web language is a little outside the scope of this tutorial, we’ll just have to pretend that this form works for now.

The action attribute specifies the script on our server that we want to submit the form data to, and the method attribute tells the browser how to do so. It’s not terribly important that you understand these attributes yet, since we aren’t going to write the server-side script, just be aware that they exist.

Lets start our sandwich making with a bun. Because we only want to allow our customers to select one type of bun from a list of options, we’ll use radio buttons. Radio buttons are a type of HTML input. The input element is the most versatile and useful form element. We can transform it into radio buttons, checkboxes, text boxes, and oh so much more, just by changing the type attribute.

radio buttons

Giving all of these radio inputs the same name lets the browser know that only one may be selected from the group. The value attribute contains the data that would be sent to the server when we submit the form. Only the value of the checked item is sent. We can tell which one is selected in HTML with a boolean attribute called “checked”. If we wanted one of the options to be checked by default, we could add the checked attribute to that input.

We can organize related fields with the fieldset and legend tags. The meat and cheese choices go well together, so lets group them by nesting them inside of a fieldset element.

The select element is a little like radio inputs in that it lets our customer select one option from a list of choices. Unlike radio inputs, select options are tucked away inside of a drop down. We’d need to click on the select element to see our choices.

select element

When an option is selected, it gains the boolean attribute “selected”. We could promote red snapper by adding the “selected” attribute to that option, making it the default choice for new customers.

I love cheese, so I don’t think we should limit the amount of cheeses a customer can select. Adding the “multiple” attribute to our cheese select element will allow our users to select any number of cheeses by holding the control key as they click on the options. With multiple selections, we need to be able to see all of the options, so select elements with the “multiple” attribute will list all of the options in a box, rather than hiding them away in a drop-down.

select multiple element

We should also allow multiple selections for our toppings. We could use another select element for these, but that is admittedly a very clunky element. Checkboxes are a much more elegant solution. They are similar to radio inputs except they aren’t restricted to one selection.

checkbox inputs

Checkboxes not only look nicer than our select element, they are easier to use too. We can make it even more convenient by wrapping the input and the text in a label tag.

This way our customers can click on the word “Onion” to select or deselect the checkbox. It would be a good idea to use labels for all of our form elements, because it makes our form easier to use, especially for blind users. If we need more flexibility with positioning our elements, we can also place our input outside of our label element so long as we connect them with the id and for attributes. The for attribute of the label element should match the id attribute of the input it is referencing.

The only remaining information we need to collect from our customer is her name and address. So far, all of our inputs have had pre-set values, but these fields call for a more free-form response, so we’ll use text inputs and textareas.

text input and textarea

Text inputs and textareas allow a user to input a string of text. While their functions are similar, a text input is limited to one line, while a textarea can contain multiple line breaks. The size of a textarea is controlled with the rows and cols attributes. The rows attribute will increase the height of the textarea, and the cols attribute will increase the width. Because text inputs are meant for a single line, only their width can be adjusted.

The “size” of an input is it’s width in characters. So with this adjustment, the species field would be wide enough to contain nine characters before it started cutting off what our customer was typing. If we wanted to restrict this input to only allow nine characters, we could limit the length of the string with the maxlength attribute.

If our label isn’t obvious enough, we can put some sample text in a field with the placeholder element. This will disappear as soon as the user starts filling in the input with their own text.

If, for whatever reason, we wanted to set the default value for a text input, we’d simply need to assign it a value attribute.

While the placeholder attribute will also work for a textarea, setting a default value with the value attribute will not. The value of a textarea is placed between the textarea tags, rather than in a value attribute.

All we need now is a button to submit the form. We have three very different options at our disposal: button input, image input, and submit button elements.

Submit Inputs are very similar to button elements. The major difference being where we place the text that will show on the button. Button elements contain the text between the opening and closing tag, while submit inputs contain the text in a value attribute. We could also stick an image inside of a button element, or we could just make an image a button with the image input. The only other attribute an image input needs is a “src” attribute, which I’m sure you guessed, is an absolute or relative path to an image file.

We covered the most common form elements, but that’s only just the beginning. HTML 5 introduces some cool new inputs like date, range, color, and time. See, I told you the input element was versatile.

HTML Form Elements was posted by on . JR is one of the three humans that run the behind-the-scene affairs of The Hello World Program. He is interested in spreading the good robot word over the vast Inter-webs. His contributions to the show include editing, web programming, design, and music composition.

Discuss this article in the Comments below, or and it with your friends. Learn more about Web Development by subscribing to The Hello World Newsletter .

Join the Discussion
  • It would be so cool if these input examples used proper labels so you could teach accessibility at the same time.

Subscribe to our Mailing List

Stay up to date on the latest videos and tutorials with our monthly newsletter

The email entered is invalid

Want to Learn HTML?

Master the essential web language with our free 10 day course. Get entertaining web development classes emailed directly to your inbox.

The email entered is invalid