HTML and CSS Reference
In-Depth Information
<input type="number" name="guests" id="guests" value="2"
min="1" max="12" >
These attributes should only be used on <input> elements with the number or datetime types.
Step
The step attribute is used to specify the accuracy of the data you are collecting. It is usually used on inputs that col-
lect numeric data or times.
For example, if you wanted to get the price of an object, you would want the value submitted to have no more than
two decimal places. This could be achieved by setting the step attribute to 0.01. You are basically setting the step
to a cent (or penny, for our British friends).
<input type="number" name="price" id="price" step="0.01" >
Setting the step attribute will also affect the helper controls displayed for number and range <input> ele-
ments.
Placeholder
The placeholder attribute can be used to temporarily display a hint within an <input> element. When the
<input> element gains focus, this text will disappear. Before HTML5 introduced the placeholder element, this
sort of functionality could only be achieved using JavaScript, which was a bit of a pain to set up if you had a lot of
inputs that needed placeholders.
You used the placeholder attribute to display a hint to the user in your bookings form.
<input type="email" name="email" id="email" placeholder="e.g.
joe@example.com" >
Datalists
You may have noticed that sometimes when you start typing into a form field, the browser will offer sugges-
tions to help you complete your input quicker. Until recently, this functionality was created using JavaScript and
clever CSS positioning. However, HTML5 makes it a lot easier for developers to add these suggestions using the
<datalist> element.
The <datalist> element enables developers to specify a number of different options that a user could type into
an input field. Each of these options is defined using an <option> element. To link this list of possible options up
to your <input> element, you will first need to give the <datalist> element a unique ID using its id attribute.
You can then link this <datalist> to your <input> element by setting the list attribute to the ID of the <da-
talist> , as shown in the following example code.
<input type="text" name="coffee" list="coffees" >
<datalist id="coffees" >
<option value="Americano"
<option value="Cappuccino">
<option value="Flat White">
<option value="Latte">
Search WWH ::




Custom Search