318 CHAPTER 7 Working with forms
■■<input type=’range’> A control for entering a numeric value when the exact value
is not important. On newer browsers, this renders as a slider control and is commonly
referred to as a slider control. This control has a value attribute, which is the current
slider value. The min attribute is the minimum settable value (default is 0). The max
attribute is the maximum settable value (default is 100). The step attribute defines the
granularity of the value, which is the amount of change the value will have as the slider
moves (default is 1). The step attribute must be an int unless the min value is set to a
non-int value.
■■<input type=’reset’> A button that resets all form values to default values; note
that this does not send data when the form is submitted.
■■<input type=’search’> A text field for entering a search string.
■■<input type=’submit’> A submit button.
■■<input type=’tel’> A telephone number field.
■■<input type=’text’> A single-line text field whose default width is 20 characters.
This is the default if the type attribute is not supplied.
■■<input type=’time’> A control for entering a time (no time zone).
■■<input type=’url’> A URL field.
■■<input type=’week’> A week and year control (no time zone).Using the
The <label> element can be used for labels that help the user identify the form submission
element. Consider the following HTML form.
<form method="post" action="getCustomer.aspx" >
Enter Customer ID:
<input type="text" name="Id" />
<input type="submit" value="Get Customer" />
</form>In this form, “Enter Customer ID:” can be placed inside a <label> element as follows.
<form method="post" action="getCustomer.aspx" >
<label for="Id">Enter Customer ID:</label>
<input type="text" name="Id" />
<input type="submit" value="Get Customer" />
</form>When the text is placed in a <label> element, the user sees no difference. When the user
clicks the label text, the Id element gets the focus. This provides better functionality for
mouse users or tablet users. Notice that the label has a for attribute, which must contain the
id of the element that will receive the focus when the user clicks the text.