Lesson 6.1: Forms to Fill – Form Basics

I’m sure everyone has filled out an HTML form before. Any time you type something in or select a box, whether it is one element or fifty, it is an HTML form. In this lesson we’ll learn how you can create your own.

Form Basics

The basic element for creating a form is the form element (<form>). The form element has an opening and closing tag. The form element can take a handful of attributes. The only required attributes are the method and action.

Method is the method in which it gives the data to the server. There are only two possible values for this: post or get. Using get will put all of the data in the URL of the next page, in value=key pairs separated by ampersands (&). Post will “invisibly” send the information to the server. This data you will manage with some other language, such as Javascript or PHP.

Action is the action to take when the user submits the form. Specifically, it is the URL of the page to go to when the user hits submit.

The form can also take an id and name, just like most other elements, as well as a title and a few more common attributes. It can also take on- events. We’ll take about these attributes more when we discuss handling forms with Javascript.

Inside of the form element, you’ll put your other elements. You can use a paragraph element within in the form to put your input elements inside, but there is another one which can look even nicer: The fieldset element.

Fieldsets and Legends

Fieldsets are just like they sound. They are sets of different fields. Fieldsets are designed to allow you to group different inputs in your form into a logical method that makes sense. For example, let’s say you have a form where you do shipping and billing. You could have a fieldset with fields for information like name and phone number, a fieldset with fields for the shipping information, and a fieldset with fields for billing information.

The fieldset element’s tag is simply <fieldset>. It doesn’t have any unique elements, just elements such as the common name and id. It has an opening and closing tag, and the fields go in between the tags.

By default, the fieldset will wrap a border around the elements, with a space that has the text specified by the legend. The legend element (<legend>) has no unique attributes and has an opening and closing tag. You simply specify plain text between the tags.

Here is a brief example of a form, with a couple of elements that we’ll go over in the next lesson:

<form action="#" method="post">
  <fieldset>
    <legend>Register</legend>
    <label for="name">Name: </label>
    <input type="text" id="name">
    <label for="pass">Password: <label>
    <input type="password" id="pass">
    <input type="submit" value="Submit!">
  </fieldset>
</form>

Here is what the form looks like:

Take special note of how the fieldset wraps around the input fields and how the legend is placed in the fieldset’s border. The legend element is a required element within fieldset.

In the next lesson we’ll discuss the input element, which allows us to create text inputs, check boxes, radio buttons, and other types of buttons.