Radio
Buttons
<input
type="radio"> define un radio button. Los radio buttons permiten al
usuario seleccionar solamente una opción.
<form>
<input id="genero_masc" type="radio" value="masculino">Masculino<br>
<input id="genero_fem" type="radio" value="femenino">Femenino
</form>
Checkboxes
<input
type="checkbox"> define un checkbox. Checkboxes le permite a un usuario
seleccionar una o más opciones, o ninguna opción.
<form>
<input id="vehiculo_moto" type="checkbox" value="Moto">Yo tengo una moto<br/>
<input id="vehiculo_carro" type="checkbox" value="Carrro">Yo tengo un carro
</form>
TextArea
TextArea nos
permite crear una caja de texto multilínea. Un ejemplo sencillo para usar un
TextArea es cuando se le pide a un usuario ingresar su dirección, el cual
requiere que la cantidad de texto ingresado sea extenso.
<form>
<textarea id="txtDireccion"
rows="10" cols="30">
Aquí se puede ingresar
un texto largo
</textarea>
</form>
Select
crea una lista de valores en combo.
<form>
<select id="carros">
<option value="volvo">Volvo</option>
<option value="mercedesbenz">Mercedes Benz</option>
<option value="BMW">BMW</option>
<option value="audi">Audi</option>
</select>
</form>
Botones
Un botón, a diferencia
de un botón de submit, no envía datos al servidor.
<form>
</form>
HTML
5 tiene nuevos controles input para formularios. Estas nuevas características
son un mejor control de entrada y validaciones. Como se dijo al inicio, algunos
de estos controles son soportados por unos navegadores y por otros no, por tal
motivo antes de probarlos verifique en que navegador son soportados para
realizar pruebas. En la página de w3schools podemos ver cuáles son soportados
en los diferentes navegadores:
Input
Type: color
El
tipo color es usado para seleccionar un color desde una paleta de colores.
<form>
Seleccione su
color favorito: <input id="favcolor" type="color" />
</form>
Input
Type: date
El
tipo date permite al usuario seleccionar una fecha.
<form>
Cumpleaños:
<input id="cumple" type="date" />
Input Type: time
El tipo time permite al usuario seleccionar una hora.
Input Type: datetime-local
El
tipo datetime-local permite al usuario seleccionar una fecha y hora.
<form>
Fecha Hora Cita: <input id="fhcita"
type="datetime-local" />
</form>
Input Type: email
El
tipo email crea un campo de texto que debe contener una dirección de correo
electrónico.
<form>
E-mail:
<input id="email" type="email" />
</form>
Input
Type: number
El
tipo number crea un campo de texto que debe contener un número. Se puede
establecer que números son aceptados.
<form>
Cantidad (entre
1 y 5): <input id="quantity" type="number" min="1"
max="5">
</form>
No hay comentarios:
Publicar un comentario
Nota: solo los miembros de este blog pueden publicar comentarios.