domingo, 20 de julio de 2014

Etiquetas y controles HTML y HTML 5 (2da Parte)



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

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>
<input type="button" value="Hola mundo!">
</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" />
</form>




Input Type: time

El tipo time permite al usuario seleccionar una hora.


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.