Forma de intrare
Etichete de top
Forma de intrare
Exemplu
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Namel</label>
<input class="w3-input" type="text">
</form>
Încearcă - l singur » Etichete de fund
Forma de intrare
Exemplu
<form class="w3-container">
<input class="w3-input" type="text">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last
Name</label>
</form>
Încearcă - l singur » Carduri de intrare
Antet
Exemplu
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form>
</div> Încearcă - l singur » Etichete verzi
Etichete cu class = „W3-label“ sunt de culoare verde în mod implicit:
Exemplu
<form class="w3-container">
<label
class="w3-label">First Name</label>
<input class="w3-input"
type="text">
<label
class="w3-label">Last Name</label>
<input class="w3-input"
type="text">
</form> Încearcă - l singur » Etichete Validating
Etichetele Validating sunt roșii, și devine verde când intrarea devine validă.
Pentru a face etichete de validare, adăugați o clasă W3-Validate la clasa W3-etichetă.
Exemplu
<form class="w3-container">
<input
class="w3-input" type="text" required>
<label class="w3-label
w3-validate">First Name</label>
<input class="w3-input" type="text" required>
<label class="w3-label
w3-validate">Last Name</label>
<input class="w3-input" type="email" required>
<label class="w3-label
w3-validate">Email</label>
</form> Încearcă - l singur » Etichete colorate
Utilizați oricare dintre clasele W3-text- o culoare la etichetele:
Exemplu
<form class="w3-container">
<label
class="w3-label w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="w3-label w3-text-blue"><b>Last Name</b></label>
<input class="w3-input w3-border" type="text">
<button class="w3-btn
w3-blue">Register</button>
</form> Încearcă - l singur » intrare marginita
Adăugați clasa W3-frontieră pentru a crea intrări marginita:
rotunjit frontiere
Utilizați oricare dintre clasele W3-rotunde pentru a crea frontiere rotunjite:
Exemplu
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text"> Încearcă - l singur » intrare fără margini
Clasa W3-intrare are o margine de jos în mod implicit. Dacă doriți o intrare fără margini, adăugați clasa W3-border-0:
Exemplu
<form class="w3-container w3-light-grey">
<label>First
Name</label>
<input class="w3-input w3-border-0" type="text">
<label>Last Name</label>
<input class="w3-input
w3-border-0" type="text">
</form> Încearcă - l singur » colorate
Simțiți-vă liber pentru a utiliza stiluri preferate si culori:
Forma de intrare
Exemplu
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-label w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="w3-label
w3-text-teal"><b>Last Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<button class="w3-btn w3-blue-grey">Register</button>
</form> Încearcă - l singur » intrări Hoverable
De-W3 hover- clase de culoare adaugă o culoare de fundal pentru câmpul de introducere cu mouse-ul:
Exemplu
<input class="w3-input w3-hover-green" type="text">
<input class="w3-input
w3-border w3-hover-red" type="text">
<input class="w3-input
w3-border w3-hover-blue" type="text">
Încearcă - l singur » Intrări animate
Clasa W3-insufletit-intrare transformă lățimea unui câmp de intrare până la 100% , atunci când acesta devine de focalizare:
Exemplu
<input class="w3-input w3-animate-input"
type="text" style="width:30%"> Încearcă - l singur » Exemplu
<input class="w3-check" type="checkbox" checked="checked">
<label class="w3-validate">Milk</label>
<input class="w3-check"
type="checkbox">
<label class="w3-validate">Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label class="w3-validate">Lemon (Disabled)</label> Încearcă - l singur » Exemplu
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label class="w3-validate">Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label class="w3-validate">Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label class="w3-validate">Don't know (Disabled)</label> Încearcă - l singur » Selectati optiunile
Exemplu
<select class="w3-select" name="option">
<option value="" disabled
selected>Choose your option</option>
<option value="1">Option
1</option>
<option value="2">Option 2</option>
<option
value="3">Option 3</option>
</select> Încearcă - l singur » Mărginit Selectați Meniu
Elemente de formular într-o grilă
În acest exemplu, vom folosi System Grid Responsive W3.CSS“pentru a face intrările apar pe aceeași linie (on smaller screens, they will stack horizontally with 100% width) de (on smaller screens, they will stack horizontally with 100% width) . Vei afla mai multe despre asta mai târziu.
Exemplu
<div class="w3-row-padding">
<div class="w3-third">
<input class="w3-input w3-border" type="text" placeholder="One">
</div>
<div class="w3-third">
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-third">
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> Încearcă - l singur » Două aspect coloană cu etichete:
Exemplu
<div class="w3-row-padding">
<div class="w3-half">
<label>First Name</label>
<input
class="w3-input w3-border" type="text" placeholder="Two">
</div>
<div class="w3-half">
<label>Last
Name</label>
<input class="w3-input
w3-border" type="text" placeholder="Three">
</div>
</div> Încearcă - l singur »