HTML and CSS Reference
In-Depth Information
In the following sections, you will learn about the different types of inputs that you can use as well as each of the dif-
ferent attributes that you can apply to the
<input>
element. Here you are just going to cover the widely supported
types and attributes from HTML4. In Chapter 6 you will learn about the new input types and attributes introduced in
HTML5.
Input Attributes
As well as the standard global attributes that you looked at in Chapter 3, the
<input>
element has a number of spe-
cialized attributes, some of which you have already used in the Bookings page.
Naming Inputs
Although it is not strictly required, all your input elements
should
have a
name
attribute. If you intend on sending
the data to a server, you will need to specify a
name
attribute. Otherwise, the browser will not send your data.
<label for=”name”>Name:</label>
<input type=”text”
name=”name”
id=”name”>
As I mention earlier in this chapter, the value of the
name
attribute will form the
key
that the input data will be as-
sociated with when it is sent to the server.
Setting Default Values
You can set a default value for an input element using the
value
attribute. When the browser loads the page, it will
automatically place the value of the
value
attribute into the input box, or set a specialized control to this value.
Here is an example of how you could set the default value of the guests input to be 2.
<input type=”text” name=”guests” id=”guests”
value=”2”
>
Disabling Fields
You have two ways to disable a form field so that a user cannot alter its value. The first is to use the
disabled
at-
tribute; alternatively, you can use the
readonly
attribute.
<input type=”text” name=”name”
disabled
>
<input type=”text” name=”name”
readonly
>
The difference between these two attributes is that the value of
<input>
elements with the
readonly
attribute
will still be sent to the server, whereas
<input>
elements that have the
disabled
attribute will not send any data.
The
disabled
attribute is ignored if the input type is
hidden
.
Size
The
size
attribute is used to specify the number of characters that should be visible to a user at any one time, there-
fore altering the physical size of the
<input>
element. The default size is 20.
The
size
attribute does not limit the number of characters that a user can input into a field; for that, you use the
maxlength
attribute that you will look at in Chapter 7.
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name”
size=”65”
>
