Stiftung Formular
Forms Foundation Steuerung wird automatisch auf den globalen Stil festgelegt:
Alle <textarea> , <select> und <input> Elementbreiten sind 100%, und mit einer Marge, Polsterung, Schatten trinken Maus Bewegungseffekt.
Beispiele
<Form>
Input:
<Input type = "text" Platzhalter = "Name">
Textarea:
<Textarea Reihen = "4" Platzhalter = "Adresse"> </ textarea>
Wählen Sie:
<Auswahl>
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
</ Select>
</ Form>
Input:
<Input type = "text" Platzhalter = "Name">
Textarea:
<Textarea Reihen = "4" Platzhalter = "Adresse"> </ textarea>
Wählen Sie:
<Auswahl>
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
</ Select>
</ Form>
Versuchen »
Etikett
Benutzen Sie das Formular <label> Element , das Etikett zu setzen, kann das Etikett für Attribute und id Attribute hinzugefügt werden. Benutzer-Eingabefeld im Fokus erhalten, wenn das Eingabefeld oder auf der Registerkarte klicken:
Beispiele
<Form>
<Label for = "name"> Eingabe
<Input type = "text" Platzhalter = "Name" id = "name">
</ Label>
<Label for = "adr"> Etiketten
<Textarea Reihen = "4" Platzhalter = "Adresse" id = "adr"> </ textarea>
</ Label>
<Label for = "num"> wählen
<Select id = "num">
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
</ Select>
</ Label>
</ Form>
<Label for = "name"> Eingabe
<Input type = "text" Platzhalter = "Name" id = "name">
</ Label>
<Label for = "adr"> Etiketten
<Textarea Reihen = "4" Platzhalter = "Adresse" id = "adr"> </ textarea>
</ Label>
<Label for = "num"> wählen
<Select id = "num">
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
</ Select>
</ Label>
</ Form>
Versuchen »
Wenn Sie die richtige bündige Registerkarte festlegen müssen, können Sie .right Kategorien:
fieldset
Rendering - Stiftung <fieldset> Element des Stils , wie folgt:
Beispiele
<Form>
<Fieldset>
<Legend> Fieldset Legend </ legend >
<Label> Namen
<Input type = "text" Platzhalter = "Vorname ..">
</ Label>
<Label> E - Mail
<Input type = "text" Platzhalter = "Geben Sie E - Mail ..">
</ Label>
</ Fieldset>
</ Form>
<Fieldset>
<Legend> Fieldset Legend </ legend >
<Label> Namen
<Input type = "text" Platzhalter = "Vorname ..">
</ Label>
<Label> E - Mail
<Input type = "text" Platzhalter = "Geben Sie E - Mail ..">
</ Label>
</ Fieldset>
</ Form>
Versuchen »
Fehlerstatus
Verwenden Sie .error Klasse das falsche Etikett zu setzen, Eingabefelder, Textfelder Stil:
Beispiele
<Form>
<Label - class = "error"> Fehler
<Input type = "text" Platzhalter = "Name ..">
</ Label>
<Kleine class = "error"> Falsche Eingabe </ small>
<Textarea Reihen = "4" Platzhalter = "Adresse"> </ textarea>
<Kleine class = "error"> Falsche Eingabe </ small>
</ Form>
<Label - class = "error"> Fehler
<Input type = "text" Platzhalter = "Name ..">
</ Label>
<Kleine class = "error"> Falsche Eingabe </ small>
<Textarea Reihen = "4" Platzhalter = "Adresse"> </ textarea>
<Kleine class = "error"> Falsche Eingabe </ small>
</ Form>
Versuchen »
 | Sie müssen JavaScript verwenden, um den Status der Benutzereingabefehler zu aktualisieren. |
|---|