DEV Community

Dharan Ganesan
Dharan Ganesan

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode
  • 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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
  • 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">
Enter fullscreen mode Exit fullscreen mode

2. File Input

Allows users to upload files.

<input type="file" name="fileUpload">
Enter fullscreen mode Exit fullscreen mode

3. Range Input

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

<input type="range" name="volume" min="0" max="100">
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

Top comments (1)

Collapse
 
dhrn profile image
Dharan Ganesan

Here is the live example to play: stackblitz.com/edit/web-platform-f...