Day 57: Forms
Tags: webdev, typescript, 100daysofcode, html
Published: 2023-09-28 15:00:00

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:

```html
<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:

```html
<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:

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

- **Password (`type` attribute):** Conceals the entered text.

## Radio Buttons:

```html
<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:

```html
<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:

```html
<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:

```html
<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.

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

### 2. Pattern Attribute

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

```html
<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

```html
<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.

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

### 2. File Input

Allows users to upload files.

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

### 3. Range Input

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

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

### 4. Fieldset and Legend
Draws a box around the related elements.

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