Form Fields

In the previous chapter, we talked about how to create tables to display tabular data. In this chapter, we’ll go over how to create our own forms on a page.

Forms are useful in capturing and getting information from a user through form fields such as inputs, checkboxes, radio buttons, select dropdowns, etc. They can be used to control specific things on a page, or often used for search inputs, usernames, and passwords as well.

In this chapter we will go over how to build different types of form fields to acquire user input and how to properly use HTML to create them. We’ll figure out which elements we need to create to capture various types of data from the user.

We won’t, however, go too deep into how that information will be processed on the back end of a website. Processing form fields is a much deeper, broader topic in and of itself (lot’s of backend code that you won’t be familiar with just yet). For now, I will mostly just go over the basics of creating these form fields so we can visually see how they look and what functionality each element does.

Let’s first create a new page and call it form.html and save it in the same directory as your index.html and tables.html pages.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Fields</title>
  </head>
  <body>
    
  </body>
</html>

Creating a Form Field

To create a form on a page, we need to use the <form> element. This element will wrap around all the other form elements on the page and will determine where the form will display.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Fields</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form action="/signup" method="post">
      
    </form>
  </body>
</html>

The first thing you’ll notice are the two attributes attached to the <form> element: action and method. There are many other attributes that the <form> element can have, but these two are the most common.

The action attribute contains the URL for where the information that is gathered from the form will be sent to. That’s usually the URL used for the back end part of the webpage. For now, let’s just pretend we have a “/signup” URL where the information from the form will go to.

The method attribute tells the browser how it should submit/process the data in the form fields. Most form fields use the post method (which is the more secure, preferred method), as opposed to the get method. For now we’ll just use the post method.

NOTE: Just a reminder, we won’t dive too deep into how the information on these forms will get processed. For now, just remember that a form needs a way to know where to send the information to (using the “action” attribute), and a way to know how to send the information (using the “method” attribute).

Text Fields

Text input fields are your basic primary element used to capture user information. They can be used to capture text, passwords, numbers, and other text information.

Text input fields are created using the inline-level <input> element and can have a number of attributes. Let’s go ahead and add a few text input fields to our form. Remember that all form fields should be wrapped inside of the <form> element.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Fields</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form action="/signup" method="post">
      <input type="text" name="firstname" placeholder="Enter Your First Name">
      <br>
      <input type="text" name="lastname" placeholder="Enter Your Last Name">
      <br>
      <input type="password" name="password" placeholder="Enter a Password">
      <br>
      <input type="submit" name="submitbutton" value="Sign Up">
    </form>
  </body>
</html>

You’ll notice that the <input> elements contain several different attributes: type, name, placeholder, and value.

All input elements should have the type attribute. It is used to determine what type of input it should be. In the previous example, lines 9 and 11 are using type=”text”, in line 13 we are using type=”password” and on line 15 we are using the type=”submit”. Notice that when you enter anything in the text field you can view what you are typing in, but when you type inside the password input field, it only shows dots and hides your text input like a normal password field should do. The type=”submit” is used as the button to submit our form field. Clicking on it will take use to the URL listed in the “action” attribute of our <form> element.

Also, you’ll notice that I used <br> tags to create new lines for each input field, just so we can visualize them better.

The name attribute is another attribute that should be provided to any given input field. The value from the name attribute is used as the name of the input when sumbitting it to the back end. While we won’t necessarily be using it for this example, it is always best practice to include the name attribute. Also, the name attribute should not contain any white space.

The placeholder attribute is an optional attribute. It is used to only display a visual cue of what the input field should contain. If there was nothing in the placeholder value, then you would just have blank input fields, and it might not be apparent what those input fields are for. Placeholders go away once you have started typing in the input, and is only visible when there’s no value in the input field. Also note that placeholders aren’t used as a legitimate value, meaning you won’t be submitting any value if the placeholder is still showing in the input field.

The value attribute is another optional attribute. We included it as part of our type=”submit” input element so that we know what our input button should display. In most cases, type=”submit” input elements should always include the value attribute. If you include a value attribute to a type=”text” or type=”password” field, that will be the default value for that field when you land on or refresh that page.

Labels

Before placeholders were created, labels were the only way to let users kow what the input fields represented.

Labels are useful to include with your input fields to give those input fields meaning. Let’s say you didn’t have those placeholder attributes attached to your text inputs. Your users wouldn’t know what those text input fields would mean. But, by adding lables to our inputs, we can signify what those inputs are for.

Labels are usually placed before the input they are related to and are created using the inline-level <label> element. Let’s go ahead and add some labels to our inputs to make it clearer for our users to fill out.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Fields</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form action="/signup" method="post">
      <label for="fname">First Name</label>
      <br>
      <input type="text" name="firstname" id="fname" placeholder="Enter Your First Name">
      <br>
      <label for="lname">Last Name</label>
      <br>
      <input type="text" name="lastname" id="lname" placeholder="Enter Your Last Name">
      <br>
      <label for="pass">Password</label>
      <br>
      <input type="password" name="password" id="pass" placeholder="Enter a Password">
      <br>
      <input type="submit" name="submitbutton" value="Sign Up">
    </form>
  </body>
</html>

Labels usually have a for attribute that contains the same value as the id of the input that it’s relating to. So for our previous example, you’ll notice that every label’s for attribute is using the “id” value of the text inputs that it relates to.

Textareas

Textareas are useful for allowing users to type more than one line of text. They’re great for allowing users to write long paragraphs or large bodies of content that require more than one line of input.

Textareas are created using the <textarea> element. Let’s go ahead and a label and textarea elements to our code.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Fields</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form action="/signup" method="post">
      <label for="fname">First Name</label>
      <br>
      <input type="text" name="firstname" id="fname" placeholder="Enter Your First Name">
      <br>
      <label for="lname">Last Name</label>
      <br>
      <input type="text" name="lastname" id="lname" placeholder="Enter Your Last Name">
      <br>
      <label for="pass">Password</label>
      <br>
      <input type="password" name="password" id="pass" placeholder="Enter a Password">
      <br>
      <label for="comment">Comments</label>
      <br>
      <textarea name="comments" id="comment" maxlength="140"></textarea>
      <br>
      <input type="submit" name="submitbutton" value="Sign Up">
    </form>
  </body>
</html>

On line 23 of our code, you’ll notice that I included a maxlength attribute to our <textarea> element. The maxlength attribute let’s us control what the maximum allowed characters should be for that textarea. The maxlength attribute can also be applied to text inputs as well.

Also, the <textarea> element only accepts one type of value so the type attribute is not required for it.

We can include a default value to our text area by putting text in between the <textarea> tags, but for now let’s just leave it blank so that our users can fill it out with their own text.

Radio Buttons

Radio buttons are useful to allow users to select one option only from a list of visible options. They allow users to quickly select a choice from a small list of multiple choice options.

Radio buttons are created using the inline-level <input> element with the type=”radio” attribute value. Each of the radio buttons you create should have the same name attribute value so that all of the radio buttons within that group name correspond to each other.

Since radio buttons don’t have any option to include a text value (unlike text inputs) and are only clickable, we need to add a value attribute to them that provides the selected value when selected.

Let’s include some radio button options to our previous code.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Fields</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form action="/signup" method="post">
      <label for="fname">First Name</label>
      <br>
      <input type="text" name="firstname" id="fname" placeholder="Enter Your First Name">
      <br>
      <label for="lname">Last Name</label>
      <br>
      <input type="text" name="lastname" id="lname" placeholder="Enter Your Last Name">
      <br>
      <label for="pass">Password</label>
      <br>
      <input type="password" name="password" id="pass" placeholder="Enter a Password">
      <br>
      <label>Are you 18 years of age or older?</label>
      <ul>
        <li><input type="radio" name="age" value="yes" checked="checked">Yes, I am 18 years of age or older</li>
        <li><input type="radio" name="age" value="no">No, I am not 18 years or older yet</li>
      </ul>
      <label for="comment">Comments</label>
      <br>
      <textarea name="comments" id="comment" maxlength="140"></textarea>
      <br>
      <input type="submit" name="submitbutton" value="Sign Up">
    </form>
  </body>
</html>

For preview purposes, you’ll notice that I put the radio buttons inside of an unordered list. Also, the radio buttons both share the same name attribute value so that we’ll know which selection from that group of options the user has selected. If they were to have different name values, then they would not be grouped together for the same multiple choice options.

You’ll also notice that on line 23, we include a checked attribute with a value of “checked”. This allows the radio button to be checked intially by default. If you remove that checked attribute, it will be unselected by default until the user selects one of the options.

Checkboxes

Checkboxes are similar to radio buttons, except they allow users to select multiple selections as opposed to only one single option.

Checkboxes are created using the inline-level <input> element with the type=”checkbox” attribute value.

Again, very similar to radio buttons in that they also use the same name attribute values.

<!DOCTYPE html>
<html>
  <head>
    <title>Form Fields</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form action="/signup" method="post">
      <label for="fname">First Name</label>
      <br>
      <input type="text" name="firstname" id="fname" placeholder="Enter Your First Name">
      <br>
      <label for="lname">Last Name</label>
      <br>
      <input type="text" name="lastname" id="lname" placeholder="Enter Your Last Name">
      <br>
      <label for="pass">Password</label>
      <br>
      <input type="password" name="password" id="pass" placeholder="Enter a Password">
      <br>
      <label>Are you 18 years of age or older?</label>
      <ul>
        <li><input type="radio" name="age" value="yes" checked="checked">Yes, I am 18 years of age or older</li>
        <li><input type="radio" name="age" value="no">No, I am not 18 years or older yet</li>
      </ul>
      <label>What browsers do you have installed on your computer?</label>
      <ul>
        <li><input type="checkbox" name="browser" value="Chrome">Google Chrome</li>
        <li><input type="checkbox" name="browser" value="Firefox">Mozilla Firefox</li>
        <li><input type="checkbox" name="browser" value="Safari">Apple Safari</li>
        <li><input type="checkbox" name="browser" value="Internet Explorer">Microsoft Internet Explorer</li>
        <li><input type="checkbox" name="browser" value="Edge">Microsoft Edge</li>
        <li><input type="checkbox" name="browser" value="Opera">Opera</li>
      </ul>
      <label for="comment">Comments</label>
      <br>
      <textarea name="comments" id="comment" maxlength="140"></textarea>
      <br>
      <input type="submit" name="submitbutton" value="Sign Up">
    </form>
  </body>
</html>

As with radio buttons, checkboxes can also have the checked=”checked” attribute and value to have an option initially selected.

Select Dropdown List

Dropdown lists are useful to display a long list options and allow users to select only one option from a long list of items.

Similar to radio buttons where only one selection is selected from a list of options, select dropdowns provide a format that bundles all the list options in one element.

Select dropdown lists are created using the <select> element and contains multiple <option> elements wrapped inside of it that make up each option. The value attribute attached to each <option> element corresponds to the name attribute attached to the <select> element.

Let’s add a select dropdown list of a few countries and ask where the user is currently located (I apologize if your country is not listed, this is just an example anyways).

<!DOCTYPE html>
<html>
  <head>
    <title>Form Fields</title>
  </head>
  <body>
    <h1>Sign Up</h1>
    <form action="/signup" method="post">
      <label for="fname">First Name</label>
      <br>
      <input type="text" name="firstname" id="fname" placeholder="Enter Your First Name">
      <br>
      <label for="lname">Last Name</label>
      <br>
      <input type="text" name="lastname" id="lname" placeholder="Enter Your Last Name">
      <br>
      <label for="pass">Password</label>
      <br>
      <input type="password" name="password" id="pass" placeholder="Enter a Password">
      <br>
      <label>Are you 18 years of age or older?</label>
      <ul>
        <li><input type="radio" name="age" value="yes" checked="checked">Yes, I am 18 years of age or older</li>
        <li><input type="radio" name="age" value="no">No, I am not 18 years or older yet</li>
      </ul>
      <label>What browsers do you have installed on your computer?</label>
      <ul>
        <li><input type="checkbox" name="browser" value="Chrome">Google Chrome</li>
        <li><input type="checkbox" name="browser" value="Firefox">Mozilla Firefox</li>
        <li><input type="checkbox" name="browser" value="Safari">Apple Safari</li>
        <li><input type="checkbox" name="browser" value="Internet Explorer">Microsoft Internet Explorer</li>
        <li><input type="checkbox" name="browser" value="Edge">Microsoft Edge</li>
        <li><input type="checkbox" name="browser" value="Opera">Opera</li>
      </ul>
      <label for="country">What country are you located at?</label>
      <br>
      <select name="country" id="country">
        <option value="US">United States</option>
        <option value="AU">Australia</option>
        <option value="BR">Brazil</option>
        <option value="CA">Canada</option>
        <option value="CO">Columbia</option>
        <option value="FR">France</option>
        <option value="IN">India</option>
        <option value="JP">Japan</option>
        <option value="MX">Mexico</option>
        <option value="UK">United Kingdom</option>
        <option value="other">Other</option>
      </select>
      <br>
      <label for="comment">Comments</label>
      <br>
      <textarea name="comments" id="comment" maxlength="140"></textarea>
      <br>
      <input type="submit" name="submitbutton" value="Sign Up">
    </form>
  </body>
</html>

Notice that only the <select> element has the name attribute, since the other <option> elements contain its value.

You’ll also notice that all the <option> elements are wrapped inside of the <select> element to keep them grouped together as part of the list.

File Input

File inputs allow the browser to open up a default file popup window that allows you to select a file.

They are created using the <input> element with the type=”file” attribute value.

Unfortunately, each browser has it’s own take on the styling of the file input element and is difficult to style correctly and look the same on all browsers.

<input type="file" name="upload-file">

Hidden Inputs

Hidden inputs are just what you would expect: hidden. They are useful by providing a way to pass data to the back end without having to display the hidden input to the users on the page. They are mostly used for tracking codes, key codes, and other information that is helpful when processing the information for the form.

Hidden input fields aren’t visible to the user, but they can be seen in the source code of the page (when you right-click a webpage and select “View Page Source”).

To create a hidden input field, you use the <input> element with the type=”hidden” attribute value. It should also include a value attribute with an actual value to pass along to the back end when the form is submitted.

<input type="hidden" name="key-id" value="1234abcd">

Conclusion

Form fields are widely used throughout many websites and help provide ways for us to collect information from users and also allows users to interact with our webpages. While we only scratched the surface of form fields, it’s always good to know what options you have when you need to gather information from your users.

In the next chapter, we will finally go over how to style our webpages using CSS! That’s right, we’ve been writing only HTML elements so far, and unfortunately, they haven’t looked very pretty. But, in the next few chapters, we’ll go over the basics of writing CSS and learn some of the many, many things you can do to style your HTML.

Exercises you can do on your own

Update the form that asks for a user’s date of birth. Create it using 3 select dropdowns. One for Month, Day, and Year.
Update the form to ask the user what their favorite sport is. You can use radio buttons or a select dropdown. Or you can ask them which sports they like using checkboxes so they can select more than one.

← Prev Chapter: Part 6 – HTML Tables Next Chapter: Part 8 – Intro to CSS (Coming Soon) →