P1.4: Forms & Input Elements

Forms are the primary way web applications receive data inputs, logins, signups, and configuration parameters from users.

1. The <form> Element

A form is structured using the <form> tag, which wraps input elements. It handles submission actions.

• action: Specifies the URL where the form data should be sent.
• method: HTTP method to use (e.g., GET to request data, POST to send/store data securely).

<form action="/login" method="POST">
  <!-- Input fields go here -->
</form>

2. Dynamic Input Fields Checklist

HTML5 provides a vast range of specialized input types that automatically configure keyboard layouts on mobile devices.

Arjun NairView Profile 🔗

Real-World Developer Case Study

3 Years Exp

RoleFull Stack Engineer

Salary₹15 Lakhs/yr

CompanyFreshworks

Core Tech Stack

HTML5 FormsExpress RoutingMongoDB Integration

“95% of database validation errors can be avoided by utilizing HTML5 client-side validation. Set correct input types like 'email', 'number', and attributes like 'required'.”

3. Essential Input Types

Inputs use the <input> tag with different type parameters:

• type="text": Standard text input.
• type="email": Auto-validates that the format is user@domain.com.
• type="password": Hides input characters on screen.
• type="number": Restricts input to numeric values and triggers number keypad on mobile.
• type="checkbox": Multiple-choice selection.
• type="radio": Single-choice selection (group them using the same name attribute).

<!-- Input form markup -->
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required placeholder="name@example.com">

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

4. Client-side Validations

• required: Prevents form submission if empty.
• minlength/maxlength: Sets string length boundaries.
• min/max: Sets numerical thresholds.
• pattern: Regex query to enforce custom formats (e.g., ZIP codes).