HTML Forms

HTML forms are used to collect data from visitors, like a login form, a contact form or a registration form. The data is then sent to a server, where a language like PHP or Node.js reads it and saves it in a database or sends an email.

---

The form element

The <form> tag wraps all the form fields. Two attributes are very important.

Attribute	Meaning	Example
action	The page or URL that receives the form data	action="save.php"
method	How to send the data: get or post	method="post"
target	Where to show the response	target="_blank"
enctype	Encoding of the data. Use multipart/form-data for file upload	enctype="multipart/form-data"

GET and POST

• GET adds the data to the page address (URL). Use it for searches. Never use it for passwords, because the data is visible in the URL.
• POST sends the data in the body of the request, so it is not shown in the URL. Use it for login, registration and any private data.

---

A complete form example

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

  <label for="name">Name:</label>
  <input type="text" id="name" name="name">

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

  <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>

  <p>Hobbies:</p>
  <input type="checkbox" id="reading" name="hobby" value="reading">
  <label for="reading">Reading</label>
  <input type="checkbox" id="music" name="hobby" value="music">
  <label for="music">Music</label>

  <label for="city">City:</label>
  <select id="city" name="city">
    <option value="delhi">Delhi</option>
    <option value="mumbai">Mumbai</option>
  </select>

  <label for="msg">Message:</label>
  <textarea id="msg" name="msg" rows="4" cols="30"></textarea>

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

---

Form elements explained

input

The most used element. Its look and work depend on the type attribute. See HTML Input Types for all types.

label

A label gives a name to a field. When you connect it with for and the field’s id, clicking the label selects the field. This is also very good for screen readers.

select and option

Creates a drop-down list. Each choice is an <option>. The value is what is sent to the server.

textarea

A box for long text. rows and cols set the size.

button

<button type="submit"> sends the form. Other types are reset (clears the form) and button (does nothing by itself, used with JavaScript).

fieldset and legend

Group related fields in a box with a title.

<fieldset>
  <legend>Login details</legend>
  <input type="text" name="user" placeholder="Username">
</fieldset>

---

Summary

• Use <form action method> and fields inside it.
• Use POST for private data, GET for searches.
• Always connect label with the field, and give each field a name.
• Next: HTML Input Types.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.