Form in HTML

Last Updated: 01 Nov 2025

An HTML form is used to collect input from users — like names, emails, passwords, feedback, etc. It’s a container where users enter data that can later be sent to a server for processing.

🧱 Basic Syntax:

<form action="submit.php" method="post">
  <!-- form elements here -->
</form>

action → URL to send the form data to
method → HTTP method to use for form submission

Form Elements

<label> → Label for form elements
<input> → Input field
<select> → Dropdown menu
<textarea> → Text area
<button> → Submit button

Basic Input Elements

HTML provides many input types to collect data.

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

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

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

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

🗣 Hinglish Tip: label tag accessibility ke liye helpful hota hai — user jab label pe click karta hai, field activate hoti hai.

`<input>` Attributes

type → Type of input field
id → Unique identifier
name → Name of the input field
value → Default value
placeholder → Placeholder text
required → Field is required
disabled → Field is disabled
readonly → Field is read-Only
min → Minimum value use for range slider and number
max → Maximum value use for range slider and number
minlength → Minimum length use for text area
maxlength → Maximum length use for text area
step → Increment value use for range slider
checked → Field is checked use for checkbox
selected → Field is selected use for radio or dropdown
autofocus → Field gets focus on page load
autocorrect → Enable auto correction
autocapitalize → Enable auto capitalization
autocomplete → Enable auto complete
accept → Allowed file types (e.g. image/*, pdf/*)

Common Input types

text → Single-line text
email → Validates email format
password → Hides entered text like ******
number → Only numbers allowed and e
date → Date picker
datetime-local → Date and time picker
radio → Single selection
checkbox → Multiple Selection
range → Slider
color → Color picker
file → Upload files
submit → Submit button
reset → Reset button
button → Custom button

Dropdown List — `<select>&<option>`

Use the <select> tag to create a dropdown list. Use the <option> tag to add options to the dropdown list.

<form>
  <label for="city">Choose City:</label>
  <select id="city" name="city">
    <option value="delhi">Kashi</option>
    <option value="mumbai">Mumbai</option>
    <option value="kolkata">Kolkata</option>
    <option value="chennai">Chennai</option>
  </select>
</form>

🗣 Hinglish Tip: dropdown ke liye option tag accessibility ke liye helpful hota hai — user jab dropdown pe click karta hai, option activate hoti hai.

Text Area — `<textarea>`

Use the <textarea> tag to create a text area for multi-line input.

<form>
  <label for="feedback">Your Feedback:</label><br />
  <textarea id="feedback" name="userfeedback" rows="4" cols="30"></textarea>
</form>

Button — `<button>`

Use the <button> tag to create a custom button. and more useful for accessibility.

<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Custom Button</button>

Form Example

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

  <body>
    <h1>📝 Complete HTML Form Example</h1>
    <p>This form covers all major input <b>types</b> and <b>attributes</b>.</p>

    <form action="/submit" method="post" autocomplete="on">
      <!-- Text Input -->
      <label for="fullname">Full Name:</label>
      <input
        type="text"
        id="fullname"
        name="fullname"
        placeholder="Enter your full name"
        value="John Doe"
        required
        autofocus
        minlength="3"
        maxlength="30"
        autocorrect="on"
        autocapitalize="words"
      />
      <br /><br />

      <!-- Email Input -->
      <label for="email">Email:</label>
      <input
        type="email"
        id="email"
        name="email"
        placeholder="example@email.com"
        autocomplete="on"
        required
      />
      <br /><br />

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

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

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

      <!-- Date & Time Input -->
      <label for="appointment">Appointment Time:</label>
      <input type="datetime-local" id="appointment" name="appointment" />
      <br /><br />

      <!-- Range Slider -->
      <label for="volume">Volume Level:</label>
      <input
        type="range"
        id="volume"
        name="volume"
        min="0"
        max="100"
        step="10"
        value="50"
      />
      <br /><br />

      <!-- Color Picker -->
      <label for="favcolor">Favorite Color:</label>
      <input type="color" id="favcolor" name="favcolor" value="#00ffcc" />
      <br /><br />

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

      <!-- Checkbox -->
      <label>Hobbies:</label><br />
      <input
        type="checkbox"
        id="reading"
        name="hobby"
        value="reading"
        checked
      />
      <label for="reading">Reading</label>
      <input type="checkbox" id="travel" name="hobby" value="travel" />
      <label for="travel">Travel</label>
      <input type="checkbox" id="music" name="hobby" value="music" />
      <label for="music">Music</label><br /><br />

      <!-- Dropdown -->
      <label for="country">Country:</label>
      <select id="country" name="country" required>
        <option value="">--Select Country--</option>
        <option value="india" selected>India</option>
        <option value="usa">USA</option>
        <option value="uk">UK</option>
        <option value="canada">Canada</option>
      </select>
      <br /><br />

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

      <!-- Textarea -->
      <label for="feedback">Feedback / Comments:</label><br />
      <textarea
        id="feedback"
        name="feedback"
        rows="4"
        cols="40"
        placeholder="Write your feedback here..."
        minlength="10"
        maxlength="200"
      ></textarea>
      <br /><br />

      <!-- Disabled Field -->
      <label for="refcode">Referral Code (Disabled):</label>
      <input type="text" id="refcode" name="refcode" value="REF123" disabled />
      <br /><br />

      <!-- Readonly Field -->
      <label for="userid">User ID (Readonly):</label>
      <input type="text" id="userid" name="userid" value="USR001" readonly />
      <br /><br />

      <!-- Buttons -->
      <input type="submit" value="Submit Form" />
      <input type="reset" value="Reset Form" />
      <button type="button">Custom Button</button>
    </form>
  </body>
</html>

🧠 Quick Practice

Exercise

← Previous Next →