Forms, Inputs, Checkboxes & Floating Labels

w3-input, w3-select, w3-check, w3-radio, and borderless input styling

« Responsive Tables & Structured Lists« Previous Modals, Dialogs & Visibility Toggles »Next »

W3.CSS form controls feature clean borderless underlines (w3-input), custom checkboxes (w3-check), and custom radio buttons (w3-radio).

Styling Inputs with Underlines

w3-input: Styles text inputs with a clean bottom border line instead of clunky default browser boxes.

w3-border: Adds full 1px borders when traditional boxed fields are preferred.

w3-check & w3-radio: Renders enlarged, accessible checkbox and radio toggles.

Registration Form in W3.CSS

Try It Yourself »

<form class="w3-container w3-card-4 w3-padding-16" style="max-width: 450px;">
  <h2 class="w3-text-teal">Student Registration</h2>
  
  <p>
    <label class="w3-text-teal"><b>Full Name</b></label>
    <input class="w3-input w3-border" type="text" placeholder="e.g. Jane Doe" required>
  </p>
  
  <p>
    <label class="w3-text-teal"><b>Email Address</b></label>
    <input class="w3-input w3-border" type="email" placeholder="jane@example.com" required>
  </p>

  <p>
    <input class="w3-check" type="checkbox" checked="checked">
    <label> Receive weekly coding challenges</label>
  </p>

  <button class="w3-btn w3-teal w3-block">Create Account</button>
</form>

Forms pair clear labels with w3-input and w3-check controls.

Google AdSense Slot (inContentBanner)

Set your Publisher ID in src/config/ads.ts to display live ads.

Test Yourself With Exercise

+15 XP

Which class styles standard HTML form text inputs with W3.CSS padding and styling?

« Previous: Responsive Tables & Structured Lists Next: Modals, Dialogs & Visibility Toggles »