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 type to 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 number, tel, email, or 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.
That browsers allow invalid data to be entered into forms should scare you. You could add JavaScript code to check that the input is valid, and that's a good idea. But such code can be disabled or bypassed. Ultimately, you can't be certain that the data your server receives from a form on the client is valid. More on that later, when you start learning about running code on your server.
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 id. It will become even more important when you start writing CSS and JavaScript.
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 rows and 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 name attribute:
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 option tag:
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 min and max attributes define the endpoints of the interval. The value attribute sets the slider's current position:
Note that there's no view precisely showing the input's current value. You could add a complementary number input and synchronize the two inputs using JavaScript.
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.