• Chapter 8 — Forms & Inputs
  • The <form> Element
  • The <input> Element
  • All Input Types
  • <label> — Always Label Your Inputs
  • Other Form Elements
    • <textarea> — Multi-line Text
    • <select> — Dropdown
    • <button> — Better Than Input Submit
  • Important Input Attributes
  • <fieldset> and <legend> — Grouping
  • Styling Forms
  • CSS Pseudo-classes for Form States
  • Form Best Practices

§Chapter 8 — Forms & Inputs

§The <form> Element

<form action="/submit" method="POST">
  <!-- inputs go here -->
</form>

action — where to send the data. A URL.

method — how to send:

• GET — data in the URL: page.html?name=John. For search forms.
• POST — data sent invisibly. For login, signup, sensitive data.

§The <input> Element

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

type — what kind of input. Most important attribute. name — the key when data is submitted. Required for form submission. placeholder — ghost text when empty.

§All Input Types

<input type="text">           <!-- single line text -->
<input type="email">          <!-- validates email, email keyboard on mobile -->
<input type="password">       <!-- hides characters -->
<input type="number">         <!-- only numbers, number keyboard -->
<input type="tel">            <!-- phone, dial pad on mobile -->
<input type="url">            <!-- validates URL format -->
<input type="search">         <!-- shows clear button -->
<input type="date">           <!-- date picker -->
<input type="time">           <!-- time picker -->
<input type="datetime-local"> <!-- date and time picker -->
<input type="month">          <!-- month picker -->
<input type="week">           <!-- week picker -->
<input type="color">          <!-- color picker -->
<input type="range">          <!-- slider -->
<input type="checkbox">       <!-- tick box -->
<input type="radio">          <!-- one from a group -->
<input type="file">           <!-- file upload -->
<input type="hidden">         <!-- invisible, sends data silently -->
<input type="submit">         <!-- submits the form -->
<input type="reset">          <!-- resets all fields -->
<input type="button">         <!-- plain button, no behavior -->

§<label> — Always Label Your Inputs

<!-- Method 1 — for/id linking -->
<label for="username">Username</label>
<input type="text" id="username" name="username">

<!-- Method 2 — wrapping -->
<label>
  Username
  <input type="text" name="username">
</label>

Clicking the label text also focuses the input — much easier on mobile. Required for screen readers.

§Other Form Elements

§<textarea> — Multi-line Text

<label for="message">Message</label>
<textarea id="message" name="message" rows="5" placeholder="Write your message..."></textarea>

§<select> — Dropdown

<label for="country">Country</label>
<select id="country" name="country">
  <option value="">-- Select a country --</option>
  <option value="us">United States</option>
  <option value="uk">United Kingdom</option>
</select>

§<button> — Better Than Input Submit

<button type="submit">Send Message</button>
<button type="button">Cancel</button>
<button type="reset">Clear</button>

§Important Input Attributes

§<fieldset> and <legend> — Grouping

<fieldset>
  <legend>Personal Information</legend>
  <label for="fname">First Name</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last Name</label>
  <input type="text" id="lname" name="lname">
</fieldset>

§Styling Forms

/* Reset form defaults */
input, textarea, select, button {
  font-family: inherit;
  font-size: inherit;
  box-sizing: border-box;
}

/* Input styles */
.input {
  width: 100%;
  padding: 10px 16px;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 200ms ease;
}

/* Always style :focus */
.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

§CSS Pseudo-classes for Form States

input:focus           { } /* user is typing in it */
input:disabled        { } /* disabled attribute is set */
input:required        { } /* required attribute is set */
input:valid           { } /* passes built-in validation */
input:invalid         { } /* fails built-in validation */
input:placeholder-shown { } /* placeholder is visible (field empty) */
input:checked         { } /* checkbox/radio is checked */
input:user-valid      { } /* valid AND user has interacted */
input:user-invalid    { } /* invalid AND user has interacted */

§Form Best Practices

✅ Always use <label> with every input
✅ Use the right input type for the data
✅ Use name attributes — forms don't submit without them
✅ Use required on mandatory fields
✅ Group related inputs in .form-group divs
✅ Always style :focus — never remove outline without replacing it
✅ Use autocomplete to help users fill forms faster
✅ Use fieldset/legend for long multi-section forms

Tags: #CSS #css #vdsology #webdevelopment #vdsologyCSS #CSS3 #CSSreference #CSSreference2026