Lesson 19 of 21 – HTML Form
90%

HTML Form

An HTML form is used to collect user input. The data entered by users can be sent to a server for processing.

Note: HTML forms are widely used for login, registration, contact and search pages.
What is HTML Form?

An HTML form is a section of a webpage that allows users to enter information.

Forms are commonly used for:

  • Registration
  • Login
  • Search
  • Feedback
  • Online Orders
  • Contact Forms
HTML <form> Element

The <form> element creates an HTML form.


<form>

...

</form>

The form tag acts as a container for form controls.

HTML <input> Element

The input element is the most commonly used form element.


<input type="text">

Different input types can be used for different purposes.

Common Input Types
Type Purpose
text Text Input
password Password
radio Single Choice
checkbox Multiple Choices
submit Submit Form
button Button
file Upload File
Form Attributes
  • action - URL for form submission.
  • method - GET or POST.
  • GET - Data visible in URL.
  • POST - Data sent securely.

<form
action="save.php"
method="post">

...

</form>

```php
HTML Form Controls

HTML provides many form controls for collecting user data.

  • <label> - Label for input.
  • <textarea> - Multi-line text.
  • <select> - Drop-down list.
  • <option> - Drop-down option.
  • <button> - Clickable button.
HTML Textarea

Textarea is used for entering large amounts of text.


<textarea
rows="4"
cols="30">

</textarea>

HTML Select

Select creates a drop-down list.


<select>

<option>India</option>

<option>Nepal</option>

</select>

Fieldset and Legend

Fieldset groups related form elements. Legend provides a caption.


<fieldset>

<legend>

Student Details

</legend>

...

</fieldset>

Form Validation

Validation helps users enter correct information.

  • required
  • placeholder
  • pattern
  • maxlength
  • minlength

<input
type="text"
required
placeholder="Name">

Simple Form Example

<form>

Name:

<input type="text">

<br><br>

Email:

<input type="email">

<br><br>

Password:

<input type="password">

<br><br>

<input
type="submit">

</form>

Key Points
  • Forms collect user data.
  • Form is the container.
  • Input is the most common element.
  • GET sends data in URL.
  • POST sends data securely.
  • Textarea collects large text.
  • Select creates drop-down lists.
  • Fieldset groups controls.
  • Validation improves data quality.
  • Submit sends the form.

🧠 Quiz

Which HTML element is used to create a form?