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.
Text
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>
Passwords
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”>
Checkboxes
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>
element.
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”
