Introduction

Forms are a fundamental part of web development, allowing users to interact with websites and provide information. HTML provides a set of elements specifically designed for creating forms, making it easy to collect data from users.

Input & types

The <input> element is the most versatile form element, allowing users to enter different types of data.

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

Here are some common input types:

• text: For single-line text input
• password: For password input (masked characters)
• email: For email address input
• number: For numerical input
• checkbox: For selecting multiple options
• radio: For selecting one option from a set
• file: For uploading files

label

The <label> element associates a text label with a form control. This improves accessibility, making it easier for users to understand the purpose of each field. It also allows users to click on the label to focus on the associated input element.

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

Textarea

The <textarea> element is used for multi-line text input, allowing users to enter larger amounts of text.

<textarea name="message" placeholder="Enter your message here"></textarea>

Select

The <select> element allows users to choose a single option from a dropdown list.

<select name="country">
  <option value="us">United States</option>
  <option value="ca">Canada</option>
  <option value="uk">United Kingdom</option>
</select>

Button

The <button> element is used to submit a form or trigger an action.

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

Fieldset – legend

The <fieldset> element groups related form controls, providing visual separation and structure. The <legend> element provides a caption for the fieldset.

<fieldset>
  <legend>Personal Information</legend>
  <label for="name">Name:</label>
  <input type="text" id="name" name="name">
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">
</fieldset>

Summary

• Forms are essential for user interaction on websites.
• HTML provides elements for creating forms, including <input>, <label>, <textarea>, <select>, and <button>.
• Use the <fieldset> and <legend> elements to group and label related form controls.
• Ensure accessibility by associating labels with form elements and using ARIA attributes.