The first version of HTML supported one-way communication. The writer of a hypertext document communicated to the reader. The second version introduced the form and input elements, which gave the reader an opportunity to send data back to the web server. Let's meet some of the elements you can add to your web pages to prompt visitors for information.
To gather information that is unstructured but can be expressed in a single line of text, you use an input element whose
type attribute is set to
text. Setting the
password will cause the input to appear masked. Try typing in these input elements:
If the textual input should have a certain format, such as a telephone number or an email address, you may use the values
url. Try typing in these input elements and see if you can enter malformed data:
Probably you can enter bad data. The number field may disallow letters but allow fractions. The other fields may not seem any different from the regular text input, allowing you to type whatever you want. Nevertheless, you are encouraged to use these structured inputs because browsers on mobile devices will show a software keyboard customized for entering the specified type of information.
The alignment in this form is atrocious. You will learn ways to achieve a pleasing layout later on when we discuss stylesheets.
Before you can start typing in a text input, you must first give it keyboard focus. This is often done by clicking inside the input. On a desktop computer, some users may find moving the mouse and clicking inside this small box difficult. On a mobile device, the input may render too small for the user's finger to accurately tap it.
To make your interface more friendly, use the
label tag to expand the clickable area so that it includes the input's prompt. When the prompt is adjacent to the input in the HTML, you can wrap both the prompt and the input, like this:
Click on a prompt, and you will see the cursor appear in the associated input.
When the prompt isn't adjacent to the input, as can happen in complex layouts, you must explicitly connect the
label to the element. This is done by giving the input a unique identifier using the
id attribute and setting the label's
for attribute to the same identifier:
This is just a cameo role for
Sometimes you want to ask the user essay questions, whose answers will likely be spread across multiple lines of text. You use the
textarea element for long-form input:
Your browser may not show a very big box. The size can be controlled using the
cols attributes, but stylesheets are a better choice.
Asking the user for a calendar date is often painful. Each application seems either to have its own custom widget or to use unstructured text inputs. The date input swoops in to save the web:
Yes-no questions are asked using the checkbox input. By default, a checkbox is unchecked. You can change this default value by adding a
checked attribute. This attribute is a boolean attribute. It has no value. If present, a boolean attribute is true. If absent, false. Here the middle checkbox defaults to checked:
Sometimes you want the user to choose a single option out of a finite set. Perhaps you are asking the user for their T-shirt size, their favored candidate in an election, or their satisfaction on a scale from 1 to 5. The radio input is used for such exclusive choices. Try choosing amongst this set of three options:
You'll notice that you can select all three options. That's not good. Each radio button is independent of all the others currently, so there's no way for the the browser to know that it's supposed to uncheck a previously checked button. To bind them together, you must give the buttons a common
These buttons are named after an interface found on older radios, which have a small set of buttons for tuning in to favorite stations. Only one station could be tuned in a time, so pressing one button caused all the others to be released.
If the number of choices is large, radio buttons take up a lot of space. An alternative input type with similar affordances is the select menu, which presents the choices in a dropdown menu. Each choice is wrapped in an
The first choice is selected by default. Try adding the boolean attribute
selected to a different choice to change this behavior.
Unlike radio buttons, the select menu doesn't allow you to start without a selection. You may want to consider adding a null initial choice to prevent bias:
The select menu also supports multiple selection using the boolean attribute
multiple. Most browsers will change the display because a dropdown menu widget isn't a good fit for multiple selection. Does yours?
Multiple selection generally requires use of keyboard modifiers like Shift, Alt, or Command. Many users will not know how this works. Multiple checkboxes are probably a better fit if your users aren't experts.
When you need to ask a user for a number and accuracy is less important than tweakability, you use the range input. This is often called a slider. The element's
max attributes define the endpoints of the interval. The
value attribute sets the slider's current position:
Ask the user for a red-green-blue (RGB) color using the color input:
The color input has a wide variety of implementations. Try viewing it in different browsers.
Suppose you want the user to upload a profile image or a PDF of their résumé. For that you use a file input:
The types of the selectable files can be restricted using the
accept attribute. The value of this attribute is a comma-separated string of extensions (e.g.,
.png) or MIME types (e.g.,
text/html). Try narrowing down the filetypes.