Books Form in HTML

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. 1. Code the form with autocomplete active.
  2. 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. 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. 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. 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. 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. 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
Quiz for Exam - Books Form
Quiz for Exam – Books Form

Code:

bookform.html

<html>
    <body>
        <form id="orderform" autocomplete="on">
            <fieldset>
                <legend>
                    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:
                        <input name="mail" type="email" placeholder="Enter your email address" required size="50" multiple>
                    </label>
                </p>
            </fieldset>
            <fieldset>
                <legend>
                    Books
                </legend>
                <p>
                    <label>
                        <input type="text" name="book" list="books" size="50">
                        <datalist id="books">
                            <option value="HTML5 - Bruce Lawson and Remy Sharp">
                            <option value="HTML5 : Up and Running - Mark Pilgrim">
                            <option value="Head First HTML5 programming - Eric Freeman">
                            <option value="Mastering HTML,CSS and JavaScript - Laura Lemay">
                            </option>
                        </datalist>
                    </label>
                    <label>
                        Quantity (Maximum 5): <input name="quantity" type="number" min="1" max="5">
                    </label>
                </p>
            </fieldset>
            <input type="submit" value="Submit" name="submit">
        </form>
    </body>
</html>

Recommended:

Leave a Comment

Your email address will not be published. Required fields are marked *

x