PyQdeck LogoPyQdeckSubjects
Back to the 2019 paper

Module I: Introduction to Web Technologies & Architectures

20197m

Describe the HTML code required for adding a form to a Web page.

Search GoogleAsk AI
Worked SolutionAI Assisted

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>

Similar questions

Web TechnologyExplain how a web browser interacts with a web server using the HTTP request-response model.20257mWeb TechnologyDescribe the architecture of a web browser and explain its major components.20257mWeb TechnologyWrite short notes on any two of the following: (a) AWT (b) Exception Handling (c) DHTML and HTML (d) API201914mWeb TechnologyMarkup tags tell the Web browser (i) how to organize the page (ii) how to display the page (iii) how to display message box on page (iv) None of the above20202m
PreviousWhat, if there is no text between the tags or if a text was omitted by mistake, will it affect the display of the HTML file? Explain with the help of example.NextWhat are events? Explain the events used in JavaScript with the help of examples.