HTML and CSS Reference
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
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.
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.
<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” >
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 .
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.
<input type=”text” name=”name” id=”name” size=”65” >