Latest web development tutorials

Formulaire Fondation

Fondation de contrôle Forms est automatiquement réglé sur le style global:

Tous <textarea> , <select> et <input> largeurs d'éléments sont 100%, et avec une marge, padding, boire de l' ombre effet de mouvement de la souris.

Exemples

<Form>
entrée:
<Input type = "text" espace réservé = "Nom">

Textarea:
<Lignes de Textarea = "4" espace réservé = "Adresse"> </ textarea>

Sélectionnez:
<Sélectionner>
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
</ Select>
</ Form>

Essayez »

étiquette

Utilisez le formulaire <label> élément pour définir l'étiquette, l'étiquette peut être ajoutée pour les attributs et les attributs id. Obtenez zone de saisie de l'utilisateur mise au point lorsque le champ de saisie ou cliquez sur l'onglet:

Exemples

<Form>
<Label for = "nom"> Entrée
<Input type = "text" espace réservé = "Nom" id = "nom">
</ Label>

<Label for = "adr"> Étiquette
<Lignes de Textarea = "4" espace réservé = "Adresse" id = "adr"> </ textarea>
</ Label>

<Label for = "num"> Sélectionner
<Sélectionnez id = "num">
<Option> 1 </ option>
<Option> 2 </ option>
<Option> 3 </ option>
<Option> 4 </ option>
</ Select>
</ Label>
</ Form>

Essayez »

Si vous devez définir l'onglet aligné à droite, vous pouvez utiliser .right catégories:

Exemples

<Label class = "right">

Essayez »

fieldset

Fondation Rendu <fieldset> élément de style comme suit:

Exemples

<Form>
<Fieldset>
<Legend> Fieldset Legend </ legend >
<Label> Nom
<Input type = "text" espace réservé = "Prénom ..">
</ Label>
<Label> Email
<Input type = "text" espace réservé = "Entrez email ..">
</ Label>
</ Fieldset>
</ Form>

Essayez »

Statut d'erreur

Utilisez .error classe pour définir la mauvaise étiquette, boîtes de saisie, zones de texte style:

Exemples

<Form>
<Classe Label = "error"> Erreur
<Input type = "text" espace réservé = "Nom ..">
</ Label>
<Petit class = "error"> Entrée incorrecte </ small>

<Lignes de Textarea = "4" espace réservé = "Adresse"> </ textarea>
<Petit class = "error"> Entrée incorrecte </ small>
</ Form>

Essayez »
note Vous devez utiliser JavaScript pour mettre à jour le statut de l'erreur d'entrée de l'utilisateur.