Answer: HTML Code and Elements for Adding a Form to a Web Page

1. Introduction to HTML Forms

An HTML Form is a section of a document containing interactive controls used to collect user data (such as login credentials, registration details, feedback, or payment inputs) and send that data to a server for processing.

---

2. The <form> Element and Core Attributes

<form action="/submit-handler.php" method="POST" enctype="multipart/form-data">
  <!-- Form Controls Go Here -->
</form>

Essential Form Attributes:

• action: Specifies the destination URL (server script, e.g., PHP, Servlet, API endpoint) where the form data is sent upon submission.
• method: The HTTP transfer method used to send data:
  • GET: Appends form data to the URL query string (e.g., /search?q=java). Used for idempotent searches (not for passwords/sensitive data).
  • POST: Sends form data in the HTTP request body. Used for secure, large, or state-modifying operations (login, registration, payments).
• enctype: Defines the MIME encoding type of the data:
  • application/x-www-form-urlencoded (default for text).
  • multipart/form-data (mandatory for file uploads).

---

3. Major Form Controls and Input Elements

Form Element	Description	Code Example
Text Input	Single-line alphanumeric text box	<input type="text" name="fullname" required>
Password	Masks characters with dots/asterisks	<input type="password" name="pwd">
Email	Validates email syntax	<input type="email" name="useremail">
Radio Button	Selects a single option from a group	<input type="radio" name="gender" value="male"> Male
Checkbox	Selects multiple independent options	<input type="checkbox" name="skills" value="Java"> Java
Dropdown List	Selectable dropdown menu	<select name="country"><option value="IN">India</option></select>
Textarea	Multi-line text entry box	<textarea name="comments" rows="4"></textarea>
File Upload	Selects local files for upload	<input type="file" name="resume">
Submit Button	Submits the form data	<input type="submit" value="Submit Form">
Reset Button	Resets form inputs to defaults	<input type="reset" value="Clear">

---

4. Comprehensive Working HTML Form Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Student Registration Form</title>
  <style>
    .form-container { width: 420px; padding: 20px; border: 1px solid #ccc; font-family: Arial, sans-serif; }
    .form-group { margin-bottom: 15px; }
    label { display: block; font-weight: bold; margin-bottom: 5px; }
    input[type="text"], input[type="email"], input[type="password"], select, textarea {
      width: 100%; padding: 8px; box-sizing: border-box;
    }
  </style>
</head>
<body>

<div class="form-container">
  <h2>Student Registration</h2>
  
  <form action="/register" method="POST" enctype="multipart/form-data">
    
    <!-- Text Input with Label -->
    <div class="form-group">
      <label for="name">Full Name:</label>
      <input type="text" id="name" name="student_name" placeholder="Enter full name" required>
    </div>

    <!-- Email Input -->
    <div class="form-group">
      <label for="email">Email Address:</label>
      <input type="email" id="email" name="student_email" placeholder="name@example.com" required>
    </div>

    <!-- Password Input -->
    <div class="form-group">
      <label for="password">Password:</label>
      <input type="password" id="password" name="student_password" required>
    </div>

    <!-- Radio Buttons -->
    <div class="form-group">
      <label>Gender:</label>
      <input type="radio" id="male" name="gender" value="male">
      <label for="male" style="display:inline;">Male</label>
      <input type="radio" id="female" name="gender" value="female">
      <label for="female" style="display:inline;">Female</label>
    </div>

    <!-- Select Dropdown -->
    <div class="form-group">
      <label for="course">Branch / Course:</label>
      <select id="course" name="branch">
        <option value="CSE">Computer Science & Engineering</option>
        <option value="ECE">Electronics & Communication</option>
        <option value="EE">Electrical Engineering</option>
        <option value="ME">Mechanical Engineering</option>
      </select>
    </div>

    <!-- Textarea -->
    <div class="form-group">
      <label for="address">Address:</label>
      <textarea id="address" name="student_address" rows="3"></textarea>
    </div>

    <!-- Submit & Reset Buttons -->
    <div class="form-group">
      <input type="submit" value="Register Now">
      <input type="reset" value="Reset Form">
    </div>

  </form>
</div>

</body>
</html>