HTML Input Attributes - Solved Practice Questions

Introduction

HTML input attributes control how form fields behave and what information users can enter. Common attributes include placeholder, required, value, readonly, disabled, min, max, maxlength, and pattern. The following solved questions provide practical examples of these attributes.

Question 1

Problem Statement

Create a text input with a placeholder that tells the user what to enter.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Placeholder Attribute</title>
</head>
<body>

    <h1>Student Name</h1>

    <form>

        <label for="name">Name:</label>

        <input
            type="text"
            id="name"
            name="name"
            placeholder="Enter your full name">

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Student Name

Name: [Enter your full name____]

[Submit]

Step-by-Step Explanation

placeholder displays a temporary hint inside the input.
The placeholder disappears when the user starts entering text.
It does not replace the actual form value.

Question 2

Problem Statement

Create a form where the name and email fields are required.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Required Attribute</title>
</head>
<body>

    <h1>Registration Form</h1>

    <form>

        <label for="name">Name:</label>

        <input
            type="text"
            id="name"
            name="name"
            required>

        <br><br>

        <label for="email">Email:</label>

        <input
            type="email"
            id="email"
            name="email"
            required>

        <br><br>

        <button type="submit">Register</button>

    </form>

</body>
</html>

Output

Registration Form

Name:  [________________]

Email: [________________]

[Register]

Step-by-Step Explanation

required makes an input mandatory.
The browser checks required fields before normal form submission.
The form cannot normally be submitted while a required field is empty.

Question 3

Problem Statement

Create an input field with a default value of India.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Value Attribute</title>
</head>
<body>

    <h1>Country</h1>

    <form>

        <label for="country">Country:</label>

        <input
            type="text"
            id="country"
            name="country"
            value="India">

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Country

Country: [India____________]

[Submit]

Step-by-Step Explanation

value="India" places India inside the input initially.
Unlike placeholder, the value is actual input data.
The user can edit or replace the value unless the field is otherwise restricted.

Question 4

Problem Statement

Create a text input containing the value HTML Course that the user cannot edit.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Readonly Attribute</title>
</head>
<body>

    <h1>Course Information</h1>

    <form>

        <label for="course">Course:</label>

        <input
            type="text"
            id="course"
            name="course"
            value="HTML Course"
            readonly>

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Course Information

Course: [HTML Course________]

[Submit]

Step-by-Step Explanation

readonly prevents the user from editing the field.
The field remains usable and can generally be included in form submission.
The value can still be selected and copied.

Question 5

Problem Statement

Create a disabled input field containing the text Coming Soon.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Disabled Attribute</title>
</head>
<body>

    <h1>Course Registration</h1>

    <form>

        <label for="course">Course:</label>

        <input
            type="text"
            id="course"
            name="course"
            value="Coming Soon"
            disabled>

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Course Registration

Course: [Coming Soon________]  ← Disabled

[Submit]

Step-by-Step Explanation

disabled makes the input unavailable for user interaction.
A disabled field cannot normally be edited or focused.
Disabled controls are also not submitted with the form.

Question 6

Problem Statement

Create a number input that accepts an age between 18 and 60.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Min and Max Attributes</title>
</head>
<body>

    <h1>Age Form</h1>

    <form>

        <label for="age">Age:</label>

        <input
            type="number"
            id="age"
            name="age"
            min="18"
            max="60">

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Age Form

Age: [ 25 ▲▼ ]

[Submit]

Step-by-Step Explanation

type="number" creates a numeric input.
min="18" sets the minimum allowed value.
max="60" sets the maximum allowed value.
Browser validation can prevent values outside the specified range from being accepted during normal form validation.

Question 7

Problem Statement

Create a text input that allows a maximum of 20 characters.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Maxlength Attribute</title>
</head>
<body>

    <h1>Username</h1>

    <form>

        <label for="username">Username:</label>

        <input
            type="text"
            id="username"
            name="username"
            maxlength="20">

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Username: [________________]

[Submit]

Step-by-Step Explanation

maxlength="20" limits the input to 20 characters.
It is useful for usernames, short names, codes, and similar fields.
The browser prevents the user from entering more characters than the specified maximum in a normal text input.

Question 8

Problem Statement

Create a number input that accepts values in steps of 5.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Step Attribute</title>
</head>
<body>

    <h1>Select Quantity</h1>

    <form>

        <label for="quantity">Quantity:</label>

        <input
            type="number"
            id="quantity"
            name="quantity"
            min="5"
            max="50"
            step="5"
            value="5">

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Select Quantity

Quantity: [ 5 ▲▼ ]

[Submit]

Step-by-Step Explanation

min="5" sets the minimum value.
max="50" sets the maximum value.
step="5" defines the interval between valid values.
Valid values include 5, 10, 15, 20, and so on.

Question 9

Problem Statement

Create an input that accepts a six-digit student ID using the pattern attribute.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Pattern Attribute</title>
</head>
<body>

    <h1>Student ID</h1>

    <form>

        <label for="student-id">Student ID:</label>

        <input
            type="text"
            id="student-id"
            name="student-id"
            pattern="[0-9]{6}"
            placeholder="Enter 6-digit ID"
            required>

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Student ID

Student ID: [Enter 6-digit ID]

[Submit]

Step-by-Step Explanation

pattern defines a required format for the input.
[0-9] means a digit from 0 to 9.
{6} means exactly six digits.
required ensures that the field is not left empty.
For example, 123456 matches the pattern, while 12345 does not.

Question 10

Problem Statement

Create an email input that allows the browser to suggest previously entered email addresses using autocomplete.

HTML Code

<!DOCTYPE html>
<html>
<head>
    <title>Autocomplete Attribute</title>
</head>
<body>

    <h1>Email Form</h1>

    <form>

        <label for="email">Email:</label>

        <input
            type="email"
            id="email"
            name="email"
            autocomplete="email"
            placeholder="Enter your email">

        <br><br>

        <button type="submit">Submit</button>

    </form>

</body>
</html>

Output

Email Form

Email: [Enter your email_____]

[Submit]

Step-by-Step Explanation

autocomplete="email" tells the browser that this field expects an email address.
The browser may offer previously stored information as a suggestion.
Autocomplete behavior can vary between browsers and user settings.

Key Takeaways

placeholder provides a temporary hint.
required makes a field mandatory.
value sets an initial value.
readonly prevents editing while keeping the control usable.
disabled prevents interaction and excludes the control from form submission.
min sets the minimum allowed value.
max sets the maximum allowed value.
maxlength limits the number of characters.
step defines intervals for numeric and other suitable inputs.
pattern defines a required input format.
autocomplete helps browsers provide saved information.

Frequently Asked Questions (FAQs)

1. What are HTML input attributes?

Input attributes provide additional instructions that control how an <input> element behaves.

2. What is the difference between `readonly` and `disabled`?

readonly prevents editing but the control remains usable and can generally be submitted. disabled prevents interaction and the control is not submitted with the form.

3. What does `placeholder` do?

It displays a temporary hint inside an empty input field.

4. What does `required` do?

It tells the browser that the user must provide a value before normal form submission.

5. What is the purpose of `maxlength`?

maxlength limits the maximum number of characters a user can enter into a text-like input.

6. What are `min` and `max` used for?

They define the minimum and maximum allowed values for suitable input types such as number and date.

7. What does the `step` attribute do?

step defines the permitted intervals between values, such as 5, 10, 15, and 20.

8. What is the `pattern` attribute?

pattern specifies a format that the input value must match for constraint validation.

9. Does `placeholder` submit data?

No. Placeholder text is only a hint and is not submitted as the input’s value.

10. Does HTML have more input attributes?

Yes. Other useful attributes include accept, alt, checked, dirname, form, list, multiple, name, size, and autocomplete.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Rishabh Kumar

Introduction

Question 1

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 2

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 3

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 4

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 5

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 6

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 7

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 8

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 9

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Question 10

Problem Statement

HTML Code

Output

Step-by-Step Explanation

Key Takeaways

Frequently Asked Questions (FAQs)

1. What are HTML input attributes?

2. What is the difference between readonly and disabled?

3. What does placeholder do?

4. What does required do?

5. What is the purpose of maxlength?

6. What are min and max used for?

7. What does the step attribute do?

8. What is the pattern attribute?

9. Does placeholder submit data?

10. Does HTML have more input attributes?

Related Posts

2. What is the difference between `readonly` and `disabled`?

3. What does `placeholder` do?

4. What does `required` do?

5. What is the purpose of `maxlength`?

6. What are `min` and `max` used for?

7. What does the `step` attribute do?

8. What is the `pattern` attribute?

9. Does `placeholder` submit data?