HTML and CSS Reference
In-Depth Information
Input Types
There are a number of different input types that you can use to make it easier for users to fill out your web forms. In
this section you are going to learn about the input types that are widely supported by web browsers. In Chapter 6 you
will learn about the new input types that have been introduced in HTML5.
The text input type has traditionally been the most commonly used type on <input> elements. As the name sug-
gests, the text input type is used for instances where you need to collect some text from the user. This is also the
default type for the <input> element, so if you forget to specify a type attribute or are using a type that a user's
browser does not support, the browser will simply display a text field.
The name input in your form uses the text type.
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name” autofocus>
The password type can be used to indicate that an input is expecting a password. The browser won't display the
input that is typed into a password field in plain text; this stops those sneaky devils from catching a glance of your
password over your shoulder. Instead, password inputs display characters as black dots or asterisks, as shown in Fig-
ure 5-5.
Figure 5-5 A password input field.
Here is an example of an <input> element of type password .
<label for=”pass”>Password:</label>
<input type=”password” name=”pass” id=”pass”>
The checkbox type is useful when you need to collect a true or false answer from the user. By default the check-
box will be displayed as unticked; however, you can change this by adding the checked attribute to the <input>
Inputs with the checkbox type should also specify a value attribute; this is the data that will be sent to the server
if the checkbox is selected when the form is submitted.
Here is an example of an <input> element with the type checkbox set to display as ticked by default. The
value has been set to 1 because this is the common convention for true answers. Use 0 for false.
<label for=”contact”>Receive updates from Joe's Pizza Co?</label>
<input type=”checkbox” name=”contact” id=”contact” value=”1”
Search WWH ::

Custom Search