forms

W3.CSS Forms

W3.CSS provides pre-designed classes for creating clean and responsive forms.

Basic Form Example

<form class="w3-container">
  <label class="w3-text-blue">Name</label>
  <input class="w3-input w3-border" type="text" placeholder="Enter your name">

  <label class="w3-text-blue">Email</label>
  <input class="w3-input w3-border" type="email" placeholder="Enter your email">

  <button class="w3-button w3-blue w3-margin-top">Submit</button>
</form>

Customized Form

Combine other classes like w3-padding and w3-round for more customization:

<form class="w3-container w3-padding w3-round w3-light-grey">
  <label class="w3-text-green">Username</label>
  <input class="w3-input w3-border w3-round" type="text">

  <label class="w3-text-green">Password</label>
  <input class="w3-input w3-border w3-round" type="password">

  <button class="w3-button w3-green w3-margin-top w3-round">Login</button>
</form>