We create a form to collect data and get the user data .Most websites maintain a database for user accounts, for which they have forms created, including feedback forms. Today, we will explore how to create forms in HTML.

---

HTML Form Attributes

The <form> element in HTML is used to collect user input. A form begins with the <form> tag and contains various input elements such as text fields, checkboxes, radio buttons, submit buttons, etc. To make the form interactive and functional, we can use a variety of attributes. Let’s explore some commonly used form attributes and their functionalities.

The <form> Tag

The <form> tag requires attributes to define the action and method for data submission. For example:

<form action="/submit-data" method="post">
</form>

Common <form> Attributes:

• action: Specifies the URL where the form data should be submitted.

• method: Defines how form data is sent (e.g., GET or POST).

---

Forms Overview

Forms are created to collect data from users. Most websites maintain a database for user accounts, feedback forms, and more. Below, we explore how to create forms in HTML.

The <form> Tag

The <form> tag marks the beginning of the form. It has two main attributes: action and method.

<form action="/submit-data" method="post">
</form>

Action: Every form includes a submit button. The action specifies the URL where the data entered by the user in the form will be sent. If left as action="#", the same website is reloaded after submission.

• Method: Two methods are commonly used:

  • GET: By default, if the method is not mentioned, it is treated as GET. When submitted, the data gets added to the URL.For example if I click submit after entering “Raghav” for name field and “18” for age , the URL will be changed to..

      http://example.com/form?name=Raghav&age=18
    

  • POST: Sends form data as part of the HTTP request body, keeping it hidden from the URL. This method is preferred for sensitive tasks.

Key Differences Between GET and POST:

---

Common Input Attributes

Input elements within a form can include attributes to enhance usability and enforce validation rules. Below are some commonly used attributes:

a. name

The name attribute identifies input fields, making them accessible when submitting form data to the server.

<input type="text" name="username">

b. required

Ensures that a user must fill out a field before submitting the form.

<input type="email" name="user_email" required>

c. type

Defines the type of input field. Common types include:

• text: Single-line text input

• password: Masked input

• email: Email validation

• date: Date selection

• color: Color picker

Example:

<input type="password" name="user_password">
<input type="date" name="user_dob">
<input type="color" name="favorite_color">

d. minlength and maxlength

Defines the minimum and maximum number of characters allowed in an input field.

<input type="text" name="username" minlength="5" maxlength="15" required>

e. value

Sets a default value for an input field.

<input type="text" name="default_text" value="Hello, World!">

f. placeholder

Provides a hint or placeholder text in the input field.

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

---

Specialized Input Types

a. Date Input

Allows users to select a date from a calendar interface.

<input type="date" name="appointment_date">

b. Color Input

Displays a color picker.

<input type="color" name="favorite_color">

c. Password Input

Hides the input text for sensitive data like passwords.

<input type="password" name="user_password">

d. Email Input

Ensures a valid email format.

<input type="email" name="user_email">

---

Example Form

<form action="/submit-data" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" minlength="5" maxlength="15" required placeholder="Enter your username"><br><br>

  <label for="password">Password:</label>
  <input type="password" id="password" name="user_password" minlength="8" required><br><br>

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

  <label for="color">Favorite Color:</label>
  <input type="color" id="color" name="favorite_color"><br><br>

  <button type="submit">Submit</button>
</form>

---

Thankyouu!!