Skip to main content

10. Forms

HTML Forms

One of the most common uses for HTML forms is to allow users to submit data, such as messages, feedback, or files. Many websites have a contact form that allows visitors to submit information to the site owner. The data that the user submits is emailed to the owner, submitted to a database, or both.

There are 3 basic components of HTML forms:

  • <form> element
  • form controls
  • form handler

The Form Element

All of the components of a form must be inside the <form> element.

Basic structure of an HTML form:

<form method="post" action="form_processor.php">
<input type="text" name="something">
<input type="submit" value="submit">


form example

Form Attributes


The method attribute may have a value of get or post. It is identifying what method will be used for processing the data when the form is submitted.


The data will be passed in the URL, such as:



The data will be passed "in the background" to a programming script for processing.


The value for the action attribute specifies where the form data should be sent when the form is submitted.

The value can be either an absolute or relative URL.

In the example below, a file on the server named form_processor.php will be used to process the data.

<form method="post" action="form_precessor.php">

However, we will not learn PHP programming in this course. For your practice exercise, you could omit the action attribute or use a free form processing service. Services like this do not require any server-side programming knowledge.

Form Controls

The form controls are the elements that are used to create the text fields, checkboxes, buttons, etc. for users to input the data.

The <input> element is used along with the type attribute to create several form controls.

text input type

It creates a text box for a single line of text.

<input type="text" name="something">

Most form elements will require a name attribute. We'll discuss names further along in this lesson.


text input attributes:

Can be used to define the width of the text box based on number of characters entered as a value.

<input type="text" name="whatever" size="10">


The maximum number of characters that may be entered in the field.

<input type="text" name="whatever" maxlength="50">


The user must enter a value in order to submit the form.

required is a type of attribute where using the attribute="value" format is not necessary. You can just provide the name of the attribute like this:

<input type="text" name="whatever" required>


To provide text in the field:

<input type="text" name="whatever" placeholder="mm/dd/yyyy">


radio input type

Creates circular buttons that can be clicked to select options. You would use a radio when you want the user to make only one selection.

car radio buttons: only button can be pressed at once
<input type="radio" name="color" value="red">
<input type="radio" name="color" value="green">
<input type="radio" name="color" value="blue">


Click them. Notice that you can only select one option at a time.

Also notice that the name is the same for each radio input, but the values are different. We'll talk about names and values here in a little bit.

radio input attributes

The text that will be sent to the server if this radio button is selected.

<input type="radio" name="color" value="red">


The user must select this input in order to submit the form.

<input type="radio" name="color" value="red" required>


The input will be selected by default.

<input type="radio" name="color" value="red" checked>

checkbox input type

Creates checkboxes that allow users to make multiple selections.

<input type="checkbox" name="colors" value="red">
<input type="checkbox" name="colors" value="green">
<input type="checkbox" name="colors" value="blue">


Click them. Notice that, unlike radio inputs, you can have multiple options selected at once.

checkbox input attributes

The text that will be sent to the server if this checkbox is selected.

<input type="checkbox" name="colors" value="green">


The user must select this input in order to submit the form.

<input type="checkbox" name="colors" value="green" required>


The input will be selected by default.

<input type="checkbox" name="colors" value="green" checked>

submit input type

Creates a button that allows the user to submit all of the information that was entered into the form.

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

The value is the text that will display on the button.

reset input type

Creates a button that allows the user to clear all of the data entered into the form.

<input type="reset" value="clear form">

There are some use cases, but a reset is not necessary for most forms. Sometimes users may confuse the reset button for the submit button and all of their data is accidentally cleared.

hidden input type

Hidden fields, as the name implies, are not seen by the user. They are used to submit some type of additional data.

<input type="hidden" name="form-id" value="site-contact">


The <textarea> element allows for the creation of large text fields (paragraphs of text).

<textarea name="message"></textarea>


textarea attributes

Specifies the height of the text area in rows.

<textarea name="message" rows="4"></textarea>


Specifies the width of the text area in characters.

<textarea name="message" cols="10"></textarea>


To provide text in the field.

<textarea name="message" placeholder="Please type your response in sentence form."></textarea>


The user must enter a value in order to submit the form.

<textarea name="message" required></textarea>

Select Lists

The <select> element is used in conjunction with <option> elements to create a dropdown list of items that may be selected.

<select name="color">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>


select attributes:

The user must select an option in order to submit the form.

<select name="color" required>


The user may choose more than one option.

<select name="color" multiple>


The value represents the height (in lines) of the select list.

<select name="color" multiple size="3">


option attributes:

Text that will be sent to the server if this option is selected.

<option value="blue">Blue</option>


The option will be selected by default

<option selected>Blue</option>

Understanding Names and Values

In many cases, a form is basically like a series of questions. We're asking the user questions and they are providing answers.

The question is represented by the name attribute.

The value is the answer to the question.

For example, take a look at this HTML for a radio:

<input type="radio" name="favorite_beatle" value="John">
<input type="radio" name="favorite_beatle" value="Paul">
<input type="radio" name="favorite_beatle" value="George">
<input type="radio" name="favorite_beatle" value="Ringo">

The name (or question) is the same for each.

The value (or possible answer) is different for each.

When the data is passed to a script to process your form, it is in this form:


So, think about that when creating your forms. It is a common mistake to provide a different name for the same "question".

Also note that some form elements don't require a value attribute. However, a value is still submitted. For example, a value is not required for a textarea, but the text the user enters will be sent as the value.

Form Labels

So the user knows what type of data they are to input in each field, we need to add labels to our form items. For accessibility purposes, we should use the for attribute to associate each label with its form item.

In order to use the for attribute, we must add an ID to each of the elements.

<form method="post">

<label for="first-name">First Name</label>
<input id="first-name" name="first-name" type="text">

<label for="color">Favorite Color</label>
<select id="color" name="color">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>

<input type="submit" value="submit">



form example

for Attributes

Associating the label with its corresponding form item is important for accessibility. It makes sure that assistive technology has the information needed to provide the best experience to those with impairments.

The for attribute is used to associate a label with its form control. For example:

<label for="flyswatter">fly swatter</label>
<input type="text" id="flyswatter" name="whatever">

for="flyswatter" means that this is the label for the element that has an ID named "flyswatter".

Don't forget that each ID in a page needs to be unique.

When a label has been correctly associated with the form item, you should be able to click on the label to select the item. Click on the word "taco" below:

This improves usability and accessibility. There is a larger clickable area when you associate the label with the form item. This is especially helpful for those with dexterity issues.

It is properly associated because I have used the ID for the radio as the value for the label's for attribute:

<label for="taco">Taco</label>
<input type="radio" id="taco" name="food" value="taco">

You can also associate the label with the form item by nesting the form item inside the label. When you use this technique, a for attribute is not required:

<label>Taco <input type="radio" name="food" value="taco"></label>

Fieldsets & Legends

When creating forms with several elements, organizing the form into sections may be helpful. Like items may be arranged into fieldsets to provide organization. The legend is used to provide labels for the fieldsets.

<form method="post">


<legend>Basic Information</legend>

<label for="first-name">First Name</label>
<input id="first-name" name="first-name" type="text">

<label for="color">Favorite Color</label>
<select id="color" name="color">
<option value="blue">Blue</option>
<option value="red">Red</option>
<option value="green">Green</option>



<legend>Other Information</legend>

<label for="pet-name">Name of Pet</label>
<input id="pet-name" name="pet-name" type="text">

<label for="type-pet">Type of Pet</label>
<select id="type-pet" name="type-pet">
<option value="cat">Cat</option>
<option value="dog">Dog</option>
<option value="toad">Toad</option>


<input type="submit" value="submit">



form example

Legends for labeling radio and checkbox questions

When you use radios and checkboxes, you will usually have some text describing what question is being asked, followed by several options.

We could use the label element for this text. But we wouldn't be able to use the for attribute because there is no corresponding ID for associating the label with the form items.

The solution is to use a fieldset with a legend. Since these are all together in a fieldset with a legend, it properly associates the question with the possible answers:


<legend>What is your favorite color?</legend>

<label for="blue">Blue</label>
<input type="radio" id="blue" name="color" value="blue">

<label for="red">Red</label>
<input type="radio" id="red" name="color" value="red">


Styling Forms with CSS

Without any styling, the form items will line up side-by-side because they are inline elements (Although fieldsets are block-level elements as you can see above).

You can use the <br> element to make elements go to the next line. This isn't really the best practice way to do it, but it's fine when first learning.

The best way to handle this is to use CSS. See the code in this Practice 10 example and this second Practice 10 example.

It is nearly impossible to get forms to look identical in all browsers and operating systems. A form item on a Mac is going to look different from one on a Windows PC. With a little work, you can create professional looking forms that are easy to use. However, truly mastering the art of form design requires a bit of experience. It is not expected that you will be able to create elegant forms after completing an introductory course.

CSS Selectors for Forms

Just like any element, you can add classes and/or IDs to form elements in order to apply styling. Additionally, you may use the names of elements such as input, fieldset, form, etc. for styling.

There is another method that may be utilized that we have not discussed yet: Using attributes and their values to create CSS selectors.

input[type="text"] {
width: 10em;
margin-bottom: .6em;
background-color: #E9E9E9;

This method eliminates the need to add any additional classes in the HTML for styling purposes.

Form Handlers

We can add the the name of a file in the action attribute of our <form> element. This tells the server to use the code in that file to process the form data once the user submits it.

<form method="post" action="form_precessor.php">

The form handler takes the submitted data and does something with it, such as sending the data in an email, uploading it to a database, or writing it to a file on the server.

Additionally, it may be used for input validation to make sure everything was entered correctly. It may also provide the submitter with a confirmation page with a summary of entered data.

For your practice exercise, you could omit the action attribute, since we have not learned the server-side programming skills required for this.

Or you could use a free form processing service. Services like this do not require any server-side programming knowledge.

Form Validation

Don't confuse form validation with HTML and CSS code validation. Those are different concepts.

Form validation is used to run some type of test on the data that is submitted by the user.

It is important to test this submitted data to make sure it is complete, appropriate, and does not do something malicious.

For example, you might require that a certain field is completed. Maybe you will absolutely need the user to enter their email so you can respond. Your programming script would check to make sure the email field has been filled in before proceeding. This script should also verify that that the email address is in the correct format. For example, it might verify that it contains the '@' symbol.

Form validation is also used to handle hacking attempts and other security issues. It is important that the code used to process the form includes validation and is created by a competent programmer. It's probably not a good idea to use the first PHP script you find on the web. You should become familiar with security issues and only use scripts provided by trusted sources.

Client-side vs. Server-side validation

In order for code in a programming language to carry out the instructions you have given, the code must be interpreted.

With client-side programming languages, the interpreter runs on the user's computer.

With server-side programming languages, the interpreter program runs on the server.

So, a server-side programming language sends instructions to the server. And a client-side programming language sends instructions to the user's computer.

When you view the source code of a web page, you will never see any server-side programming code. But you can see all of the client-side code.

Validation can be performed both on the client and server sides. And they are most often used in tandem, each with their own purposes.

Client-side validation is primarily used for the convenience of the user. For example, if the user hasn't entered their email address, your client-side validation could immediately notify them of this and stop the form from submitting to the server.

The client-side validation is processed in the browser of the user's computer.

JavaScript, which we will discuss in the next lesson, is a client-side language that can be used for client-side form validation.

There are also client-side validation tools built into HTML. For example, you can use the HTML required attribute to make sure the user enters a value before the form will be submitted.

However, client-side validation can't be used to prevent hacking attempts and it can't guarantee that you'll actually receive the data that you require.

The user has control of their own computer. For example, if you are using JavaScript validation, the user could simply disable JavaScript in their browser and bypass any of your JavaScript code.

Server-side validation is necessary for security purposes and to ensure that you receive the data you want to receive.

You control your own server. Server-side languages run on your server and this can't be bypassed by the user, unless there is some problem with your code.