CREAR FORMULARIOS EN HTML5 | Etiquetas, campos y atributos

En esta lección conoceremos los nuevos tipos de campos disponibles para formularios en HTML5, ahora podemos crear campos de búsqueda, teléfono, URL, selectores de color, fecha, etc. junto a ellos se suman varios atributos que nos facilitarán la construcción de formularios en HTML5. De esta manera podemos construir una estructura más completa de formularios en HTML5.

Introducción

Recordemos que para crear formularios haremos uso de la etiqueta <form>, dentro de ella van todos los campos <input> con su respectivo atributo type para establecer mediante un valor el tipo de información que debe colocar en dicho campo.

<form>
  Texto:<input type="text"/>
</form>
  

Además de los elementos <input> también ya conocimos otros como: <textarea>, <option>, <select>, etc. Por otro lado conocimos también valores para el atributo type tales como: text, password, checkbox, radio, submit, etc. Ahora, en HTML5 tenemos más tipos de campos y aprenderemos a manejarlas en esta lección. 

Por otro lado, también debemos tener en cuenta hacer uso del atributo name para que los campos de los formularios recopilen y envíen la información correctamente.

Nuevos tipos de campo para <input> en HTML5

Ahora conozcamos los nuevos valores que puede tomar el atributo type para recopilar cierto tipo de información, veamos:

Nuevos valores para atributo type

• color.- crea un campo con selector de color, de acuerdo al sistema operativo, aparece una paleta para escoger un color.
• date.- se creará un campo de fecha, en ella se pueden colocar el día, mes y año.
• datetime.- permite ingresa información de hora, minuto y segundo.
• datetime-local.- genera un campo para fecha y hora, podemos colocar en ella el día, mes, año y hora.
• email.- para información de correo electrónico.
• month.- genera un campo para ingresar un mes del año.
• number.- para recopilar datos numéricos.
• range.- crea una barra con un botón desplazable para elegir un rango, por defecto el rango es de 0 a 100.
• search.- para generar una caja de búsqueda.
• tel.- para recopilar información de número telefónico.
• time.- crea un campo para ingresar hora y minuto.
• url.- para información de dirección URL.
• week.- crea un campo para elegir la semana del año.

Ejemplos de formularios HTML5

Ejemplo 1.- El objetivo de estos ejemplos es que veas como es resultado de cada tipo de campo. Para el primer ejemplo haremos uso de los valores: color, date, datetime, datetime-local, email, month, number

<form>
  COLOR:<input type="color"/><br><br>
  DATE:<input type="date"/> <br><br>
  DATETIME:<input type="datetime"/> <br><br>
  DATETIME-LOCAL:<input type="datetime-local"/> <br><br>
  EMAIL:<input type="email"/> <br><br>
  MONTH:<input type="month"/> <br><br>
  NUMBER:<input type="number"/>
</form>

Resultado:

Ejemplo 2.- en este segundo ejemplo haremos uso de los valores: search, tel, time, url, week y range.

<form>
  SEARCH:<input type="search"/><br><br>
  TEL:<input type="tel"/> <br><br>
  TIME:<input type="time"/> <br><br>
  URL:<input type="url"/> <br><br>
  WEEK:<input type="week"/> <br><br>
  RANGE:<input type="range"/> <br><br>
</form>

Resultado:

Atributos html5 para formularios

Así como tenemos nuevos tipos de campo, también se han  agregado otros atributos para controlar el resultado final de nuestros formularios.

• autocomplete.- cuando se establece autocomplete activado, el navegador trata de autocompletar los campos que el usuario está completando, basándose en su actividad en el navegador.
• required.- para campos requeridos, sirve para establecer de que el campo debe ser completado obligatoriamente, en caso contrario no será posible enviar la información del formulario.
• placeholder.- generalmente se usa para colocar en su valor un breve texto que indique al usuario el tipo de información que debe coloca en el campo. Se suele usar en elementos <input> y <textarea>
• autofocus.- sirve para enfocar automáticamente el campo deseado cuando el formulario se carga.
• size.- para establecer el tamaño de los campos, un número de caracteres para campos de texto.
• readonly.- sirve para que la información de un campo no pueda ser modificada, solo de lectura.
• disabled.- este atributo hace que un campo o control quede deshabilitado, de tal manera que no se puede hacer nada con ella.

Ejemplos de atributos HTML5

<form>
  Correo:<input type="email" placeholder="Escribe tu correo aquí."/> <br><br>
  Teléfono:<input type="tel" size="20" autofocus/> <br><br>
  Texto:<input type="text" value="No puedes editar esto." readonly/> <br><br>
  Número:<input type="number" disabled/> <br><br>
  </form>

Resultado:

Perfecto, es esta lección hemos conocido los nuevos elementos para crear formularios más interactivos en HTML, ahora te toca probarlos y practicar para reforzar tus conocimientos.

[popup_anything id=»4434″]