HTML Form Elements and Attributes Guide

Basic Form Structure

A fundamental HTML form structure includes action, target, and method attributes:

<form action="https://www.google.com/search" target="_blank" method="get">
  <input type="text" name="q">
  <button>Search Google</button>
</form>

Common Form Controls

Text Input Field

<input type="text">

Key attributes:
- name: Identifies submitted data
- value: Default input value
- maxlength: Maximum character limit

Password Field

<input type="password">

Attributes mirror text inputs but mask user input

Radio Buttons

<input type="radio" name="color" value="red">Red
<input type="radio" name="color" value="blue" checked>Blue

Essential properties:
- Shared name for grouping
- value defines submitted data
- checked sets default selection

Checkboxes

<input type="checkbox" name="fruit" value="apple">Apple
<input type="checkbox" name="fruit" value="orange" checked>Orange

Operate similarly to radio buttons but allow multiple selections

Hidden Input

<input type="hidden" name="session" value="abcd1234">

Stores non-visual data for form submission

Submission Controls

<input type="submit" value="Submit Data">
<button>Submit Form</button>

Note: Button elements default to submit type

Reset Button

<input type="reset" value="Clear Form">
<button type="reset">Reset Fields</button>

Text Area

<textarea name="feedback" rows="5" cols="40">Default text</textarea>

Attributes:
- rows: Vertical display size
- cols: Horizontal display width

Selection Dropdown

<select name="country">
  <option value="us">United States</option>
  <option value="ca" selected>Canada</option>
</select>

Features:
- value defines submitted option
- selected sets default choice

Form Control States

Add the disabled attribute to deactivate any form element:

<input type="text" name="readonly" disabled>

Label Associations

Connect labels to inputs using either method:

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

<label>Email:
  <input type="email">
</label>

Form Grouping

<fieldset>
  <legend>Login Details</legend>
  <label for="username">User:</label>
  <input id="username" type="text" name="user">
  <label>Password:
    <input type="password" name="pass">
  </label>
</fieldset>

Tags: html-forms form-controls input-elements label-tag fieldset

Posted on Thu, 03 Sep 2026 16:51:41 +0000 by beckjo1

Freaks City