HTML Forms

The backbone of user interaction, learn how to collect, validate, and submit user data.

`The Form Container`

The <form> element acts as a container for different types of input elements. It handles where the data goes and how it is sent.

<form> : The wrapper that defines the start and end of an interactive section.
action : The URL where the form data will be sent after submission.
method : Defines the HTTP protocol; 'GET' appends data to the URL, while 'POST' sends data behind the scenes for security.
<label> : Provides a clickable caption for an input, significantly improving accessibility.
<fieldset> & <legend> : Used to group related data and provide a title for that specific group.

Standard Registration Form

A basic form using labels, text inputs, and the POST method for security.

<form action="#" method="POST" onsubmit="event.preventDefault(); document.getElementById('msg').style.display='block';">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required>

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

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

<p id="msg" style="display:none; color:green; margin-top:10px;">
  &#10003; Form submitted successfully!
</p>

`Common Input Types`

The <input> element is incredibly versatile. By changing the 'type' attribute, you can collect almost any kind of data.

text & password : Basic single-line text fields; password masks the characters.
email, tel & url : Specialized fields that trigger specific mobile keyboards and basic validation.
number & range : Used for numeric data; range displays a slider control.
date, month, week & time : Built-in pickers for selecting time-based information.
hidden : Stores data that cannot be seen or modified by the user, sent upon submission.

`Selection & Boolean Inputs`

When you need users to choose from predefined options, use buttons, checkboxes, or dropdown lists.

radio : Allows the user to select only one option from a group.
checkbox : Allows the user to select zero or more options from a group.
<select> & <option> : Creates a dropdown list to save screen space.
<optgroup> : Groups related options within a dropdown for better organization.
submit, reset & button : Types of buttons used to send the form, clear it, or trigger JS functions.

Selection and Multiline Text

Organizing options with optgroups and providing a larger area for text.

<select name="cars">
  <optgroup label="Swedish Cars">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="German Cars">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
<textarea name="message" rows="4" cols="50">Enter comments here...</textarea>

`Validation & Attributes`

HTML5 provides powerful built-in validation. This 'Constraint Validation API' ensures data is correct before it ever reaches your server.

required : Ensures a field is not left empty before submission.
placeholder : Displays a hint inside the field about what to enter.
disabled & readonly : 'disabled' stops interaction and submission; 'readonly' allows selection but no editing.
autofocus : Automatically puts the cursor in the field when the page loads.
pattern : Allows you to use Regular Expressions (Regex) to enforce specific data formats.
<textarea> : Used for multi-line user input, like comments or messages.

Advanced Input Types

Using fieldsets and legends to group specialized input types like color and range.

<fieldset>
  <legend>Preferences</legend>
  <label>Choose Color: <input type="color" name="favcolor"></label>
  <label>Volume: <input type="range" min="0" max="100"></label>
  <label>Birth Date: <input type="date" name="birthday"></label>
</fieldset>

Knowledge Check

1. Which 'method' attribute should be used when sending sensitive data like passwords?

2. What is the purpose of the <label> element's 'for' attribute?

3. Which input type is specifically used to allow a user to pick a number within a specific range using a slider?

4. Which attribute prevents a user from editing the text inside an input field?

Previous Next