Eingabeformular
Top Labels
Eingabeformular
Beispiel
<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>
Versuch es selber " Bottom Labels
Eingabeformular
Beispiel
<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>
Versuch es selber " Eingangskarten
Kopfzeile
Beispiel
<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> Versuch es selber " Grüne Labels
Labels mit class = "w3-label" sind standardmäßig grün:
Beispiel
<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> Versuch es selber " Validieren Labels
Validieren von Etiketten sind rot, und wird grün, wenn der Eingang gültig wird.
Um Etiketten validieren, fügen Sie ein w3-validate Klasse zu Ihrem w3-Label-Klasse.
Beispiel
<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> Versuch es selber " Farbige Etiketten
Verwenden Sie eine der w3-Text-Farbklassen Ihre Etiketten Farbe:
Beispiel
<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> Versuch es selber " Grenzt Eingangs
Fügen Sie die w3-Grenze Klasse umrandeten Eingänge zu erstellen:
Abgerundete Borders
Verwenden Sie eine der w3-Runde Klassen abgerundeten Grenzen zu schaffen:
Beispiel
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text"> Versuch es selber " Randlos-Eingang
Die w3-Eingangsklasse hat eine untere Grenze in der Standardeinstellung. Wenn Sie eine randlose Eingabe möchte, fügen Sie die w3-border-0 - Klasse:
Beispiel
<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> Versuch es selber " Farben
Fühlen Sie sich frei, um Ihre Lieblings-Styles und Farben zu verwenden:
Eingabeformular
Beispiel
<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> Versuch es selber " Hoverable Eingänge
Die w3-hover- Farbklassen fügt eine Hintergrundfarbe in das Eingabefeld bei mouse-over:
Beispiel
<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">
Versuch es selber " Animierte Eingänge
Die w3-belebtes-Eingangsklasse verwandelt die Breite eines Eingabefeldes auf 100% , wenn es den Fokus erhält:
Beispiel
<input class="w3-input w3-animate-input"
type="text" style="width:30%"> Versuch es selber " Beispiel
<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> Versuch es selber " Beispiel
<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> Versuch es selber " Optionen wählen
Beispiel
<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> Versuch es selber " Grenzt Wählen Sie Menü
Formularelemente in einem Gitter
In diesem Beispiel verwenden wir Responsive Grid System 'W3.CSS auf die Eingänge auf der gleichen Zeile erscheinen zu lassen (auf kleineren Bildschirmen, werden sie horizontal mit 100% Breite stapeln). Sie werden später mehr darüber zu erfahren.
Beispiel
<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> Versuch es selber " Zwei-Spalten-Layout mit Etiketten:
Beispiel
<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> Versuch es selber "