HTML Form

HTML forms are used to collect user input. They allow users to input data that can be sent to a server for processing.

Basic Form Structure

A basic HTML form is defined using the <form> element. Inside the form, you can include various types of input fields, such as text fields, checkboxes, radio buttons, and more.

Example:

<form action="/submit_form" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username"><br><br>
  
  <label for="password">Password:</label>
  <input type="password" id="password" name="password"><br><br>
  
  <input type="submit" value="Submit">
</form>

Form Attributes

action

The action attribute specifies the URL where the form data will be submitted.

method

The method attribute specifies the HTTP method used to send the form data to the server. It can be either GET or POST.

Example:

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

Input Fields

Various types of input fields can be used within a form to collect different types of data.

Text Input:

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

Password Input:

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

Radio Buttons:

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

Checkboxes:

<input type="checkbox" id="car" name="vehicle1" value="car">
<label for="car">I have a car</label><br>
<input type="checkbox" id="bike" name="vehicle2" value="bike">
<label for="bike">I have a bike</label><br>

Select Dropdown:

<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Submit Button

The submit button is used to submit the form data to the server.

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

Form Validation

JavaScript can be used for client-side form validation to ensure that the data entered by the user meets certain criteria before submitting the form.

Summary

HTML forms are essential for collecting user input on web pages. They consist of various input fields enclosed within a <form> element, and they can be customized using attributes such as action and method. Understanding how to create and customize forms is important for building interactive web applications.