HTML and CSS Reference
In-Depth Information
<form id="form1" autocomplete="off"></form>
If you set the
autocomplete
attribute of the
<form>
tag, autocomplete is disabled for all input fields
belonging to that form.
Providing a Drop-Down List
At times, you want to let the user either enter a value manually or pick it from a list. For desktop
applications, the combo box control is often used for such functionality. Suppose you're developing an
order-entry page where customer details are provided. If an order is being placed by an existing customer,
it's helpful to let the user choose existing details from a list rather than enter them again. You can provide
such a list using a combination of the
list
attributes of the
<input>
and
<datalist>
element. Listing 5-16
shows how this can be accomplished.
Listing 5-16.
Providing a Drop-Down List
<input id="country" type="text" list="pickuplist1" />
<datalist id="pickuplist1">
<option label="India" value="India"></option>
<option label="USA" value="USA"></option>
<option label="UK" value="UK"></option>
</datalist>
As you can see, the
<datalist>
element essentially provides a list of key-value pairs. The
value
attribute governs what should be filled in the target text box when a selection is made. The
label
attribute
acts as a description for the corresponding value. The
<input>
element's
list
attribute is set to the ID of
the
<datalist>
. At runtime, a list is displayed as shown in Figure 5-20.
Figure 5-20.
Drop-down list for an input field
The column at left in the drop-down list shows values as indicated in the
value
attribute, and the
column on the right displays values specified by the
label
attribute.
Setting a Form's Action and Method
Normally, the
<form>
tag has
action
and
method
attributes to indicate the form action and HTTP method
(
GET
/
POST
), respectively. In some cases, you may want to change these settings for individual Submit
