Introduction

In this lesson, we’ll look at how you can set up forms correctly.

The Form Element

The <form> element provides a method of collecting a user’s input. We could collect the user’s name, email address, or message. We can also use checkboxes and radio buttons to allow users to choose specific items in the form.

You can use the <form> element to create a form that can submit data to a server where this data can be handled.

<form action="submit.php" method="POST">
  <input type="text" name="firstname" />
  <input type="submit" />
</form>

The form’s action property sets where the data gets sent. In the above example, the data will be sent to a file called submit.php where PHP will be used to handle the data.


ℹ️ INFO

Note: we won’t be working with data handling. It is outside the scope of this course.


In the code example above, you can see an HTML attribute called method with the value of POST. This attribute sets which HTTP request type will be used when the form data is submitted; in this case, we use the POST request to send data. You will learn more about HTTP and be familiarized with different HTTP request methods later in the programme.


📄 DOCUMENTATION


Inputs

One of the most common ways of collecting data from a user is using the <input> element. There are many different input types, and you can specify the input type through the type attribute. How they display in the browser depends on their type. By default, <input> has a text type.

The types of input include the following (although there are more):

  • Button
  • Checkbox
  • Date
  • Email
  • Number
  • Password
  • Radio
  • Submit
  • Tel (for telephone numbers, note that you should not use the ‘number’ type for a telephone number).

Name attribute

<input type="text" name="firstname" />

When the form data gets sent to the server, the input name will be sent with its content. The input name is set by simply using the name attribute. Since a form may have any number of input fields, these name attributes are essential! What these names are is up to you: you don’t have to call the input for the first name “firstname” – you can call it “forename”, “first_name”, “f_name”, or pretty much whatever you want. Just be sure not to use spaces or illegal characters. For your own sake, it is best to use names that will be easy to remember. While it is possible to name your first name input “wingnut”, it may not be so helpful when you revisit the project six months later.

Radio Buttons

Grouped radio buttons allow you to choose only one of the supplied options. On an HTML page, only one radio button may be chosen. If one button is chosen, the other radio buttons will deselect. For this reason, grouped radio buttons must share the same name. Here is an example:

<input type="radio" name="age" value="18-24" id="18-24" />
<label for="18-24">18-24</label>
<input type="radio" name="age" value="25-35" id="25-35" />
<label for="25-35">25-35</label>
<input type="radio" name="age" value="36-50" id="36-60" />
<label for="36-60">36-60</label>

⚠️ WARNING

To enable radio buttons to be selected one at a time, grouped radio buttons must share the same name value.

Labels

The code above shows that a label has been joined to an <input>. Semantically this is good, but it also has the added bonus of being good for UX as a user can click the <label> and still select the radio button. To link a <label> with a <input>; the id value of the <input> needs to match the for value of the <label>.

If you want the <input> and <label> elements to each be on separate lines, please do not use <br> tags. You can add content after the label and set it to display: block.

<input type="radio" name="age" value="18-24" id="18-24" />
<label for="18-24">18-24</label>
<input type="radio" name="age" value="25-35" id="25-35" />
<label for="25-35">25-35</label>
<input type="radio" name="age" value="36-50" id="36-60" />
<label for="36-60">36-60</label>

Another option is to group inputs and labels in a <div> or <section> element.

Value attribute

You might have noticed new attribute on these <input> elements: the value attribute. You can also see that the value of the value attribute is set, like this: value="18-24".

What is the difference between the name and value attributes? The name helps to identify the <input> element, and the value attribute is used to retrieve the associated data of an <input> element.

In the case of a text type input field, it would be the user’s typed input. But as radio buttons do not have an associated default value, we must supply it. This is especially important for any input type that does not allow text input – the value must be set in advance.

We mentioned that the value attribute is used to retrieve data from an element but can also be used to set the data. Take this text type input element, <input value="Pre-filled text example">. In this case, the input field will be pre-filled with text.

Checkboxes

Checkboxes allow users to pick multiple (or no) options on the form. You will see that each checkbox’s name attribute is unique, unlike on radio buttons, where it was the same.

<input type="checkbox" name="cats" value="cats" id="cats" />
<label for="cats">Cats</label>
<input type="checkbox" name="dogs" value="dogs" id="dogs" />
<label for="dogs">Dogs</label>
<input type="checkbox" name="dogs" value="hamster" id="hamster" checked />
<label for="hamster">Hamster</label>

ℹ️ INFO

Note: you can check a checkbox by default by adding the checked attribute. Read more.

Submit

The submit type <input> element is used to submit the form data, as you might have guessed. The submit type <input> is by default styled as a <button> element. When you want to add button text to the the submit type <input>, you do this through the value attribute.

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

Select

If you want to create a menu of options list, you can use the select element. Each option inside the <select> should have a value set.

<label for="cities">Choose a city:</label>
<select name="cities" id="cities">
  <option value="paris">Paris</option>
  <option value="oslo">Oslo</option>
  <option value="amsterdam">Amsterdam</option>
  <option value="copenhagen">Copenhagen</option>
</select>

Datalist

The <datalist> element is similar to a <select> in that it uses options for the user. The difference between the two is that with a select, the user must choose one of the available options, but with the datalist element it simply offers suggestions.

<label for="pet-choice">Choose a pet:</label>
<input list="pets" id="pet-choice" name="pet-choice" />

<datalist id="pets">
  <option value="Dog"></option>
  <option value="Cat"></option>
  <option value="Bird"></option>
  <option value="Horse"></option>
</datalist>

Textarea

To allow users to input multiple lines of text, as you would in a message, you can use the <textarea> element.

<textarea id="message" name="message" rows="5" cols="30"></textarea>

The row and col attributes set how large the <textarea> element is, although this can cause issues in responsive design. In general, it’s best to control the sizing of <textarea> elements by using CSS.

Fieldsets

Fieldsets are a good way of organizing form data. The <fieldset> element may be wrapped around any number of input elements.

<fieldset>
  <legend>Personal information</legend>
  <input type="text" name="firstname" />
  <input type="text" name="lastname" />
</fieldset>

The <legend> tag supplies a caption for the <fieldset>, allowing the user to know what this group of inputs is about. More than one <fieldset> may be included in a form.

CSS Attribute Selectors

We will also be looking at another way of styling CSS – CSS attribute selectors. Attribute selectors allow us to define CSS rules by shared attributes. We will be using attribute selectors to style a form, which will illustrate how these may be used and how this will again make for more efficient CSS and less work spent on formatting elements that share attributes. The syntax for CSS attribute selectors is square braces containing the attribute, as follows:

input[type="text"] {
  padding: 10px;
  width: 100%;
}

This selector will affect any form input element with text type. As with other CSS selectors, careful planning will allow us to style multiple elements simultaneously.

📄 DOCUMENTATION

If you want to learn more about input types, the MDN docs cover them really well: The Input (Form Input) element.

Activities

WATCH

This tutorial video on using forms. (10m 21s)

Lesson Task

Brief

There are practice questions in the master branch of this repo.

Attempt the answers before checking them against the answers in the answers branch of the repo.

Tags: