W3.CSS- invoer
Invoervorm
Top etikette
Invoervorm
Voorbeeld
<form class="w3-container">
<label>First Name</label>
<input class="w3-input" type="text">
<label>Last Name</label>
<input class="w3-input" type="text">
</form>
Onderste etikette
Invoervorm
Voorbeeld
<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>
Invoerkaarte
Opskrif
Voorbeeld
<div class="w3-card-4">
<div class="w3-container
w3-green">
<h2>Header</h2>
</div>
<form class="w3-container">
<label>First Name</label>
<input class="w3-input"
type="text">
<label>Last Name</label>
<input class="w3-input"
type="text">
</form>
</div>
Gekleurde Etikette
Gebruik enige van die w3-teks-kleur klasse om jou etikette in te kleur:
Voorbeeld
<form class="w3-container">
<label
class="w3-text-blue"><b>First Name</b></label>
<input class="w3-input w3-border" type="text">
<label
class="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>
Begrensde invoer
Voeg die w3-grensklas by om begrensde invoere te skep:
Voorbeeld
<input class="w3-input w3-border"
type="text">
Afgeronde grense
Gebruik enige van die w3-rondte klasse om geronde grense te skep:
Voorbeeld
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text">
Randlose invoer
Die w3-invoerklas het by verstek 'n onderste rand. As jy 'n randlose invoer wil hê, voeg die w3-border-0 klas by:
Voorbeeld
<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>
Kleure
Gebruik gerus jou gunsteling style en kleure:
Invoervorm
Voorbeeld
<div class="w3-container w3-teal">
<h2>Input Form</h2>
</div>
<form class="w3-container">
<label class="w3-text-teal"><b>First Name</b></label>
<input class="w3-input w3-border w3-light-grey" type="text">
<label class="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>
Beweegbare insette
Die w3-sweef-kleurklasse voeg 'n agtergrondkleur by die invoerveld by muis-oor:
Voorbeeld
<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">
Geanimeerde insette
Die w3-animate-input klas transformeer die breedte van 'n invoerveld na 100% wanneer dit fokus kry:
Voorbeeld
<input class="w3-input w3-animate-input"
type="text" style="width:30%">
Voorbeeld
<input class="w3-check" type="checkbox" checked="checked">
<label>Milk</label>
<input class="w3-check"
type="checkbox">
<label>Sugar</label>
<input class="w3-check" type="checkbox" disabled>
<label>Lemon (Disabled)</label>
Voorbeeld
<input class="w3-radio" type="radio" name="gender" value="male" checked>
<label>Male</label>
<input class="w3-radio"
type="radio" name="gender" value="female">
<label>Female</label>
<input class="w3-radio"
type="radio" name="gender" value="" disabled>
<label>Don't know (Disabled)</label>
Kies Opsies
Voorbeeld
<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>
Bordered Kies Kieslys
Voorbeeld
<select class="w3-select w3-border" name="option">
Vorm elemente in 'n rooster
In hierdie voorbeeld gebruik ons W3.CSS se Responsive Grid System om die insette op dieselfde lyn te laat verskyn (op kleiner skerms sal hulle horisontaal met 100% breedte stapel). Jy sal later meer hieroor leer.
Voorbeeld
<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>
Rooster met etikette
Voorbeeld
<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>