Form Controls & Input Types

Form Controls & Input Types

HTML provides a variety of form controls that allow users to enter, select and submit information. The most commonly used form control is the <input> element.

The type of input control is determined using the type attribute.

1. Basic Text Input

The text input type allows the user to enter a single line of text.

Syntax

<input type="text" name="username">

Example

<label for="fullname">Full Name:</label>
<input type="text" id="fullname" name="fullname">

It is commonly used for names, usernames, subjects, cities and other short text values.

2. Password Input

The password input type is used to enter sensitive text such as passwords. Characters entered by the user are visually masked.

<label for="password">Password:</label>
<input type="password" id="password" name="password">

3. Email Input

The email input type is designed for entering an email address. Browsers can perform basic validation before the form is submitted.

<label for="email">Email:</label>
<input type="email" id="email" name="email">

Example

<form>

    <label for="email">Email Address:</label>
    <input type="email"
           id="email"
           name="email"
           required>

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

</form>

The required attribute makes the field mandatory.

4. Number Input

The number input type is used when the user needs to enter a numerical value.

<label for="age">Age:</label>
<input type="number"
       id="age"
       name="age"
       min="1"
       max="100">

5. Date Input

The date input type allows the user to select a date using a browser-provided date interface.

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

Example

<label for="appointment">Appointment Date:</label>
<input type="date"
       id="appointment"
       name="appointment"
       min="2026-01-01">

6. Time Input

The time input type allows the user to enter or select a time.

<label for="meeting">Meeting Time:</label>
<input type="time" id="meeting" name="meeting">

7. Date and Time Input

The datetime-local input type allows users to enter both a date and a time.

<label for="event">Event:</label>
<input type="datetime-local"
       id="event"
       name="event">

8. Radio Buttons

The radio input type allows the user to select one option from a group.

Radio buttons belonging to the same group must generally have the same name attribute.

<p>Select your preferred mode:</p>

<input type="radio"
       id="online"
       name="mode"
       value="online">
<label for="online">Online</label>

<input type="radio"
       id="offline"
       name="mode"
       value="offline">
<label for="offline">Offline</label>

9. Checkboxes

The checkbox input type allows the user to select zero, one or multiple options.

<p>Select your interests:</p>

<input type="checkbox"
       id="html"
       name="skills"
       value="html">
<label for="html">HTML</label>

<input type="checkbox"
       id="css"
       name="skills"
       value="css">
<label for="css">CSS</label>

<input type="checkbox"
       id="javascript"
       name="skills"
       value="javascript">
<label for="javascript">JavaScript</label>

10. File Upload

The file input type allows the user to select a file from their device.

<label for="resume">Upload Resume:</label>
<input type="file"
       id="resume"
       name="resume">

Restricting File Types

The accept attribute can suggest the types of files that should be selected.

<input type="file"
       name="image"
       accept="image/*">

11. Colour Picker

The color input type provides a control for selecting a colour.

<label for="theme">Choose Colour:</label>
<input type="color"
       id="theme"
       name="theme"
       value="#3366ff">

12. Range Slider

The range input type allows the user to select a numerical value from a specified range.

<label for="volume">Volume:</label>
<input type="range"
       id="volume"
       name="volume"
       min="0"
       max="100"
       value="50">

It is useful for controls such as volume, brightness, intensity and other numerical settings.

13. Search Input

The search input type is intended for entering search queries.

<label for="query">Search:</label>
<input type="search"
       id="query"
       name="query">

14. URL Input

The url input type is designed for entering a web address.

<label for="website">Website:</label>
<input type="url"
       id="website"
       name="website"
       placeholder="https://example.com">

15. Telephone Input

The tel input type is intended for telephone numbers.

<label for="phone">Phone Number:</label>
<input type="tel"
       id="phone"
       name="phone"
       placeholder="+1 555 123 4567">

16. Hidden Input

The hidden input type stores a value that is not displayed as a normal form control to the user.

<input type="hidden"
       name="form_id"
       value="registration">

17. Submit and Reset Controls

Submit Button

A submit control sends the form data for processing.

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

Reset Button

A reset control restores the form controls to their initial values.

<input type="reset" value="Reset">

Button Type

The <button> element provides another flexible way of creating buttons.

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Click Me</button>

18. Important HTML Input Types

19. Important Attributes of Form Controls

HTML provides several attributes that control the behaviour and validation of form controls.

20. The required Attribute

The required attribute tells the browser that the user must provide a value before the form can be submitted.

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

21. placeholder vs value

<input type="text"
       name="username"
       placeholder="Enter your username">

<input type="text"
       name="country"
       value="Canada">

22. readonly vs disabled

23. Labels and Accessibility

Every important form control should have an associated <label>. The for attribute of the label should match the id of the form control.

<label for="email">Email Address:</label>
<input type="email"
       id="email"
       name="email">

24. Complete Example Using Multiple Controls

The following example combines several input types in one registration form.

<form>

    <label for="name">Full 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>

    <label for="password">Password:</label>
    <input type="password"
           id="password"
           name="password"
           required>

    <br><br>

    <label for="age">Age:</label>
    <input type="number"
           id="age"
           name="age"
           min="5"
           max="100">

    <br><br>

    <label for="dob">Date of Birth:</label>
    <input type="date"
           id="dob"
           name="dob">

    <br><br>

    <p>Preferred Learning Mode:</p>

    <input type="radio"
           id="online"
           name="mode"
           value="online">
    <label for="online">Online</label>

    <input type="radio"
           id="offline"
           name="mode"
           value="offline">
    <label for="offline">Offline</label>

    <br><br>

    <p>Skills:</p>

    <input type="checkbox"
           id="html"
           name="skills"
           value="html">
    <label for="html">HTML</label>

    <input type="checkbox"
           id="css"
           name="skills"
           value="css">
    <label for="css">CSS</label>

    <br><br>

    <label for="resume">Upload Resume:</label>
    <input type="file"
           id="resume"
           name="resume">

    <br><br>

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

</form>

25. Which Control Should You Use?

Case Study: Online Course Registration

Common Beginner Mistakes

• Using text when a more appropriate input type such as email or number is available.
• Giving radio buttons different name attributes when they are supposed to form one group.
• Forgetting to associate a label with its form control.
• Assuming that placeholder replaces a proper label.
• Treating hidden fields as secure storage.
• Depending only on client-side validation for security.
• Forgetting the name attribute when form data needs to be submitted.
• Using checkboxes when only one option should be selected.
• Using radio buttons when users should be able to select multiple options.

Exam Questions

Interview Questions

Practice Activity

Create an HTML registration form for an online learning platform using the following controls:

• Full Name
• Email Address
• Password
• Age
• Date of Birth
• Preferred Learning Mode using radio buttons
• Programming Skills using checkboxes
• Resume Upload
• Submit and Reset buttons