Forms
HTML forms are used to gather input from users for a variety of reasons, from e-commerce checkouts, to contact forms, to email sign-ups, and more. HTML offers a comprehensive set of field types and other related elements and attributes. What is presented here is only the most basic information.
The Form Element
All the fields and other contents of a given form should be contained in the HTML form element. It acts as a container for all the fields and serves to associate them together as a single group of inputs.
The Action Attribute
In the above example, notice that the form tag includes an action attribute. This attribute holds the file path to a script that receives and handles the data sent from the form. This file might be javascript or some other programming language, and might save the data to a database or send it as an email or use it to pay for a product. In any case, all that is important for the HTML is that the action attribute contains a reference to the correct file.
The Input Element
Many (but not all) form fields are created using the input element. This is a self-closing tag and uses attributes to determine its behavior.
The Type Attribute
The most important attribute for the input element is the type attribute, which tells it what kind of input field it should be. Some example values include:
textemailurlnumberpasswordrangefilesubmit
In the above example, try filling out some of the form fields with the wrong type of content. Put numbers in the email field. Put an email in the number field. What happens when you try to submit the form?
The Textarea Element
The textarea element creates a large multi-line text field. It requires and opening and closing tag, and any text between the two tags will auto-fill the field.
What happens when you fill in multiple lines of text into the textarea field above?
Select & Option
The select element creates a drop-down select field and the option element, when nested inside a select, provides the selection options. Both elements require opening and closing tags.
In the above example, try changing the text of the option elements. What happens when you click on the field?
The Value Attribute
Sometimes, you want a user to see something different for an option than the data that gets recorded when the form is submitted. For instance, in a selection of states, you might want the user to see them spelled out (Texas), but the actual form to send the postal code (TX). For cases like this, you can use the value attribute to specify what data should be sent:
Showing a Grayed-out First Option
Sometimes you want the first thing to show in a select to be something like "Choose One". In cases like this, you can use an option which has the disabled attribute (to prevent it from being selected), the hidden attribute (to prevent it from showing in the dropdown), and the selected attribute (to make sure it shows by default):
In the above example, what happens when you remove the disabled attribute from the first option? What about when you remove the hidden attribute? And the selected attribute?
The Name Attribute
When a form is submitted, the data the user has entered is sent to be processed by whatever file is specified in the action attribute on the form element, as mentioned above. But the computer needs a way to know which specific piece of data comes from each field in the form. To provide this information, it is important to include a name attribute that identifies the data of each field in a form.
The name attribute is similar to the label element discussed next in that it identifies the different form fields. But while the label element identifies a field for human users, the name attribute identifies the field for the computer that processes the submitted form.
The Label Element
You may have noticed in previous examples how the label element was used to identify each field. This is its purpose, but there is something missing—each label should include the for attribute which should match the id applied to its form field. This lets the browser know which label is for which field.
Submit Buttons
Submit buttons that send the data entered into all the form fields can be created in a few different ways. The resulting form submission is pretty much the same, regardless of the method used.
Input with a Type of Submit
As with so many of the form fields, the input element can be used by specifying the corresponding type attribute. In this case, type="submit". By default, the button text reads "submit", but that text can be changed using the value attribute.
The Button Element
The button element can be used to submit a form, but can also be used to trigger javascript actions. To use it for a form, use type="submit" as an attribute. One of the main differences between the button element and input is that button is needs a separate closing tag. Whatever text is placed between the opening and closing tags is the text that is shown on the button.
Additional Attributes
There are a number of attributes that can be added to form fields to control their behavior. Here, we'll only look at a few of them.
The Required Attribute
The required attribute can be added to any form field. If that field is left empty when the user attempts to submit, the browser will show an error saying the field must be filled.
The Disabled Attribute
The disabled attribute can be added to any form field. It effectively "turns off" the functionality of that field and does not allow the user to interact with it.
The Placeholder Attribute
The placeholder attribute accepts text or another appropriate value to show as a "placeholder" to indicate where and how the user should add input.
Video Lesson
The following video demo is fully interactive. You can pause it at any time to directly edit the code, and resume playback to pickup where you left off.