Formularios en html5

Anterior

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.

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.
Te recomendamos leer:  Etiqueta de vídeo HTML5 - Atributos y propiedades

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.
Te recomendamos leer:  Elipses SVG en HTML5

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.

Lecciones de HTML5
Anterior
0 0 votar
Calificación
guest
2 Comentarios
Más antiguo
Más nuevo Más votado
Comentarios en línea
Ver todos los comentarios
Norberto
Norberto
3 meses atrás

Muchas gracias por tanto. Es sumamente útil para quienes estamos iniciándonos en el desarrollo web, tener en una página tan bien condensado todos los temas.

Francisco Masloski
Francisco Masloski
1 mes atrás

Buenisimo tu curso completo, me alegra ver jóvenes tan capaces como tu.
Muy bien, aplausos.
Francisco – Chaco Argentina

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5

HTML5 comprende la continuación de HTML, aquí dispones de las lecciones para aprender HTML5.

Temario HTML5

1.- Introducción a curso HTML5
2.- Declaración de documento HTML5
3.- Categorías de contenidos HTML5

4.- Estructura de una pagina HTML5

5.- Etiqueta de audio HTML5 – Cómo crear un reproductor
6.- Etiqueta de vídeo HTML5 – Atributos y propiedades
7.- Barras de progreso en HTML5
8.- SVG en HTML5
9.- Lineas SVG en HTML5
10.- Polilineas en html5
11.- Rectángulos en svg HTML5
12.- Polígonos SVG en HTML5
13.- Círculos svg en html5
14.- Elipses SVG en HTML5
15.- Texto SVG en HTML5
16.- Animaciones SVG, Trazos y Canvas en html5
17.- Formularios en html5