HTML Form Controls and Attributes

By /

In the last chapter, we created simple forms using input fields. But a real form needs more than just text boxes. Sometimes you want the user to choose something from a list, write a longer message, or see a button they can click. In this chapter, we will study, HTML form controls and Attributes for these situations.

Textarea

An <input> field is good for short information like a name or email. But what if you want the user to write a message? That’s where <textarea> is useful.

<!DOCTYPE html>
<html>
<head>
    <title>Textarea Example</title>
</head>
<body>

    <h1>Contact Us</h1>

    <form>

        <label>Message:</label>
        <br>
        <textarea rows="5" cols="30"></textarea>

    </form>

</body>
</html>

Output

Contact Us

Message:

┌──────────────────────────┐
│ │
│ │
│ │
│ │
└──────────────────────────┘

A <textarea> gives the user a larger area where they can write multiple lines.

Dropdown List

Sometimes you don’t want the user to type an answer. You want them to choose from a list. For this, we use <select> and <option>.

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown Example</title>
</head>
<body>

    <h1>Choose Your City</h1>

    <form>

        <label>City:</label>

        <select>
            <option>Delhi</option>
            <option>Mumbai</option>
            <option>Chennai</option>
            <option>Kolkata</option>
        </select>

    </form>

</body>
</html>

Output

Choose Your City

City: [Delhi ▼]

When you click the dropdown, you can choose from the available options.

Here:

  • <select> creates the dropdown.
  • <option> creates each choice.

Selecting a Default Option

You can make one option selected when the page opens. Use the selected attribute.

<!DOCTYPE html>
<html>
<head>
    <title>Selected Option</title>
</head>
<body>

    <h1>Choose Your Course</h1>

    <form>

        <label>Course:</label>

        <select>
            <option selected>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>

    </form>

</body>
</html>

Output

Choose Your Course

Course: [HTML ▼]

HTML is already selected when the page opens.

Button

A button gives the user something to click. HTML provides the <button> element for creating buttons.

<!DOCTYPE html>
<html>
<head>
    <title>Button Example</title>
</head>
<body>

    <h1>My Website</h1>

    <button>Click Me</button>

</body>
</html>

Output

My Website

[Click Me]

A button by itself does not automatically perform a useful action. Later, JavaScript can be used to make buttons do things.

Useful Form Attributes

HTML attributes give extra information to an element. We have already used attributes such as type and name. Forms also have some useful attributes that control how users enter information. Let’s look at the important ones.

placeholder

A placeholder shows a small hint inside an input box.

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

    <h1>Login</h1>

    <form>

        <input type="email" placeholder="Enter your email">

    </form>

</body>
</html>

Output

Login

[Enter your email____________]

The hint disappears when the user starts typing.

required

Sometimes a field should not be left empty.

The required attribute tells the browser that the user must fill in that field before submitting the form.

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

    <h1>Registration</h1>

    <form>

        <label>Name:</label>
        <input type="text" required>

        <br><br>

        <input type="submit" value="Register">

    </form>

</body>
</html>

Output

Registration

Name: [________________]

[Register]

If the user clicks Register without entering a name, the browser will ask them to fill in the field.

value

The value attribute gives an input a value.

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

    <h1>Student Information</h1>

    <form>

        <label>Name:</label>
        <input type="text" value="Rahul">

    </form>

</body>
</html>

Output

Student Information

Name: [Rahul___________]

The input already contains Rahul when the page opens.

checked

The checked attribute can make a checkbox or radio button selected by default.

<!DOCTYPE html>
<html>
<head>
    <title>Checked Example</title>
</head>
<body>

    <h1>Choose Your Hobby</h1>

    <form>

        <input type="checkbox" checked>
        <label>Reading</label>

        <br>

        <input type="checkbox">
        <label>Gaming</label>

    </form>

</body>
</html>

Output

Choose Your Hobby

☑ Reading

☐ Gaming

The Reading checkbox is already selected.

disabled

The disabled attribute prevents the user from using an input or button.

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

    <h1>Account</h1>

    <form>

        <label>Username:</label>
        <input type="text" value="Rahul" disabled>

        <br><br>

        <button disabled>Submit</button>

    </form>

</body>
</html>

Output

Account

Username: [Rahul___________] (disabled)

[Submit] (disabled)

The user cannot change the username or click the button.

readonly

The readonly attribute allows the user to see a value but not change it.

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

    <h1>Student Information</h1>

    <form>

        <label>Student ID:</label>
        <input type="text" value="ST101" readonly>

    </form>

</body>
</html>

Output

Student Information

Student ID: [ST101___________]

The user can see the value but cannot edit it.

disabled vs readonly

The simple difference is:

  • readonly → The user can see the value but cannot change it.
  • disabled → The input is not available for the user to use.

min and max

For number inputs, min and max can set the allowed range.

<!DOCTYPE html>
<html>
<head>
    <title>Minimum and Maximum</title>
</head>
<body>

    <h1>Enter Your Age</h1>

    <form>

        <label>Age:</label>
        <input type="number" min="13" max="18">

    </form>

</body>
</html>

Output

Enter Your Age

Age: [ 13 ▲▼ ]

The input is set to accept a number between 13 and 18.

maxlength

maxlength sets the maximum number of characters a user can enter.

<!DOCTYPE html>
<html>
<head>
    <title>Maximum Length</title>
</head>
<body>

    <h1>Username</h1>

    <form>

        <label>Username:</label>
        <input type="text" maxlength="10">

    </form>

</body>
</html>

Output

Username

Username: [________________]

The user can enter a maximum of 10 characters.

A Small Form Using What We Learned

Now let’s put some of these controls and attributes together.

<!DOCTYPE html>
<html>
<head>
    <title>Student Registration</title>
</head>
<body>

    <h1>Student Registration</h1>

    <form>

        <label>Name:</label>
        <input type="text" placeholder="Enter your name" required>

        <br><br>

        <label>Age:</label>
        <input type="number" min="13" max="18">

        <br><br>

        <label>Course:</label>

        <select>
            <option selected>HTML</option>
            <option>CSS</option>
            <option>JavaScript</option>
        </select>

        <br><br>

        <label>Message:</label>
        <br>
        <textarea rows="4" cols="30" placeholder="Write something..."></textarea>

        <br><br>

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

    </form>

</body>
</html>

Output

Student Registration

Name: [Enter your name________]

Age: [ 13 ▲▼ ]

Course: [HTML ▼]

Message:

┌──────────────────────────┐
│ Write something… │
│ │
│ │
│ │
└──────────────────────────┘

[Register]

This is starting to look more like a real form.

Quick Recap

  • <textarea> is used for longer messages.
  • <select> creates a dropdown list.
  • <option> adds choices to a dropdown.
  • <button> creates a clickable button.
  • placeholder gives the user a hint.
  • required makes a field necessary.

Frequently Asked Questions (FAQs)

Q1. What are HTML Form Controls and Attributes?

HTML Form Controls and Attributes help create interactive forms and control how users enter or select information. Common controls include textareas, dropdowns, buttons, and form fields.

Q2. What are HTML form controls?

HTML form controls are elements that allow users to enter, select, or submit information. Examples include <textarea>, <select>, <option>, <input>, and <button>.

Q3. What is the <textarea> tag used for in HTML?

The <textarea> element creates a larger text field for HTML forms, allowing users to enter multiple lines of text, such as messages, comments, or descriptions.

Q4. How do you create a dropdown list in HTML?

You can create an HTML dropdown list using the <select> element and add choices with <option>. The selected attribute can be used to choose a default option.

Q5. What is the required attribute in HTML forms?

The required attribute makes a form field necessary. When a user tries to submit an HTML form without filling in a required field, the browser asks them to provide the missing information.

Q6. What are common HTML form attributes for beginners?

Common HTML form attributes include placeholder, required, value, checked, disabled, readonly, min, max, and maxlength. These attributes provide hints, set default values, restrict input, or control how form fields behave.

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

Related Posts

Scroll to Top