HTML Form element

Form Element

HTML forms are essential tools for collecting user input on web pages whether it is login details, feedback, or survey responses. Below is a guide to the most commonly used HTML form elements, explained in a simple and visual-friendly manner.

<form> - The Main Container

The <form> element is the main wrapper that holds all form inputs.

Attributes:

action: The URL where form data will be sent.

method: The HTTP method to use (GET or POST).

Syntax:

<form action="/submit_form" method="post">
  <!-- Form elements go here -->
</form>

<input> - User Input Fields

The <input> tag is use for single-line inputs.

Common Types:

text: For text input

password: For hidden password input

checkbox, radio: For multiple choice inputs

submit: For sending form data

Example:

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

<textarea> - Multiline Input

Use <textarea> for longer text entries like messages or comments.

Example:

<textarea name="message" rows="4" cols="30" placeholder="Write your message..."></textarea>

<label> - Labeling Fields

The <label> tag makes forms accessible by linking text with form controls.

Example:

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

<select> and <option> - Dropdown Menus

Use <select> to create a dropdown. Each choice is defined using an <option> tag.

Example:

<select name="fruit">
  <option value="apple">Apple</option>
  <option value="banana">Banana</option>
</select>

<button> - Clickable Button

A button to submit, rest, or trigger JavaScript.

Example:

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

Reference Table

Tag	Description
<form>	Defines the form container for input fields
<input>	Single-line input field for various data types
<textarea>	Multiline text input field
<label>	Associates labels with form fields
<fieldset>	Groups related form fields together
<legend>	Title for the grouped fields inside a <fieldset>
<select>	Dropdown list
<option>	Defines an option within <select>
<optgroup>	Groups related options inside <select>
<button>	Clickable button (e.g. Submit or Reset)
<datalist>	Suggests a list of values for <input>
<output>	Displays the result of a calculation or user action