⬅ Previous Next ➡

14. Forms in HTML

Forms in HTML
  • HTML Forms: Forms are used to collect user input and send it to a server for processing (e.g., logging in, registering, or search queries).
  • The Form Container (<form>):
    • action: Specifies the URL where the form data should be sent.
    • method: Defines the HTTP method used (usually GET for searching or POST for sensitive data like passwords).
  • Common Form Elements:
    • <label>: Defines a caption for an input. Clicking the label focuses the corresponding input.
    • <input>: The most versatile element. Its behavior changes based on the type attribute.
    • <textarea>: Used for multi-line text input (e.g., comments or messages).
    • <select>: Creates a drop-down list using <option> tags inside it.
  • Important Input Types:
    • type="text": Single-line text field.
    • type="password": Masks the characters for security.
    • type="email": Validates that the input is a proper email address.
    • type="radio": Allows selecting only one option from a group.
    • type="checkbox": Allows selecting multiple options.
    • type="submit": A button that sends the form data to the server.

<!DOCTYPE html>
<html>
<head>
  <title>HTML Forms Examples</title>
</head>

<body>

<h2>HTML Forms (&lt;form&gt; Tag)</h2>

<!-- Example 1: Registration Form (POST) -->
<h3>User Registration</h3>
<form action="/submit_form.php" method="POST">

  <!-- Text Input -->
  <label for="username">Username:</label><br>
  <input type="text" id="username" name="username" required>
  <br><br>

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

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

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

  <!-- Radio Buttons -->
  <p>Gender:</p>
  <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>

  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
  <br><br>

  <!-- Checkboxes -->
  <p>Interests:</p>
  <input type="checkbox" id="coding" name="interest[]" value="coding">
  <label for="coding">Coding</label>

  <input type="checkbox" id="music" name="interest[]" value="music">
  <label for="music">Music</label>

  <input type="checkbox" id="sports" name="interest[]" value="sports">
  <label for="sports">Sports</label>
  <br><br>

  <!-- Drop-down Menu -->
  <label for="city">Choose a City:</label><br>
  <select id="city" name="city">
    <option value="pune">Pune</option>
    <option value="mumbai">Mumbai</option>
    <option value="delhi">Delhi</option>
  </select>
  <br><br>

  <!-- Textarea -->
  <label for="address">Address:</label><br>
  <textarea id="address" name="address" rows="4" cols="30" placeholder="Enter your address..."></textarea>
  <br><br>

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

  <!-- File Upload -->
  <label for="photo">Upload Photo:</label><br>
  <input type="file" id="photo" name="photo" accept="image/*">
  <br><br>

  <!-- Hidden Input -->
  <input type="hidden" name="source" value="registration_page">

  <!-- Submit and Reset Buttons -->
  <input type="submit" value="Register Now">
  <input type="reset" value="Clear Form">

</form>

<!-- Example 2: Simple Search Bar (GET) -->
<h3>Website Search</h3>
<form action="/search" method="GET">
  <input type="text" name="q" placeholder="Search topics...">
  <button type="submit">Search</button>
</form>

<!-- Example 3: Login Form (POST) -->
<h3>Member Login</h3>
<form action="/login" method="POST">
  <input type="email" name="user_email" placeholder="Email Address" required>
  <br><br>
  <input type="password" name="user_password" placeholder="Password" required>
  <br><br>
  <input type="submit" value="Login">
</form>

<!-- Example 4: Feedback Form (Textarea + Range) -->
<h3>Product Feedback</h3>
<form action="/feedback" method="POST">

  <label>Rate our service (1 to 10):</label><br>
  <input type="range" name="rating" min="1" max="10">
  <br><br>

  <label>Your Comments:</label><br>
  <textarea name="comments" rows="4" cols="30" placeholder="Tell us more..."></textarea>
  <br><br>

  <button type="reset">Clear Form</button>
  <button type="submit">Send Feedback</button>

</form>

<!-- Example 5: Job Application (File Upload + Date) -->
<h3>Job Application</h3>
<form action="/apply" method="POST" enctype="multipart/form-data">

  <label>Available Start Date:</label>
  <input type="date" name="start_date">
  <br><br>

  <label>Upload Resume (PDF):</label>
  <input type="file" name="resume" accept=".pdf">
  <br><br>

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

</form>

<!-- Example 6: Newsletter Signup (Color + Hidden) -->
<h3>Subscribe to Newsletter</h3>
<form action="/subscribe" method="POST">

  <!-- Hidden input -->
  <input type="hidden" name="source" value="homepage">

  <label>Pick your favorite theme color:</label>
  <input type="color" name="theme_pref" value="#ff0000">
  <br><br>

  <input type="email" name="sub_email" placeholder="Enter email">
  <input type="submit" value="Join Now">

</form>

</body>
</html>
⬅ Previous Next ➡