LCWD LogoLCWD
H

HTML Handbook

Clean • Professional

Basics of Forms

1 minute

Forms in HTML

HTML forms are used to collect user input on web pages. Examples include login forms, signup forms, contact forms, feedback forms, and payment forms.

A form is created using the <form> tag and contains different form elements like text fields, checkboxes, radio buttons, dropdowns, and submit buttons.

  • It uses two main attributes:

    • action → URL where form data is sent.

    • method → Defines how data is sent (GET or POST).

Basic Structure of a Form 

<form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="username" placeholder="Enter your name" required>

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

Output :

learn code with durgesh images

Common Form Elements 

<label> – Label for Input

  • Improves accessibility (especially for screen readers).

Example:

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

Text Input (<input type="text">)

  • Collects single-line text from the user.

  • Can include attributes like placeholder, name, value.

Example:

<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name">

Email Input (<input type="email">)

  • Collects email addresses.

  • Browser can validate the format automatically.

Example:

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

Password Input (<input type="password">)

  • Hides the input characters for confidential data.

Example:

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

Number Input (<input type="number">)

  • Allows numeric input only.

  • Can set min, max, and step values.

Example:

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

Radio Button (<input type="radio">)

  • Allows selection of one option from a group.

  • Must share the same name for grouping.

Example:

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

Checkbox (<input type="checkbox">)

  • Allows selection of multiple options independently.

Example:

Hobbies:
<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports

File Upload (<input type="file">)

  • Allows user to upload files from their device.

Example:

<label for="resume">Upload Resume:</label>
<input type="file" id="resume" name="resume">

Date Picker (<input type="date">)

  • Allows user to pick a date from a calendar popup.

Example:

<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">

Functional HTML form example demonstrating various <input> types:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Input Types Example</title>
</head>
<body>

<h2>HTML Input Types Example</h2>

<form action="submit.php" method="post">

  <!-- Text Input -->
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" placeholder="Enter your name" required><br><br>

  <!-- Email Input -->
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" placeholder="Enter your email" required><br><br>

  <!-- Password Input -->
  <label for="password">Password:</label>
  <input type="password" id="password" name="password" placeholder="Enter password" required><br><br>

  <!-- Number Input -->
  <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="1" max="100"><br><br>

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

  <!-- Checkbox -->
  Hobbies:
  <input type="checkbox" id="reading" name="hobby" value="reading">
  <label for="reading">Reading</label>
  <input type="checkbox" id="sports" name="hobby" value="sports">
  <label for="sports">Sports</label><br><br>

  <!-- File Upload -->
  <label for="resume">Upload Resume:</label>
  <input type="file" id="resume" name="resume"><br><br>

  <!-- Date Picker -->
  <label for="dob">Date of Birth:</label>
  <input type="date" id="dob" name="dob"><br><br>

  <!-- Submit Button -->
  <input type="submit" value="Submit">

</form>

</body>
</html>

Output :

learn code with durgesh images

Commonly Used Input Types:

Input TypeDescriptionExample
textSingle-line text<input type="text">
passwordHidden characters (●●●)<input type="password">
emailValidates email format<input type="email">
numberAccepts numbers only<input type="number" min="1" max="100">
radioSingle selection from options<input type="radio" name="gender">
checkboxMultiple selections<input type="checkbox" name="hobby">
dateDate picker<input type="date">
timeTime picker<input type="time">
fileUpload file<input type="file">
submitSubmits form<input type="submit">
resetClears all inputs<input type="reset">
hiddenStores hidden data<input type="hidden" value="userID123">
searchSearch field<input type="search">
telPhone number input<input type="tel" pattern="[0-9]{10}">
urlValidates URL<input type="url">
colorColor picker<input type="color">
rangeSlider control<input type="range" min="0" max="100">

Article 0 of 0