Day 57: Forms

Forms are an integral part of web development, enabling user interaction and data submission. Let's get into HTML input fields and forms, exploring various types, attributes, and adding validations.

Basic Input Field:

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

• Type (type attribute): Specifies the type of input. In this case, it's text.
• ID (id attribute): Uniquely identifies the input field.
• Name (name attribute): Identifies the input when the form is submitted.
• Placeholder: Text displayed in the input before any value is entered.
• Required: Specifies that the field must be filled out.

Textarea:

<textarea id="message" name="message" rows="4" cols="50" placeholder="Type your message here..."></textarea>

• Textarea (textarea element): Allows for multi-line text input.
• Rows and Cols: Define the visible size of the textarea.

Password Field:

<input type="password" id="password" name="password" placeholder="Enter your password" required>

• Password (type attribute): Conceals the entered text.

Radio Buttons:

<input type="radio" id="male" name="gender" value="male" checked>
<label for="male">Male</label>

<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>

• Radio (type attribute): Allows a user to select only one option from a set.
• Name: Groups radio buttons to ensure only one is selected.

Checkboxes:

<input type="checkbox" id="subscribe" name="subscribe" checked>
<label for="subscribe">Subscribe to newsletter</label>

• Checkbox (type attribute): Allows multiple selections.
• Checked: Initial state of the checkbox.

Select Dropdown:

<select id="country" name="country">
  <option value="usa">USA</option>
  <option value="canada">Canada</option>
  <option value="uk">UK</option>
</select>

• Select (select element): Creates a dropdown list.
• Options (option element): Define the options within the dropdown.

Form Example:

<form action="/submit" method="post">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" required>

  <br>

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

  <br>

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

• Form (form element): Wraps form elements.
• Action (action attribute): Specifies where the form data is sent.
• Method (method attribute): Defines how to send form data (GET or POST).

Form Validation

1. Required Attribute

The required attribute ensures a field must be filled out before submitting the form.

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

2. Pattern Attribute

The pattern attribute allows you to specify a regular expression for input validation.

<input type="text" name="zipcode" pattern="[0-9]{5}" placeholder="Enter your ZIP code">

3. Custom Validation with JavaScript

Validation can be done using JavaScript. For instance, for an email field

<input type="email" id="email" name="email" oninput="validateEmail()" required>
<span id="email-error"></span>

<script>
  function validateEmail() {
    const emailInput = document.getElementById('email');
    const errorSpan = document.getElementById('email-error');

    if (!emailInput.checkValidity()) {
      errorSpan.textContent = 'Please enter a valid email address.';
    } else {
      errorSpan.textContent = '';
    }
  }
</script>

• oninput: Triggers the validation function when the user inputs data.
• checkValidity(): Checks if the input satisfies the validation constraints.

Advanced Forms

1. Date Input

This input type provides a date picker.

<input type="date" name="birthdate">

2. File Input

Allows users to upload files.

<input type="file" name="fileUpload">

3. Range Input

Creates a slider for selecting a value within a specified range.

<input type="range" name="volume" min="0" max="100">

4. Fieldset and Legend

Draws a box around the related elements.

<form>
  <fieldset>
    <legend>Personal Information</legend>
    <!-- Inputs go here -->
  </fieldset>
  <button type="submit">Submit</button>
</form>