Books Form in HTML ~ Multiplex Coder

Question:

Create a books form in a library to get the customer details and books details to be issued.

In addition to the sample form shown in Figure1, your form must include the constraints listed in the given instructions.

When you write the code for your form, you must use the HTML5 tags that are appropriate to replicate the form and fulfill all the specifications listed below.

1. Code the form with autocomplete active.
2. Given the image shown in Figure 1, it is easy to see that two fieldsets are used to create the main structure of the form. Your task is to create the fieldsets with the names Customer Info and Books respectively. Don’t worry about the content fields for the moment.
3. The Name input field you create should have, should set placeholder text as “Enter your name”, set field type as ‘text’ and it should be a mandatory (‘required’) field. Element name should be: ‘cusname’.
4. The Telephone input field type should be ‘tel’, placeholder text should be “Pattern: 234-567-8910”, a pattern to restrict the entry and it should be a mandatory (‘required’) field. The pattern should be of the type [ Pattern: 234-567-8910]. Element name should be: ‘telephone’.
5. The Email address field should have placeholder text as “Enter your email address” and allow multiple entries. This field should also be a mandatory (‘required’) field. Element name should be: ‘mail’ and type should be: ’email’.
6. The Quantity (Maximum 5) field should have a minimum value of 1 and a maximum value of 5. Element name should be: ‘quantity’ and type should be: ‘number’.
7. The Books field should have a data list. You can select the content you would like to list. The ‘name’ attribute value of the ‘input’ tag for the list is ‘book’ and the ‘list’ attribute value should be ‘books’. The ‘id’ attribute for the data list tag is ‘books’ and it should be available with the following options :

HTML5 – Bruce Lawson and Remy Sharp
HTML5 : Up and Running – Mark Pilgrim
Head First HTML5 Programming – Eric Freeman
Mastering HTML,CSS and JavaScript – Laura Lemay

CODE:–

<html>

<body>

Customer Info

</legend>

<p>

<label>

Name:

<input name="cusname" type="text"

placeholder="Enter your name" autofocus required size="50">

</label>

</p>

<p>

<label>

Telephone:

<input id="tel" name="telephone"

type="tel" required size="50" placeholder="Pattern: 234-567-8910" pattern="(([0-9]{3})(-[0-9]{3})(-[0-9]{4}))">

</label>

</p>

<p>

<label>

Email address:

</label>

</p>

</fieldset>

Books

</legend>

<p>

<label>

</option>

</datalist>

</label>

<label>

Quantity (Maximum 5): <input name="quantity" type="number" min="1" max="5">

</label>

</p>

</fieldset>

</form>

</body>

</html>

Tags:

Books Form in HTML

Question:

CODE:–

Related Post