HTML Course

HTML Forms

HTML forms are used to collect information from users.

After a user enters data, the information is usually sent to a server for processing.

Forms are commonly used for contact pages, login systems, registration forms, and surveys.

The <form> Tag

The <form> element is used to create a form in HTML.

<Form>
<!-- form elements go here -->
</Form>

The <Form> tag acts as a container for input elements such as:

  • Text fields
  • Radio buttons
  • Submit buttons
  • Other input controls

The <input> Tag

The <input> element is the most frequently used form element.

It can display different types of input fields depending on the type attribute.

Common Input Types
Input Type Function
text Creates a single-line text field
radio Lets the user select one option
submit Sends form data to the server
button Creates a clickable button

Text Input Fields

A text input field allows users to enter a single line of text.

Example

<form>
<label for="fname"> First Name: </label> <br/>
<input type="text" id="fname" name="fname"> <br/>

<label for="lname"> Last Name: </label> <br/>
<input type="text" id="lname" name="lname"> <br/>
</form>

Important points:

  • The form itself is not visible on the page.
  • The default width of a text input field is approximately 20 characters.

The <label> Tag

The <label> element provides a description for an input field.

It is important because:

  • Screen readers read the label when the input is selected.

  • Clicking the label automatically selects the related input.

  • It improves accessibility and usability.

The for attribute of the <label> must match the id of the corresponding <input> element.

Example

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

Radio Buttons

Radio buttons allow users to choose one option from multiple choices.

Example

<form>
<p> Select your favorite web language: </p>

<input type="radio" id="html" name="language" value="HTML"> <br/>
<label for="html"> HTML </label> <br/>

<input type="radio" id="css" name="language" value="CSS"> <br/>
<label for="css"> CSS </label> <br/>

<input type="radio" id="js" name="language" value="js"> <br/>
<label for="js"> Javascript </label> <br/>
</form>

Note: All radio buttons in the same group must share the same name attribute.

Checkboxes

Checkboxes allow users to select multiple options.

Example

<form>
<input type="Checkboxes" id="bike" name="vehicle1" value="Bike"> <br/>
<label for="bike"> I have a bike </label> <br/>

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

<input type="Checkboxes" id="boat" name="vehicle3" value="boat"> <br/>
<label for="boat"> I have a boat </label> <br/>
</form>

Users can select none, one, or multiple options.

Submit Button

The submit button sends form data to a server for processing.

The destination file is defined using the action attribute inside the <form> tag.

Example

<form action="/process.php">
<input type="text" id="fname" name="fname" value="john"> <br/>
<label for="fname"> irst Name: </label> <br/>

<input type="text" id="lname" name="lname" value="kic"> <br/>
<label for="lname"> Last Name: </label> <br/>

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

When the user clicks Submit, the form data is sent to process.php.

The name Attribute (Required)

Every input field must have a name attribute.

If the name attribute is missing, the input value will not be included when the form is submitted.

Incorrect Example (Data will not be sent):
<input type="text" id="fname" value="John">

Correct Example:
<input type="text" id="fname" name="fname" value="John">

Summary

  • <form> creates a form container.

  • <input> collects user data.

  • The type attribute defines the kind of input.

  • <label> improves accessibility and usability.

  • Radio buttons allow one selection.

  • Checkboxes allow multiple selections.

  • The submit button sends data to the server.

  • The name attribute is necessary for form submission.

Try It Your Self

Sign Up For New
Update

HTML Basic
  1. HTML Basic
  2. HTML Element
  3. HTML Attributes
  4. HTML Headings
  5. HTML Paragrapha
  6. HTML Tables
  7. HTML Lists
HTML Advance
  1. HTML Div
  2. HTML Classes
  3. HTML Id
  4. HTML Buttons
  5. HTML Iframes
  6. HTML Symbols
  7. HTML Emojis