HTML and CSS Reference
In-Depth Information
If you are going to require that users fill in certain fields in your form please, please, please let them know! There is
nothing worse for them than hitting the Submit button and then finding out that they have to go back and fill in
those fields that they didn't complete. It's annoying and makes for a terrible user experience.
Some browsers will highlight required fields in a dull red, but never rely on this. If you decide to apply some styling
to your forms fields, you could override this behavior. Simply place an asterisk (*) next to the required fields with a
little note at the top explaining to the users that they must fill in these fields (you did this for the bookings form).
That's all you need and most users will see the asterisk and know straight away that this field is required.
Restricting Length
It can sometimes be useful to restrict the length of the data provided by a user. For these occasions, you can use the
maxlength attribute on an <input> or <textarea> element and pass in the maximum number of characters
that the user can supply. When the user reaches the character limit, the browser will no longer allow anything the
user types to be added to the field.
In your bookings form, you used the maxlength attribute to restrict the length of the message to 250 characters.
<textarea id="message" name="message" cols="50" rows="10"
placeholder="Type your message..." maxlength="250" >
The maxlength attribute was present in HTML4 so you can rely on it being supported by web browsers.
Restricting Range
In your bookings form, you used the min and max attributes on the Guests input in order to restrict the range
of the input to between 1 and 12. These two attributes can also be used to restrict date inputs.
For example, suppose you are building a form for a brewery website that collects data about potential customers.
Let's say that the brewery has no interest in collecting the data of people under the age of 21 as they are not yet old
enough to buy their products. Here you could use the max attribute to specify a date that is 21 years in the past,
therefore preventing anybody under the age of 21 from completing the form (without being dishonest).
Here is an example of how that <input> element would look.
<input type="date" max="1991-04-24">
This would restrict the input to dates on or before April 24, 1991.
Search WWH ::

Custom Search