HTML Forms

A first look at how to build HTML forms.

Scroll down...

Content

Resources

Comments

Welcome to a first look at HTML forms, the meat and potatoes of the internet! Get ready for a healthy serving from the kebab of the web...

HTML forms are the meat and potatoes of the internet

Impressive eh? Most impressive.

Anytime you've filled out contact information or signed into your favorite social network you've been interacting with HTML forms. They're all over the place! They provide a standardized interface for users to submit data on any HTML page.

There are many types of inputs but the basic types fall into a few categories. We'll be introducing a few of these types in this lesson. We'll also show some new HTML5 tags that help group sections of a form. After that, you'll wrap up by reading a tutorial that will take you through more of the details of HTML forms.

Anatomy of an HTML Form

Every form starts with, you guessed it, a form tag. This tag is the wrapper for the form. The basic structure every form will have is:

  1. Form tag wrapper
  2. Inputs inside the form tag
  3. Submit button inside the form tag
<form action="/">
  < !-- Form inputs go here -->
  < !-- Submit button goes here -->
</form>

Forms can become much more complex, but they all follow the same above structure. Let's take a look at the more detailed insides of an HTML form.

Text Inputs

Text inputs are the most common type of input. There are many types of text inputs. HTML5 introduces a bunch of new input types for specific kinds of data like dates, colors and more. The important thing to remember is that at their core, they're really just text inputs with a bit more UI flare (depending on the browser you're using).

Here are some examples of text inputs:

Text:

Email:

Date:

Password:

Color:

Number:

As you can see, they all accept text as input. The type of the text input is changed by the type attribute. This has various impacts on the display and functionality of the input depending on the device and browser, but generally it changes the input to accept data reflecting its type.

Here are some regular old text inputs for normal plain text:

<label for="first-name">First Name</label>
<input type="text" name="first-name" placeholder="First name">

<label for="last-name">Last Name</label>
<input type="text" name="last-name" placeholder="Last name">

Here are some inputs with an email and password type:

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

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

By changing the type to password for example, we cause the text of the input to be displayed as little circles instead of their normal characters. This is the default functionality of the password input type to ensure passwords aren't displayed while entering sensitive information.

Text Inputs vs Textareas

Text inputs are usually meant for a small amount of text whereas large amounts of text (like full blog posts) are better filled out with a textarea tag. Textareas provide the user with a large space to write their text and are better suited for this purpose because they also allow resizing by default. Here is an example textarea:

And here is the code that generates a textarea:

<textarea name="about" placeholder="Tell us about yourself..."></textarea>

As you can see, textareas are a full tag by themselves and not created by changing the type of an input tag.

Checkboxes and Radio Buttons

Checkboxes and radio buttons are common form inputs to use when selecting between items or selecting multiple items. They are also created by altering the type attribute of the input tag. Here are a few examples of checkboxes and radio buttons:

One Two

One Two Three Four

There are a few differences between them and text inputs though.

One key difference between text inputs and checkboxes and radio buttons is that you're more likely to use the same name attribute for multiple checkboxes and radio buttons. For now, just accept this. The short explanation is that multiple radio/checkbox inputs are pointing to the same item in your form.

Another difference is that you're more likely to set the value of a radio button or checkbox from the beginning than for text inputs. You're more interested in providing options with these inputs for the user rather than accepting arbitrary data.

The best way to clarify this is through example. Here are some radio buttons and checkboxes in HTML code:

< !-- Radio Buttons -->
<label for="gender">Male</label>
<input type="radio" name="gender" value="m">
<label for="gender">Female</label>
<input type="radio" name="gender" value="f">

< !-- Checkboxes -->
<input type="checkbox" name="hobbies[]" value="skiing"> Skiing
<input type="checkbox" name="hobbies[]" value="coding"> Coding
<input type="checkbox" name="hobbies[]" value="cooking"> Cooking
<input type="checkbox" name="hobbies[]" value="sports"> Sports

As you can see from the above code, we've set the value attribute for all of these inputs. This will help send a meaningful value when the form has been submitted.

About the name Attribute

You may have also noticed that the name attribute is the same for the various groups of inputs in the example above. The name attribute is used to give a name to the input. That name is used to reference the data or value of that input once the form is submitted. In the case of radio buttons and checkboxes, you'll see that the name attribute is the same for these groups of inputs because they all point to the same item.

Select Dropdowns

Select dropdowns are the native HTML way of creating dropdowns. They are basically a list of items the user can choose from. The select tag wraps option tags each of which is an item with a value and displayed text. Here is an example:


Select dropdowns have a little bit more code since they have more moving parts, but the concept is no different that the input tags we've covered above. You give the select tag the name and each option is given a value and display text.

<label for="location">Location</label>
<select name="location">
  <option value="earth">Earth</option>
  <option value="jupiter">Jupiter</option>
  <option value="abyss">The Abyss</option>
</select>

A Word on Labels and Fieldsets

Labels and fieldsets are a way of showing the user the purpose of an input or group of inputs. Generally, labels are more common than fieldsets. However, fieldsets can be a great way to divide sections of your form.

Fieldset Name

Labels generally have a display text that is the capitalized title of the input name. So if the input name is first-name then the label would say First Name. Many times you'll see a for attribute on labels. This connects the label to the input and has some functionality gains for things like checkboxes and radio buttons (clicking the label to select the input for example).

Fieldsets are usually accompanied by a legend tag that displays the title of the fieldset. This makes sense because if a bunch of inputs have a similar purpose you'd probably want to label that purpose at the top of the group.

Here is an example of labels and fieldsets in HTML code:

<fieldset>
  <legend>Profile</legend>

  <label for="location">Location</label>
  <select name="location">
    <option value="earth">Earth</option>
    <option value="jupiter">Jupiter</option>
    <option value="abyss">The Abyss</option>
  </select>

  <br>
  <label for="about">About</label>
  <br>
  <textarea name="about" placeholder="Tell us about yourself..."></textarea>

  <br>
  <label for="hobbies">Hobbies</label>
  <br>
  <input type="checkbox" name="hobbies[]" value="skiing"> Skiing
  <input type="checkbox" name="hobbies[]" value="coding"> Coding
  <input type="checkbox" name="hobbies[]" value="cooking"> Cooking
  <input type="checkbox" name="hobbies[]" value="sports"> Sports
</fieldset>

Shay Howe: Building Forms with Shay Howe

Now that you've got enough to get started with HTML forms, your task is to read through Shay Howe's tutorial on HTML forms to get even more info on the details of HTML forms. There's a complete run down of how the different form input types effect display on different devices as well as live editable code examples!

Code Review

The important bits of code from this lesson

<form action="/">
  < !-- Form inputs go here -->
  < !-- Submit button goes here -->
</form>

< !-- Regular Text Inputs -->
<label for="first-name">First Name</label>
<input type="text" name="first-name" placeholder="First name">

<label for="last-name">Last Name</label>
<input type="text" name="last-name" placeholder="Last name">

< !-- Text Input Types -->
<label for="email">Email</label>
<input type="email" name="email" placeholder="Email" required>

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

< !-- Textareas -->
<textarea name="about" placeholder="Tell us about yourself..."></textarea>

< !-- Radio Buttons -->
<label for="gender">Male</label>
<input type="radio" name="gender" value="m">
<label for="gender">Female</label>
<input type="radio" name="gender" value="f">

< !-- Checkboxes -->
<input type="checkbox" name="hobbies[]" value="skiing"> Skiing
<input type="checkbox" name="hobbies[]" value="coding"> Coding
<input type="checkbox" name="hobbies[]" value="cooking"> Cooking
<input type="checkbox" name="hobbies[]" value="sports"> Sports


< !-- Select Dropdowns -->
<label for="location">Location</label>
<select name="location">
  <option value="earth">Earth</option>
  <option value="jupiter">Jupiter</option>
  <option value="abyss">The Abyss</option>
</select>

< !-- Labels and fieldsets -->
<fieldset>
  <legend>Profile</legend>

  <label for="location">Location</label>
  <select name="location">
    <option value="earth">Earth</option>
    <option value="jupiter">Jupiter</option>
    <option value="abyss">The Abyss</option>
  </select>

  <br>
  <label for="about">About</label>
  <br>
  <textarea name="about" placeholder="Tell us about yourself..."></textarea>

  <br>
  <label for="hobbies">Hobbies</label>
  <br>
  <input type="checkbox" name="hobbies[]" value="skiing"> Skiing
  <input type="checkbox" name="hobbies[]" value="coding"> Coding
  <input type="checkbox" name="hobbies[]" value="cooking"> Cooking
  <input type="checkbox" name="hobbies[]" value="sports"> Sports
</fieldset>

Wrapping Up

You now have all the tools necessary to get started building HTML forms. It will be key to have a solid understanding of these skills moving forward so you can confidently build forms that accept data from your users. Welcome to the meat and potatoes of the internet!



Sign up to track your progress for free

There are ( ) additional resources for this lesson. Check them out!

There are no additional resources for this lesson just yet!

Sorry, comments aren't active just yet!