Entrada W3.CSS
Formulario de entrada
Etiquetas principales
Formulario de entrada
Ejemplo
<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>
Etiquetas inferiores
Formulario de entrada
Ejemplo
<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>
Tarjetas de entrada
Encabezamiento
Ejemplo
<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>
Etiquetas de colores
Use cualquiera de las clases w3-text-color para colorear sus etiquetas:
Ejemplo
<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>
Entrada bordeada
Agregue la clase w3-border para crear entradas bordeadas:
Ejemplo
<input class="w3-input w3-border"
type="text">
Bordes redondeados
Utilice cualquiera de las clases w3-round para crear bordes redondeados:
Ejemplo
<input class="w3-input w3-border w3-round"
type="text">
<input class="w3-input w3-border
w3-round-large"
type="text">
Entrada sin bordes
La clase de entrada w3 tiene un borde inferior por defecto. Si desea una entrada sin bordes, agregue la clase w3-border-0 :
Ejemplo
<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>
Colores
Siéntete libre de usar tus estilos y colores favoritos:
Formulario de entrada
Ejemplo
<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>
Entradas flotantes
Las clases w3-hover- color agregan un color de fondo al campo de entrada al pasar el mouse:
Ejemplo
<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">
Entradas animadas
La clase w3-animate-input transforma el ancho de un campo de entrada al 100 % cuando recibe el foco:
Ejemplo
<input class="w3-input w3-animate-input"
type="text" style="width:30%">
Ejemplo
<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>
Ejemplo
<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>
Seleccione opciones
Ejemplo
<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>
Menú de selección bordeado
Ejemplo
<select class="w3-select w3-border" name="option">
Elementos de formulario en una cuadrícula
En este ejemplo, usamos el sistema de cuadrícula sensible de W3.CSS para que las entradas aparezcan en la misma línea (en pantallas más pequeñas, se apilarán horizontalmente con un ancho del 100 %). Aprenderás más sobre esto más adelante.
Ejemplo
<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>
Cuadrícula con etiquetas
Ejemplo
<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>