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 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:
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
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
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 Label Element
You may have noticed in the previous example 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 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
The Button Element
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.
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
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
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
placeholder attribute accepts text or another appropriate value to show as a "placeholder" to indicate where and how the user should add input.
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.