MCQs on Advanced Forms and Validation | HTML

Introduction to Advanced Forms and Validation in HTML5

HTML5 introduces advanced form input types and validation attributes that enhance user interaction and improve form submissions. This section covers HTML5 input types, validation attributes, and elements like <datalist> and <progress>.

MCQs on Advanced Forms and Validation

Section 1: HTML5 Input Types

1. Which HTML5 input type allows users to select a date?
   a) <input type="date">
   b) <input type="datetime">
   c) <input type="calendar">
   d) <input type="text">
2. What does the <input type="color"> allow the user to do?
   a) Select a color from a palette
   b) Define a color code in hexadecimal
   c) Choose a gradient color
   d) Choose a background color for a form
3. Which input type is used for selecting a range of numbers in HTML5?
   a) <input type="range">
   b) <input type="number">
   c) <input type="slider">
   d) <input type="range-slider">
4. What is the purpose of the <input type="email"> in HTML5?
   a) To allow users to enter an email address
   b) To format the input as a valid email
   c) To create an email link
   d) To store an email in a database
5. Which HTML5 input type allows the user to enter a URL?
   a) <input type="url">
   b) <input type="link">
   c) <input type="website">
   d) <input type="text">

Section 2: Form Validation Attributes

6. Which of the following attributes is used to ensure a form field is mandatory?
   a) required
   b) mandatory
   c) validate
   d) checked
7. The pattern attribute in HTML5 is used to define:
   a) A specific date format
   b) A range of allowed values
   c) A regular expression for input validation
   d) The type of the input
8. What is the purpose of the min attribute in HTML5?
   a) To set the maximum allowed value for an input field
   b) To specify the minimum input length
   c) To set the minimum number of characters in a text field
   d) To set the minimum value for numeric inputs
9. What does the max attribute do in form validation?
   a) It defines the maximum character length
   b) It specifies the maximum allowed value for numeric inputs
   c) It limits the number of inputs in a field
   d) It defines the maximum value for date fields
10. Which attribute controls the increment for numeric inputs in HTML5?
    a) step
    b) min
    c) max
    d) length

Section 3: Using <datalist> and <progress>

11. The <datalist> element in HTML5 is used to:
    a) Display suggestions for a user to select from
    b) Create a dropdown list
    c) Display numeric ranges
    d) Create a table of data
12. How do you associate an input field with a <datalist> element in HTML?
    a) Use the for attribute
    b) Use the list attribute
    c) Use the data attribute
    d) Use the type attribute
13. What type of values can be included in a <datalist>?
    a) Numbers only
    b) Text or option elements
    c) Dates and times
    d) Only predefined options
14. What is the function of the <progress> element in HTML5?
    a) It displays a loading bar or progress indicator
    b) It stores the form data
    c) It validates the form input
    d) It sets the time limit for a form submission
15. Which attributes are used with the <progress> element to define its progress?
    a) value and max
    b) min and max
    c) value and step
    d) min and step

Section 4: Advanced Form Features

16. Which input type allows the user to select a time in HTML5?
    a) <input type="datetime-local">
    b) <input type="time">
    c) <input type="time-picker">
    d) <input type="clock">
17. The minlength attribute in HTML5 is used for:
    a) Setting the minimum number of characters required for input
    b) Restricting the input length
    c) Specifying the minimum value for numeric inputs
    d) Limiting the length of a password
18. What does the multiple attribute do in an input field?
    a) Allows the user to select multiple items or files
    b) Allows multiple form submissions
    c) Allows the input field to accept multiple types of values
    d) Allows a user to add multiple rows in a table
19. What input type should be used for a user to select a file for upload in HTML5?
    a) <input type="file">
    b) <input type="upload">
    c) <input type="image">
    d) <input type="document">
20. Which input type allows the user to select a time zone in HTML5?
    a) <input type="timezone">
    b) <input type="time-zone">
    c) <input type="datetime-local">
    d) <input type="datetime">

Section 5: Miscellaneous Form Features

21. How do you allow a user to enter a phone number in HTML5?
    a) <input type="tel">
    b) <input type="phone">
    c) <input type="text">
    d) <input type="number">
22. Which input type allows the user to enter a search query?
    a) <input type="search">
    b) <input type="query">
    c) <input type="text">
    d) <input type="url">
23. Which HTML5 input type is used for entering a range of values like 0 to 100?
    a) <input type="number">
    b) <input type="range">
    c) <input type="slider">
    d) <input type="range-slider">
24. Which attribute is used to specify the maximum value for an input type=”number”?
    a) max
    b) limit
    c) end
    d) range
25. What happens when you use the autofocus attribute on a form input?
    a) The field becomes automatically focused when the page loads
    b) The field automatically formats the input
    c) The field restricts user input
    d) The field is always disabled
26. Which of the following attributes can be used to define a placeholder in an input field?
    a) placeholder
    b) hint
    c) input-placeholder
    d) default-value
27. What is the function of the readonly attribute in a form field?
    a) It makes the field non-editable by the user
    b) It makes the field hidden
    c) It makes the field required
    d) It enables auto-filling of the field
28. What does the accept attribute define for an <input type="file"> element?
    a) It defines the file format that can be uploaded
    b) It specifies the file path
    c) It sets the maximum file size
    d) It defines the file type
29. Which attribute is used to display a placeholder in a <textarea> element?
    a) placeholder
    b) hint
    c) input-placeholder
    d) default-text
30. How do you specify a custom validation message for a form field?
    a) message attribute
    b) invalid-message attribute
    c) validation-message attribute
    d) setCustomValidity() method

---

Answers

Qno	Answer
1	a) <input type="date">
2	a) Select a color from a palette
3	a) <input type="range">
4	a) To allow users to enter an email address
5	a) <input type="url">
6	a) required
7	c) A regular expression for input validation
8	d) To set the minimum value for numeric inputs
9	b) It specifies the maximum allowed value for numeric inputs
10	a) step
11	a) Display suggestions for a user to select from
12	b) Use the list attribute
13	b) Text or option elements
14	a) It displays a loading bar or progress indicator
15	a) value and max
16	b) <input type="time">
17	a) Setting the minimum number of characters required for input
18	a) Allows the user to select multiple items or files
19	a) <input type="file">
20	b) <input type="datetime-local">
21	a) <input type="tel">
22	a) <input type="search">
23	b) <input type="range">
24	a) max
25	a) The field becomes automatically focused when the page loads
26	a) placeholder
27	a) It makes the field non-editable by the user
28	a) It defines the file format that can be uploaded
29	a) placeholder
30	d) setCustomValidity() method