Forma de entrada
Top etiquetas
Forma de entrada
Ejemplo
<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>
Inténtalo tú mismo " Las etiquetas de fondo
Forma 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>
Inténtalo tú mismo " 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
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> Inténtalo tú mismo " Las etiquetas verdes
Las etiquetas con class = "etiqueta W3" son de color verde por defecto:
Ejemplo
<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> Inténtalo tú mismo " La validación de etiquetas
La validación de las etiquetas son de color rojo, y se pone verde cuando la entrada se vuelve válida.
Para realizar la validación de etiquetas, agregar una clase W3-validar a su clase W3-etiqueta.
Ejemplo
<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> Inténtalo tú mismo " Las etiquetas de colores
Utilice cualquiera de las clases w3-texto-color para colorear sus etiquetas:
Ejemplo
<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> Inténtalo tú mismo " entrada bordeado
Agregue la clase W3-frontera para crear entradas confinadas:
Bordes redondeados
Utilice cualquiera de las clases W3-redondas 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"> Inténtalo tú mismo " entrada sin fronteras
La clase W3-entrada tiene un borde inferior de forma predeterminada. Si quieres una entrada sin bordes, añadir la clase W3-frontera-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> Inténtalo tú mismo " Colores
No dude en utilizar sus estilos y colores preferidos:
Forma de entrada
Ejemplo
<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> Inténtalo tú mismo " insumos Hoverable
Las clases de color W3-hover- añade un color de fondo para el campo de entrada en el ratón por encima:
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">
Inténtalo tú mismo " Entradas animados
La clase W3-animado-entrada transforma el ancho de un campo de entrada de 100% cuando se pone el foco:
Ejemplo
<input class="w3-input w3-animate-input"
type="text" style="width:30%"> Inténtalo tú mismo " Ejemplo
<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> Inténtalo tú mismo " Ejemplo
<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> Inténtalo tú mismo " 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> Inténtalo tú mismo " Limita Seleccione Menú
Elementos de formulario en una cuadrícula
En este ejemplo, utilizamos Sistema de Red de respuesta W3.CSS 'para hacer las entradas aparecen en la misma línea (en pantallas más pequeñas, van a apilar horizontalmente con un ancho de 100%). Usted aprenderá 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> Inténtalo tú mismo " Dos diseño de las columnas con las 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> Inténtalo tú mismo "