HTML Forms

This lesson is part of the Web Programming 1 Course.

Adding a form to a web page allows you to collect information from the people who visit your website. While there are lots of different ways forms can be built in HTML, there are a few standard elements that you can use that will account for most of your needs.

The FORM Element

Start by adding a form element, and add the following attributes:

<form method="POST" action="https://www.wtc-web.com/form-handler.php">

</form>

The method attribute specifies how the data should be sent. Don't worry about the method for now (we'll revisit the method later in the program), but for now just note that POST is a common method of sending form data.

The action attribute indicates where to send the information entered into the form when it is submitted (we'll ad a button to submit the data in a minute). The value of the action attribute is a URL to a page that I created, which will simply dump out the data that was sent to it. In a real web application, this page would most likely do something with the data that was entered into the form, such as store it in a database.

Labels and Text Boxes

The next step is to add elements inside the form element. We'll assume that you want the user to enter their first name. Add a label element and an input element, like so:

<label>First Name</label>
<input type="text" name="firstName">

The label element allows you to put labels in your form, this helps users to understand exactly what they are supposed to enter. The input element allows the user to enter 'input'. Notice that the input element is self-closing, so it consists of an opening tag but no closing tag. As you'll see in a minute, there a different types of input elements, and you can specify one by setting the type attribute. In this case, we set the type attribute to 'text', which allows the user to enter a single line of text into the input (this makes the input appear as a 'textbox'). The name attribute will be sent to the page that receives the data, along with the data itself. So while the label element helps users to understand the input to enter, the name attribute helps the page receiving the data to understand the input.

Submit Buttons

Our form currently does not have a button to submit/save the data entered into the form. Let's go ahead and add one now. To add a 'submit' button, we'll again use an input element, but this time we'll set the type attribute to 'submit', like so:

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

The value attribute allows you to control the text that appears inside the button. If you omit it, then the button will default to saying 'Submit'.

Checkboxes

We can add a checkbox to the form by including this HTML code:

<label>Agree to our terms</label>
<input type="checkbox" name="agreed" value="yes">

I'm sure you've all checked a box like this, in order to agree to the terms of some service. We've used an input element again, but this time the type attribute is set to 'checkbox'. The value of the name attribute will be sent as a label to the server and the value of value attribute will also be sent represent the data for the checkbox.

Radio Buttons

You can add radio buttons like so:

<label>Favorite Pizza</label>
<label>
  <input type="radio" name="pizza" value="sausage">
  Sausage
</label>
<label>
  <input type="radio" name="pizza" value="pepperoni">
  Pepperoni
</label>
<label>
  <input type="radio" name="pizza" value="mushroom">
  Mushroom
</label>

Radio buttons work together in groups, if you select one within a group, then the previously selected one will automatically be unselected. The key to grouping radio buttons is to set the name attribute to the same value. In this case you can see that all three radio buttons have the same value for the name attribute (pizza). Because of this, the three radio buttons work together as a group. The value of the selected radio button will be sent to the server.

Note that each radio button should be accompanied by a label element, so that the user can see the data/value associated with it. In the above code sample, I nested each radio input element inside a label element. But you could put the label before or after the radio input (thus making it a sibling rather than a parent).

If you want one of the radio buttons to be selected by default, you can add a checked attribute and set it's value to 'true', like so:

<input type="radio" name="pizza" value="sausage" checked="true">

Select Boxes (aka Drop-down Lists, or Combo Boxes)

Select boxes are created by using a select element, and nesting option elements inside of it, like so:

<label>Favorite Color</label>
<select name="color">
    <option>RED</option>
    <option>BLUE</option>
    <option>GREEN</option>
</select>

Select boxes are similar to radio button groups, because they allow users to select from a group of options.

In some cases, the option that you display to the user is not exactly the value that you want to send to the page that receives the data. In this case you could add value attributes to the option elements:

<label>Favorite Color</label>
<select name="color">
    <option value="red">RED</option>
    <option value="blue">BLUE</option>
    <option value="green">GREEN</option>
</select>

If you wanted to set a default color option, you could add a selected attribute and set its value to true, like this:

<option selected="true">GREEN</option>

Textarea Elements

If you want your visitors to be able to enter multiple lines of input, you can use a textarea element.

<label>Comments</label>
<textarea name="comments"></textarea>

Date Input Elements

It's pretty common to have a form that requires a user to enter a date. For this, you can use an input element and set its type attribute to 'date':

<label>Birth Date</label>
<input type="date" name="birthDate" />

The elements we've discussed in this lesson cover the most basic means of gathering user input in an HTML form. There are a few others, but we don't need to worry about them at this time.