20.4. Text Inputs

Our first basic web form included two simple text inputs. The fields allowed us to enter whatever we wanted, and they displayed everything we typed on the keyboard. Inside the input tag, the type="text" attribute set up this behavior.

We also saw how to use type="password" to set up a field that hides what the user enters. Besides text and password, there are other options we can assign to the type attribute. Each one changes how the input field acts on the screen.

The table below summarizes several common type options. Try out each field in the Demo column to see how it behaves.

Note

Form inputs will NOT look exactly the same in all browsers. However, the inputs should function the same way. Use https://caniuse.com, if you ever need to answer a question about browser support for a certain feature.

Different Text Input Types

Type	Syntax	Description	Demo
text	<input type="text" name="basic"/>	A single line text field.
password	<input type="password" name="pass-code"/>	The field hides the text typed by the user.
number	<input type="number" name="num-choice"/>	Provides an increase/decrease option in the field. Also, creates an error message if the user tries to submit a non-numerical entry. Optional min and max attributes restrict the range.
email	<input type="email" name="email-address"/>	Requires the user to enter an email address with the format text@server. The browser displays an error message if the user tries to submit an invalid address.
date	<input type="date" name="grad-date"/>	The browser checks that the entered value has a valid date format. Some browsers provide a date picker when the input field is clicked.
time	<input type="time" name="nvr-L8"/>	The browser checks that the field contains a valid time format. Some browsers provide a time picker.

20.4.1. Try It!

Return to your index.html form.

1. Save and commit the changes you made from the previous page.

2. Change one input type to number. Use the max and min attributes to set the allowed range between 1 and 5.

3. Save the change, then refresh the page in your browser. Try to submit the form with invalid entries in the field (e.g. abc, -38, or 3.33). What happens?

4. Change a different input type to email. Try submitting an entry without the @ symbol. When @ is included, does text have to appear on both sides of the symbol?

By choosing different HTML input types, we can add client-side validation to our forms. This means that the browser will prevent form submission if any of the input fields contain invalid data.

The user tried to submit a number outside of the allowed range.

20.4.2. A Larger Text Input Field

Sometimes, we need a larger text box to accept multi-line user input. In these cases, we use the textarea HTML element instead of input. It functions exactly the same way as the input type text, and it has its own set of useful attributes. On a webpage, the field also includes a resizing tab in the lower-right corner.

Unlike input, the textarea element does require a closing tag:

<textarea name="input-name"></textarea>

Try It!

In the editor below, experiment with the textarea element:

1. Enter some text in the field. What happens when you reach the end of a line? What happens when you tap Enter?

2. Use the resizing tab to expand or shrink the field.

3. What happens when you add text between the two <textarea> tags?

4. Experiment with these attributes inside the <textarea> tag:

   1. rows="..." (Fill in a whole number).

   2. cols="..." (Fill in a whole number).

   3. maxlength="10"

Now replace one of the input elements in index.html with a textarea field. What does the data look like when the server sends its response? How does submitting the form deal with newlines entered into the field?

20.4.3. Check Your Understanding

Question

Which input type is the BEST choice when the user needs to suggest a day for a meeting?

1. date
2. time
3. text
4. number

Question

Which input type is the BEST choice when the user needs to choose how many items to purchase from an online store?

1. date
2. time
3. text
4. number

Question

Which element would be the BEST choice if the user needs to enter a large amount of text?

1. input, with type="text"
2. input, with type="paragraph"
3. textarea, with a large number assigned to cols
4. textarea, with a large number assigned to rows