HTML Forms

This tutorial is part of a web programming course for people who have no programming experience.

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 action="https://www.remwebdevelopment.com/resources/form-handler.php" method="POST">

</form>

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 set to a page that I created, which will simply dump out the data that was sent to it. The method attibute 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.

Labels and Text Boxes

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

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

We've added a label element, and an input element. 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 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. The id attribute allows you to specify a unique id for the element, and no other element in the HTML document should have the same id. In this case the id attribute is set to txtFirstName, which is something that I made up (you get to make up your own ids!). We'll use the id attribute later in the course when we get into JavaScript. The name attribute will be sent to the page that recieves 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.

If you view the form in the browser right now, it will look like this:

Submit Buttons

Notice that there is no 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" />

Checkboxes

We can add a checkbox 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 to the server and the value of value will also be sent. Both values for both the name and value attributes are arbitrary, which means that you can set them yourself.

Radio Buttons

You can add radio buttons like so:

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

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.

If you want to set a one of the radio buttons to be selected when the page loads (as the default setting), you can add a checked attribute and set it's value to true, like so:

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

Select Boxes (Drop-down Lists)

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

<label>Favorite Color:</label>
<select name="color">
    <option value="1">RED</option>
    <option value="2">BLUE</option>
    <option value="3">GREEN</option>
</select>

Select boxes are similar to radio button groups, because they allow users to select from a group of options. The value of the selected option will be sent to the server.

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

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

The TEXTAREA Element

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

<label>Comments:</label>
<textarea id="txtComments" name="comments"></textarea>

The elements we've discussed in this lesson cover the most basic means of gathering user input in HTML. With the release of HTML 5 a few more were added, such as a slider and a date input. They are fairly straight forward to use, so I'll leave it up to you to explore them.