Loading... Login Loading... Register

HTML Forms and Input Types Quiz

Want to learn more than this quiz offers you? Have a look at my Frontend web development courses.

Create an account and save your quiz results

Login and save your results

First Name *

Last Name *

Email *

Password *

Confirm Password *

I agree to the Terms of Service & Privacy Policy.

Add me to your newsletter.

Question 1/14

What is the main purpose of the

placeholder

attribute in an

input

element?

Select your answer

To validate the input format

To set a default value for the input

To provide a hint to the user about what to enter

To specify the form submission URL

Question 2/14

Which two attributes must match to correctly submit files from an

input type="file"

element?

Select your answer

name

and

form

form

and

action

name

and

accept

accept

and

type

Question 3/14

Which attribute would you use to specify a default directory for file inputs, only supported in some browsers?

Select your answer

webkitdirectory

defaultdirectory

directory

directory-name

Question 4/14

Which HTML attribute is used to specify that an input field must be filled out before submitting a form?

Select your answer

validate

compulsory

mandatory

required

Question 5/14

If you want to specify a set of non-sequential values for an

input type="range"

, which attribute can you use?

Select your answer

list

min

max

step

Question 6/14

When using

input type="radio"

, how can you ensure that only one radio button can be selected from a group?

Select your answer

Ensure all radio buttons in the group have the same

name

Use the same

value

for all radio buttons

Place all radio buttons in the same container element

Assign a unique

id

to each radio button

Question 7/14

Which attribute is used to specify the acceptable file types for an

input type="file"

element?

Select your answer

filter

types

files

accept

Question 8/14

In an

input type="text"

element, how can you set a pattern that the input must match?

Select your answer

Using the

required

attribute

Using the

validate

attribute

Using the

format

attribute

Using the

pattern

attribute

Question 9/14

How can you associate a

label

element with an

input

element?

Select your answer

By using a

refer

attribute in the

label

element

By using the

for

attribute in

label

that matches the

id

input

By wrapping the

input

inside the

label

tag

By setting the

label

attribute on

input

element

Question 10/14

How do you ensure that a user enters a value within a specific numerical range in a text input?

Select your answer

Use

min

and

max

attributes with

type="number"

Use

maxlength

property

Use

pattern

attribute with

type="text"

Use

type="range"

Question 11/14

Which input type would be best for allowing users to select a date from a calendar interface?

Select your answer

type="inputdate"

type="datetime"

type="calendar"

type="date"

Question 12/14

What does the

type="password"

attribute do for an input field?

Select your answer

Validates the input for security

Hides the user's input with dots

Encrypts the input data

Converts the input to a secure hash

Question 13/14

Which input type automatically provides a numeric up/down control to allow the user to increase/decrease a value?

Select your answer

type="number"

type="range"

type="text"

type="button"

Question 14/14

Which input type is best to use when collecting an email address from a user?

Select your answer

type="email"

type="text"

type="url"

type="contact"

Your Results

You did not answer any questions correctly.

Your Answers

Question 1/14

😊 Your answer was correct 🙁 Your answer was incorrect

What is the main purpose of the <pre><code>placeholder</code></pre> attribute in an <pre><code>input</code></pre> element?

Available answers

To validate the input format

To set a default value for the input

To provide a hint to the user about what to enter

To specify the form submission URL

The

placeholder

attribute gives users an example of what to enter into the input field, appearing as greyed-out text until the user starts typing.

Question 2/14

😊 Your answer was correct 🙁 Your answer was incorrect

Which two attributes must match to correctly submit files from an <pre><code>input type="file"</code></pre> element?

Available answers

<pre><code>form</code></pre> and <pre><code>action</code></pre>

<pre><code>name</code></pre> and <pre><code>accept</code></pre>

<pre><code>accept</code></pre> and <pre><code>type</code></pre>

To correctly submit files from an

input type="file"

, the

name

of the input should correspond to the receiving parameter expected in the server form handler, and if used, the

form

attribute should correspond to the ID of the form.

Question 3/14

😊 Your answer was correct 🙁 Your answer was incorrect

Which attribute would you use to specify a default directory for file inputs, only supported in some browsers?

Available answers

<pre><code>webkitdirectory</code></pre>

<pre><code>defaultdirectory</code></pre>

<pre><code>directory</code></pre>

<pre><code>directory-name</code></pre>

The

webkitdirectory

attribute, though not a standard attribute, is used in some browsers to allow an

input type="file"

to select and upload a directory.

Question 4/14

😊 Your answer was correct 🙁 Your answer was incorrect

Which HTML attribute is used to specify that an input field must be filled out before submitting a form?

Available answers

<pre><code>validate</code></pre>

<pre><code>compulsory</code></pre>

<pre><code>mandatory</code></pre>

<pre><code>required</code></pre>

The

required

attribute is used to make an input field mandatory, indicating that the form cannot be submitted until this field is filled.

Question 5/14

😊 Your answer was correct 🙁 Your answer was incorrect

If you want to specify a set of non-sequential values for an <pre><code>input type="range"</code></pre>, which attribute can you use?

Available answers

The

list

attribute can be used with

input type="range"

to specify predefined, non-sequential values via an associated

datalist

element.

Question 6/14

😊 Your answer was correct 🙁 Your answer was incorrect

When using <pre><code>input type="radio"</code></pre>, how can you ensure that only one radio button can be selected from a group?

Available answers

Ensure all radio buttons in the group have the same <pre><code>name</code></pre>

Use the same <pre><code>value</code></pre> for all radio buttons

Place all radio buttons in the same container element

Assign a unique <pre><code>id</code></pre> to each radio button

All radio buttons within the same group should share the same

name

value, allowing only one selection at a time.

Question 7/14

😊 Your answer was correct 🙁 Your answer was incorrect

Which attribute is used to specify the acceptable file types for an <pre><code>input type="file"</code></pre> element?

Available answers

<pre><code>filter</code></pre>

<pre><code>types</code></pre>

<pre><code>files</code></pre>

<pre><code>accept</code></pre>

The

accept

attribute specifies the types of files that the server accepts. It can be used to filter the files that a user may include in their submission.

Question 8/14

😊 Your answer was correct 🙁 Your answer was incorrect

In an <pre><code>input type="text"</code></pre> element, how can you set a pattern that the input must match?

Available answers

Using the <pre><code>required</code></pre> attribute

Using the <pre><code>validate</code></pre> attribute

Using the <pre><code>format</code></pre> attribute

Using the <pre><code>pattern</code></pre> attribute

The

pattern

attribute allows you to specify a regular expression that the input value must match before the form can be submitted.

Question 9/14

😊 Your answer was correct 🙁 Your answer was incorrect

How can you associate a <pre><code>label</code></pre> element with an <pre><code>input</code></pre> element?

Available answers

By using a <pre><code>refer</code></pre> attribute in the <pre><code>label</code></pre> element

By using the <pre><code>for</code></pre> attribute in <pre><code>label</code></pre> that matches the <pre><code>id</code></pre> of <pre><code>input</code></pre>

By wrapping the <pre><code>input</code></pre> inside the <pre><code>label</code></pre> tag

By setting the <pre><code>label</code></pre> attribute on <pre><code>input</code></pre> element

Associating a

label

and an

input

by wrapping the

input

within

label

makes HTML more semantic and enhances usability.

Question 10/14

😊 Your answer was correct 🙁 Your answer was incorrect

How do you ensure that a user enters a value within a specific numerical range in a text input?

Available answers

Use <pre><code>min</code></pre> and <pre><code>max</code></pre> attributes with <pre><code>type="number"</code></pre>

Use <pre><code>maxlength</code></pre> property

Use <pre><code>pattern</code></pre> attribute with <pre><code>type="text"</code></pre>

Use <pre><code>type="range"</code></pre>

To restrict inputs to a specific range of numbers, use the

min

and

max

attributes along with

type="number"

. This ensures only values within the given range can be submitted.

Question 11/14

😊 Your answer was correct 🙁 Your answer was incorrect

Which input type would be best for allowing users to select a date from a calendar interface?

Available answers

<pre><code>type="inputdate"</code></pre>

<pre><code>type="datetime"</code></pre>

<pre><code>type="calendar"</code></pre>

The

type="date"

input provides a calendar interface, which is ideal for date selection.

Question 12/14

😊 Your answer was correct 🙁 Your answer was incorrect

What does the <pre><code>type="password"</code></pre> attribute do for an input field?

Available answers

Validates the input for security

Hides the user's input with dots

Encrypts the input data

Converts the input to a secure hash

The

type="password"

attribute masks the user's input, typically with dots or asterisks, to maintain privacy.

Question 13/14

😊 Your answer was correct 🙁 Your answer was incorrect

Which input type automatically provides a numeric up/down control to allow the user to increase/decrease a value?

Available answers

<pre><code>type="number"</code></pre>

<pre><code>type="range"</code></pre>

<pre><code>type="button"</code></pre>

The

type="number"

input provides a spinner control, allowing users to easily increase or decrease the numeric value.

Question 14/14

😊 Your answer was correct 🙁 Your answer was incorrect

Which input type is best to use when collecting an email address from a user?

Available answers

<pre><code>type="email"</code></pre>

<pre><code>type="contact"</code></pre>

The

type="email"

input ensures that the email address entered by the user is in a valid format and may trigger device-specific optimizations, such as showing the appropriate keyboard layout on mobile devices.