HTML Forms & input

Learn how to create interactive forms for user input

Introduction to HTML Forms

Forms are essential in HTML for collecting user input — login forms, sign-up, feedback, search, and more.

HTML forms are used to collect user input. The <form> element wraps input fields and controls.

Common Form Elements:

<input> - Text fields, checkboxes, radio buttons, etc.
<textarea> - Multi-line text input
<select> - Drop-down list
<button> - Buttons

Text input

                            
     <form action="/submit" method="post">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name" />

Output

This will render as:

Email input

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

Output

This will render as:

Email:

URL input

                            
      <label for="website">Website:</label>
  <input type="url" id="website" name="website" />

Output

This will render as:

Website:

Password input

                            
      <label for="password">Password:</label>
  <input type="password" id="password"

Output

This will render as:

Password:

Number input

                            
      <label for="age">Age:</label>
  <input type="number" id="age" name="age" min="0" max="120" />

Output

This will render as:

Age:

Checkbox input

                            
      <label for="subscribe">Subscribe to newsletter:</label>
  <input type="checkbox" id="subscribe" name="subscribe" />

Output

This will render as:

Subscribe to newsletter:

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>

Output

This will render as:

Gender:

Male Female

Drop-down list

                            
      <table border="1">
  <thead>
    <tr>
      <th>Product</th>
      <th>Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Pen</td>
      <td>$1</td>
    </tr>
  <label for="course">Choose a course:</label>
<select id="course" name="course">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

Output

This will render as:

Choose a course:

Product	Price
Pen	$1

Date Picker

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

Output

This will render as:

Date of Birth:

Text Area(Multi-line-text

                            
      <label for="message">Message:</label>
  <textarea id="message" name="message"

Output

This will render as:

Message:

Form Submission

Forms can be submitted using the submit button. The action attribute specifies where to send the form data.

                            
  <form action="submit.php" method="post">
  <label for="fname">First Name:</label>
  <input type="text" id="fname" name="fname" required><br>

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

  <label for="course">Course:</label>
  <select id="course" name="course">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
  </select><br>

  <label for="message">Message:</label><br>
  <textarea id="message" name="message"></textarea><br>

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

Output

This will render as: