Formulaire d'entrée
Top Labels
Formulaire d'entrée
Exemple
<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>
Try It Yourself » étiquettes de fond
Formulaire d'entrée
Exemple
<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>
Try It Yourself » Cartes d'entrée
Entête
Exemple
<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> Try It Yourself » Les étiquettes vertes
Étiquettes avec class = "w3-label" sont en vert par défaut:
Exemple
<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> Try It Yourself » Validation des étiquettes
les étiquettes sont de couleur rouge Validation, et devient vert lorsque l'entrée devient valide.
Pour faire des étiquettes de validation, ajouter une classe w3-validate à votre classe w3-label.
Exemple
<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> Try It Yourself » Les étiquettes de couleur
Utilisez l' une des classes w3-text-couleur pour colorer vos étiquettes:
Exemple
<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> Try It Yourself » entrée bordé
Ajouter la classe w3-frontière pour créer des entrées délimité:
arrondi Borders
Utilisez l' une des classes w3-rondes pour créer des bordures arrondies:
Exemple
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text"> Try It Yourself » entrée Borderless
La classe w3-entrée a une bordure inférieure par défaut. Si vous voulez une entrée sans frontières, ajouter la classe w3-border-0:
Exemple
<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> Try It Yourself » Les couleurs
Sentez-vous libre d'utiliser vos styles et couleurs préférées:
Formulaire d'entrée
Exemple
<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> Try It Yourself » entrées Hoverable
Les classes de couleurs w3 ajoute un vol stationnaire couleur de fond du champ de saisie sur la souris sur:
Exemple
<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">
Try It Yourself » Entrées d'animation
La classe w3-animé-entrée transforme la largeur d'un champ d'entrée à 100% quand il obtient le focus:
Exemple
<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> Try It Yourself » Exemple
<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> Try It Yourself » Sélectionnez les options
Exemple
<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> Try It Yourself » Bordé Sélectionnez Menu
Éléments de formulaire dans une grille
Dans cet exemple, nous utilisons Responsive Grid System W3.CSS 'pour rendre les entrées apparaissent sur la même ligne (sur des écrans plus petits, ils vont empiler horizontalement avec une largeur de 100%). Vous en apprendrez plus à ce sujet plus tard.
Exemple
<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> Try It Yourself » Deux disposition des colonnes avec des étiquettes:
Exemple
<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> Try It Yourself »