HTML Forms

Overview

It is very common for a web page to take in user information. For example, many websites have a registration form allowing people to sign up for access to the site. These sites would also contain a form for logging in. An e-commerce site would need a form to take in a buyer’s shipping address as well as payment information. The image below shows one of the most recognizable forms on the web.

In this lesson you will learn how to create a form using the HTML <form> tags.

Note: When a form gets submitted, the data is often sent to a server for processing. There is likely some JavaScript validation involved as well. We’ll look at those concepts in a later lesson. For the rest of this lesson, we’ll focus on the basics of building a form.

Form Tags

The <form> tags are used to create a form element. This element contains the form controls (inputs, submit buttons, etc), which you will use to take in user input.

Action Attribute

The opening form tag takes an action attribute with a URL value. When the form is submitted, the request is sent to the server hosting the action URL along with the form data for processing. You can get a glimpse at how this works by filling in any of the forms on this page and clicking the submit button. Each of the forms on this page utilize https://postman-echo.com, which is a site designed specifically for testing forms. When you submit one of the forms on this page, a new tab or window should open and you will see a bunch of text on the screen. This text includes data regarding your form submission. Look closely and you’ll see the value or values you typed into the form inputs.

Method Attribute

Most forms also have a method attribute with a value of get or post.

The get method is generally used for retrieving information or passing non-sensitive data. The form data is sent with the request in the form of URL parameters. Notice the following form uses the get method.

<form action="https://postman-echo.com/get" method="get" target="_blank">
    <input type="text" name="name" placeholder="name" />
    <input type="submit" value="submit" />
</form>

If you enter a name and click submit on the form above, you will be taken to the action URL https://postman-echo.com/get. Look closely at the URL and you’ll notice something was added to the end. For example, if you entered the name ‘Brian’, you would see https://postman-echo.com/get?name=Brian. Information from the form was added to the URL as query parameters. Note: you would not want to use the get method when sensitive data is involved, such as passwords or credit card numbers, since the information is not secure.

The post method is used when sensitive data needs to be sent, such as usernames, passwords, and credit card numbers.

<form action="https://postman-echo.com/post" method="POST" target="_blank">
    <input type="password" name="password" placeholder="password" />
    <input type="submit" value="submit" />
</form>

Add a fake password to the form above and submit it. You will be taken to the action URL of the form. No query params are added to the URL this time. When the post method is used, the data is sent a different way and your information is not exposed in the URL.

Form Elements

Forms can contain a number of different elements. The list below summarizes some of the more common form elements.

• <input> – Creates an input control. There are many input types which you can see listed in the next section.
• <textarea> – Creates a multiline input control.
• <label> – Creates a label for an input.
• <select> – Creates a dropdown list.
• <option> – Creates an option for a dropdown list.
• <optgroup> – Defines a group of related options in a dropdown list.
• <button> – Creates a clickable button.
• <fieldset> – Groups related elements in a form.
• <legend> – Creates a caption for a fieldset element.
• <datalist> – Specifies a list of pre-defined options for input controls.
• <output> – Defines the result of a calculation.

Form Controls

Form controls are typically thought of as the elements that users interact with. Examples include the input, textarea, and select elements. Controls are named using the name attribute. Each control also has a value. The name and value of the control are what gets sent to the server when the form is submitted. In the following example, the name of the input control is search and the value is whatever the user enters.

<form action="https://postman-echo.com/get" method="get" target="_blank">
    <input type="search" name="search" placeholder="search" />
    <input type="submit" value="submit" />
</form>

If you enter “HTML” in the search bar and click submit, you’ll notice the URL has ?search=HTML. The value of the name attribute is search and the value of the value attribute is HTML. These are sent to the server as a key-value pair. When more than one control is used on the form, there will be an & between the key/value pairs.

Input

Many different form controls can be created using the input element. It is one of the most common elements found on a form. The input tag takes the type attribute, which determines what kind of input is created. Check out the different types available below.

• button
• checkbox
• file
• hidden
• image
• password
• radio
• reset
• submit
• text
• color
• date
• datetime-local
• email
• month
• number
• range
• search
• tel
• time
• url
• week

The form below contains some of the input types listed above. Feel free to interact with them and see how they look and behave.

Label

The label element is used to create a label for a control element. Each of the inputs in the code below have a label before the input. The value of the for attribute of the label should be the same as the value of the id attribute of the input element.

Note: Label and input elements are inline elements, so they will line up horizontally by default. Styling has been applied to the forms on this page so they stack vertically instead.

<form action="https://postman-echo.com/post" method="post" target="_blank">
    <label for="text">Text</label>
    <input type="text" name="text" id="text" />

    <label for="email">Email</label>
    <input type="email" name="email" id="email" />

    <label for="password">Password</label>
    <input type="password" name="password" id="password" />

    <label for="number">Number</label>
    <input type="number" name="number" id="number" />

    <label for="tel">Tel</label>
    <input type="tel" name="tel" id="tel" />

    <label for="url">Url</label>
    <input type="url" name="url" id="url" />

    <label for="time">Time</label>
    <input type="time" name="time" id="time" />

    <label for="date">Date</label>
    <input type="date" name="date" id="date" />

    <label for="color">Color</label>
    <input type="color" name="color" id="color" />

    <input type="submit" value="submit" />
</form>

Textarea

The textarea control is used to collect longer amounts of text. For example, an online test that has an essay question would need to use a textarea element to take in a paragraph or multiple paragraphs of text. Along with the name, id, and placeholder attributes, the textarea below uses the rows attribute. The rows attribute defines the number of rows (or the height) of the textarea element. You can also use the cols attribute to control the width.

<form action="https://postman-echo.com/post" method="post" target="_blank">
    <textarea name="textarea" id="textarea-example" placeholder="Enter some text here..." rows="10"></textarea>
    <input type="submit" value="submit" />
</form>

Select

The select element is used to create a dropdown list. It works in conjunction with the option element, which is used to form each option for the dropdown list. Notice in the code below, the first option says ” — select an animal — “, but the value attribute is empty. This acts like placeholder text for the dropdown.

<form id="select-example" action="https://postman-echo.com/post" method="post" target="_blank">
    <select name="animal" id="animal" required="true">
      <option value> -- select an animal -- </option>
      <option value="cat">Cat</option>
      <option value="dog">Dog</option>
      <option value="hamster">Hamster</option>
    </select>
    <input type="submit" value="submit" />
</form>

Required Attribute

If you try clicking the submit button on the form below without selecting an animal, the form will not submit and instead you should see a popup message telling you to select an item from the list. This is due to the fact that the select control has the required attribute and the first option does not have a value.

The required attribute can be used on control elements to provide a small amount of form validation. The form will not submit unless all controls with the required attribute have been filled in or selected. The select example above has required=”true“.

Note: In HTML5 it is not necessary to include the =”true“. You can simply add required to the opening tag of the control element.