« Previous Next »

HTML Forms

An HTML form is used to collect user input. The user input is most often sent to a server for processing.

Output:

Text Fields

The <input type="text"> defines a single-line input field for text input.

Output:

Radio Buttons

The <input type="radio"> defines a radio button.

Radio buttons let a user select ONE of a limited number of choices.

Output:

Checkboxes

The <input type="checkbox"> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

Output:

The Submit Button:

Output:

Practice Exercises

Task 1: How to create a simple HTML form using text input fields and form action attribute?

Goal: Build a basic user registration form with first name, last name, and pre-filled default values using the value attribute.
💡 Hint: Use <form action="...">, <label for="...">, and <input type="text">.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Basic Text Form</title>
  </head>
  <body>

    <h2>User Registration</h2>
    
    <form action="/register_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="Arib"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Shaikh">
    </form>

  </body>
</html>
Output :

User Registration




Explanation: The <input type="text"> element defines a single-line input field. Connecting labels via for attribute to an input's id improves accessibility.
Task 2: How to implement radio buttons to allow a user to choose exactly ONE option?

Goal: Create a preference group where users can select their favorite web development language.
💡 Hint: Group radio inputs together by giving them identical name attributes.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Radio Buttons Example</title>
  </head>
  <body>

    <h3>Choose your favorite Web language:</h3>

    <form>
      <input type="radio" id="html" name="fav_language" value="HTML">
      <label for="html">HTML</label><br>
      
      <input type="radio" id="css" name="fav_language" value="CSS">
      <label for="css">CSS</label><br>
      
      <input type="radio" id="javascript" name="fav_language" value="JavaScript">
      <label for="javascript">JavaScript</label>
    </form>

  </body>
</html>
Output :

Choose your favorite Web language:



Explanation: Radio buttons let users select only ONE option from a group. For radio buttons to be mutually exclusive, they must share the exact same name attribute.
Task 3: How to use checkboxes to allow users to select multiple options?

Goal: Create a checklist where users can select zero, one, or multiple vehicles they own.
💡 Hint: Use <input type="checkbox"> with unique id and name values for each option.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Checkboxes Example</title>
  </head>
  <body>

    <h3>Select your Vehicles:</h3>

    <form action="/action_page.php">
      <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
      <label for="vehicle1"> I have a bike</label><br>
      
      <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
      <label for="vehicle2"> I have a car</label><br>
      
      <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
      <label for="vehicle3"> I have a boat</label>
    </form>

  </body>
</html>
Output :

Select your Vehicles:



Explanation: Checkboxes let users select ZERO or MORE options independently of each other.
Task 4: How to combine text fields and a Submit Button to send form data to a backend handler?

Goal: Create a complete form containing user inputs and a submit button that submits data to /action_page.php.
💡 Hint: Use <input type="submit" value="Submit"> to define the submission button.
💡 Show Solution 
<!DOCTYPE html>
<html>
  <head>
    <title>Form Submission Example</title>
  </head>
  <body>

    <h2>HTML Forms</h2>

    <form action="/action_page.php">
      <label for="fname">First name:</label><br>
      <input type="text" id="fname" name="fname" value="Arib"><br>
      <label for="lname">Last name:</label><br>
      <input type="text" id="lname" name="lname" value="Shaikh"><br><br>
      <input type="submit" value="Submit">
    </form>

    <p>If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".</p>

  </body>
</html>
Output :

HTML Forms





If you click the "Submit" button, the form-data will be sent to a page called "/action_page.php".

Explanation: The <input type="submit"> button triggers form submission, sending all input values identified by their name attributes to the endpoint specified in the form's action attribute.
« Previous Next »