Forms

HTML forms help us in creating interactive web applications where users can provide information, such as contact forms, login forms, and surveys and these information and we can collect these user input and submit it to a server for processing.

Creating Forms (<form>)

A form is created using the <form> tag, which contains various input elements and attributes to define its behavior.

<form action="/submit_form" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />
  <br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" />
  <br />
  <input type="submit" value="Submit" />
</form>

This code creates a basic form with text and email input fields and a submit button. Without any styling, the above code will look like this. You can try entering information on the input fields, click

Name:
Email:

You may be wondering what is meant by email and text input fields; each serves as a different purpose.

What is <label> ?

Before we go in details about type of input elements, let’s talk about the label element which is used tandem with the form elements.

The <label> element in HTML is used to provide a descriptive caption or accessible name for a form element (such as <input>, <textarea>, or <select>).

we use for attribute in label to explicitly associate a label with a form element. The value of the for attribute should match the id of the form element it is labeling.

When a <label> is properly associated with its form control, clicking on the label will automatically move focus to the input field, checkbox, radio button, etc. For people using assistive devices, like screen readers, label helps to navigate and interact with forms more effectively.

Different Types of Input Elements:

Lets look at a different input element commonly used in a form element.

1. Text Input

For collecting single line text input from users we can use <input type="text">

<label for="username">Username:</label>
<input type="text" id="username" name="username" />

2. Password Input

For collecting sensitive information from users we can use <input type="password">. Character users type in an input element with type attribute value password is obscured while the user is typing, ensuring privacy.

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

3. Email Input

For collecting email addresses from users. It provides basic validation for correct

<label for="email">Email:</label> <input type="email" id="email" name="email" />

4. Number Input

For collecting numbers from users you can use <input type="number">, which provides basic validation for correct values. It can use the step,min and max attributes to specify the valid range of values.

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="100" />

5. Radio Buttons

Used to allow users to select one option from a predefined set of choices.

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

6. Checkboxes

Used to allow users to select one or multiple options.

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

Other Form Elements

7. Textarea

Used for collecting multi-line text input from users.

<label for="message">Message:</label>
<textarea id="message" name="message"></textarea>

8. Dropdown

Dropdowns are created using the <select> element with nested <option> elements. They allow users to select one or more predefined options.

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

9. Button

The <button> element is used to create clickable elements. It is not considered an input element, but it is essential for form submission.

<button type="submit">Submit</button>

Form Attributes (action, method)

Defining Form Behavior and Submission:

1. Attribute (action) The action attribute specifies the URL where the form data should be sent when the form is submitted.

<form action="/submit_form" method="post"></form>

2. Method Attribute (method) The method attribute specifies the HTTP method to use when sending form data. Common values are get and post.

• GET Method: Sends form data as URL parameters. Suitable for retrieving data without side effects.

<form action="/search" method="get"></form>

• POST Method: Sends form data as a request body. Suitable for submitting data that changes server state.

<form action="/submit_form" method="post"></form>

Form Validation (required, pattern)

Adding Validation Attributes to Inputs:

1. Required Attribute (required) The required attribute ensures that an input field must be filled out before the form can be submitted.

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" required />
</form>

2. Pattern Attribute (pattern) The pattern attribute specifies a regular expression that the input value must match.

<label for="zipcode">Zip Code:</label>
<input type="text" id="zipcode" name="zipcode" pattern="[0-9]{5}" required />

This example ensures that the zip code input must be exactly five digits.

3. Other Validation Attributes

• min and max for numeric inputs
• maxlength and minlength for text inputs
• step for numeric inputs to specify valid intervals

Example:

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="0" max="100" step="1" required />