Entrée W3.CSS
Formulaire de saisie
Meilleures étiquettes
Formulaire de saisie
Exemple
<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>
Étiquettes inférieures
Formulaire de saisie
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>
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>First Name</label>
<input class="w3-input"
type="text">
<label>Last Name</label>
<input class="w3-input"
type="text">
</form>
</div>
Étiquettes colorées
Utilisez l'une des classes w3-text-color pour colorer vos étiquettes :
Exemple
<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>
Entrée encadrée
Ajoutez la classe w3-border pour créer des entrées encadrées :
Exemple
<input class="w3-input w3-border"
type="text">
Bordures arrondies
Utilisez l'une des classes w3-round 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">
Entrée sans bordure
La classe w3-input a une bordure inférieure par défaut. Si vous voulez une entrée sans bordure, ajoutez 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>
Couleurs
N'hésitez pas à utiliser vos styles et couleurs préférés :
Formulaire de saisie
Exemple
<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>
Entrées flottantes
Les classes w3-hover- color ajoutent une couleur d'arrière-plan au champ de saisie au passage de la souris :
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">
Entrées animées
La classe w3-animate-input transforme la largeur d'un champ d'entrée à 100 % lorsqu'il obtient le focus :
Exemple
<input class="w3-input w3-animate-input"
type="text" style="width:30%">
Exemple
<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>
Exemple
<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>
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>
Menu de sélection bordé
Exemple
<select class="w3-select w3-border" name="option">
Éléments de formulaire dans une grille
Dans cet exemple, nous utilisons le système de grille réactif de W3.CSS pour faire apparaître les entrées sur la même ligne (sur les écrans plus petits, elles s'empileront 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>
Grille avec é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>