HTML Forms Tutorial

HTML forms are used to collect user input. They are essential for interactive websites, allowing users to submit data, make selections, and interact with web applications.

Forms contain various input elements like text fields, checkboxes, radio buttons, and dropdown menus. When a user submits a form, the data is sent to a server for processing.

Image: Form Structure Diagram

The <form> element is a container for all form elements. It defines how the form data will be submitted.

<form action="/submit-form" method="POST">
  <!-- Form elements go here -->
</form>
                

Form Attributes:

• action: Specifies where to send the form data when submitted
• method: Defines the HTTP method to use (GET or POST)
• target: Specifies where to display the response
• autocomplete: Enables or disables autocomplete

The <input> element is the most important form element. It can be displayed in many ways, depending on the type attribute.

<input type="text" name="username" placeholder="Enter your username">
                

Common Input Attributes:

• type: Specifies the input type (text, password, checkbox, etc.)
• name: Specifies the name of the input (important for form submission)
• value: Specifies the default value
• placeholder: Provides a hint about the expected value
• required: Specifies that the input must be filled out

Image: Input Types Comparison

Text Input

Single-line text input field:

<input type="text" placeholder="Enter text here">

Password Input

Password field (characters are masked):

<input type="password" placeholder="Enter password">

Email Input

Email address field with validation:

<input type="email" placeholder="Enter email address">

Number Input

Numeric input field:

<input type="number" placeholder="Enter a number">

Radio Buttons

Allow selection of one option from multiple choices:

<input type="radio" name="gender" value="male"> Male
<input type="radio" name="gender" value="female"> Female
<input type="radio" name="gender" value="other"> Other
                

Checkboxes

Allow selection of multiple options:

<input type="checkbox" name="hobby" value="reading"> Reading
<input type="checkbox" name="hobby" value="sports"> Sports
<input type="checkbox" name="hobby" value="music"> Music
                

Image: Radio vs Checkbox Comparison

Date Input

Date picker control:

<input type="date">

Color Input

Color picker control:

<input type="color">

Range Input

Slider control for selecting a value from a range:

<input type="range" min="0" max="100">

File Input

File upload control:

<input type="file">

The <textarea> element defines a multi-line text input control:

<textarea rows="4" cols="50" placeholder="Enter your message here"></textarea>
                

Textarea Attributes:

• rows: Specifies the visible number of lines
• cols: Specifies the visible width
• placeholder: Provides a hint about the expected value

Image: Textarea Example

The <select> element defines a drop-down list:

<select>
  <option value="">Select an option</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>
                

Multiple Selection

Allow multiple selections with the multiple attribute:

<select multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
                

Submit Button

Submits the form data:

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

Reset Button

Resets all form values to their defaults:

<input type="reset" value="Reset Form">

Button Element

A clickable button that can have custom functionality:

<button type="button">Click Me</button>

Image: Button Types Comparison

Here's a complete registration form example using various form elements:

Image: Complete Form Visualization