Working with Forms - HTML5 Foundations - page 120

Some possible values for the accept attribute are: image/* , audio/* , and video/* . You can find a full list of
these values (also known as MIME types) here: http://www.webmaster-toolkit.com/mime-
types.shtml .
Here is an example of a file <input> that only accepts image files.
<label id=”photos”>Upload Photos:</label>
<input name=”photos” id=”photos” type=”file” accept=”image/*”
multiple>
The accept attribute is a new addition in HTML5, so it won't work in older web browsers.
Grouping the Input Fields in Your Bookings Page Using
<fieldset> and <legend>
When creating larger web forms, you will often find it useful to group relevant form fields together. You can do that
using the <fieldset> and <legend> elements.
The <fieldset> element is used to define a group of inputs and should contain all the form elements related to
that group. The <legend> element is used to specify a name for a fieldset group and should be placed after the
start tag of the <fieldset> element, as shown in the following example.
<fieldset>
<legend>Contact Details</legend>
<div class=”field”>
<label for=”name”>Name:</label>
<input type=”text” name=”name” id=”name”>
</div>
<div class=”field”>
<label for=”email”>Email:</label>
<input type=”text” name=”email” id=”email”>
</div>
</fieldset>
You can also set the disabled attribute on a <fieldset> element. This will disable all the fields within the
fieldset so that the user cannot edit them.
Check out this Treehouse video where Nick Pettit covers fieldsets, legends, and labels: ht-
tp://teamtreehouse.com/library/websites/html/forms/fieldsets-and-labels .
You are now going to add the final touches to your bookings form, creating two groups of input fields: one for the
customer's contact details and one for the booking details.