Formularios en HTML 5

Desarrollo de Aplicaciones Web

Formularios en HTML 5

Hay múltiples razones para usar los nuevos atributos incorporados en el estándar HTML5 y algunas para no usarlos:


  • A favor: Importante ahorro de código combinando los nuevos input y atributos. No es necesario realizar tantas validaciones mediante PHP, jQuery o similares.


  • En contra: Aún hay elementos que no se representan en algunos navegadores, o usuarios sin actualizar el navegador.


A continuación se describen los atributos

Formularios en HTML 5

autofocus


Situa el cursor de manera activa en un <input> del formulario sin necesidad de pulsar en él


<input type="number" name="nombre" autofocus="autofocus">

Formularios en HTML 5

autocomplete


Permite recordar, autocompletar y/o sugerir los valores insertados anteriormente en el mismo formulario. Se puede aplicar a los <input> o a todo el formulario.
Admite dos valores: on para activar autocomplete y off para desactivarlo


<form action="#" autocomplete="on">
     Nombre: <input type="text" name="nombre" autocomplete="on"/>
     Apellidos: <input type="text" name="apellidos" autocomplete="off" />
</form>

Formularios en HTML 5

form


Con este atributo (no confundir con la etiqueta) no es obligatorio que los <input> de un formulario estén dentro del mismo. Los formularios deberán tener un <id> asignado y los input referenciarán a ese <id> para relacionarse


<form action="form-html5.php" id="formulario" method="POST">
     Nombre: <input type="text" name="nombre"><br>
     <input type="submit" value="Enviar">
</form>
Apellidos: <input type="text" name="apellidos" form="formulario">

Formularios en HTML 5

formaction


Permite cambiar ‘action‘ de un formulario en función del botón que se pulse.

Funciona agregando este atributo a los <input> de tipo ‘submit’, en caso de pulsar uno de estos <input> action será el que tenga definido el <input>. En el caso opuesto se hará el action que tenga asignado el formulario


<form action="ejemplo-action1.php">
   Nombre: <input type="text" name="nombre"><br>
   Apellidos: <input type="text" name="apellidos"><br>
  <input type="submit" value="Por defecto"><br>
  <input type="submit" formaction="ejemplo-action2.php" value="Nuevo action">
</form>

Formularios en HTML 5

formenctype


Permite cambiar la codificación establecida en un formulario, tiene un funcionamiento y sintaxis similar al atributo formaction


<form enctype="multipart/form-data">
    <input type="submit" value="Enviar" formenctype="application/x-www-form-urlencoded">
</form>

Valores posibles: application/x-www-form-urlencoded, multipart/form-data, text/plain

Formularios en HTML 5

formmethod


Permite cambiar el método de envío de formularios, entre POST y GET


<form action="ejemplo-formmethod-html5.php" method="post">
  	Introducir nombre: <input type="text" name="nombre"/>
	Introducir edad: <input type="number" name="edad"/>
  	<input type="submit" formmethod="get" value="Enviar con GET">
  	<input type="submit" value="Enviar con POST">
</form>

Formularios en HTML 5

formnovalidate


Controla la validación de formularios. Permite decidir si los nuevos <input> HTML5 que contenga un formulario son validados automáticamente o no


<form action="ejemplo-formnovalidate-html5.php" method="POST">
    Nombre: <input type="text" name="nombre">
    Edad: <input type="number" name="edad">
    Fecha nacimiento: <input type="date" name="nacimiento">
    <input type="submit" value="Enviar">
    <input type="submit" formnovalidate="formnovalidate" value="Enviar sin validación">
</form>

Formularios en HTML 5

formtarget


Elige el target de un formulario


<form action="ejemplo-formtarget-html5.php" method="POST">
	Nombre: <input type="text" name="nombre">
	<input type="submit" formtarget="_blank" value="Enviar con target blank">
	<input type="submit" value="Enviar">
</form>

Formularios en HTML 5

height y width


Permiten modificar las dimensiones de la imagen que sustituye al botón de enviar formularios


<form action="ejemplo-height-width-html5.php" method="POST">
	Nombre: <input type="text" name="nombre"><br><br>
	<input type="image" src="html5.png" alt="Enviar" width="100" height="70">
</form>

Formularios en HTML 5

list


Es el id de un elemento <datalist> cuyo contenido, los elementos <option>, van a ser usados como ayudas y serán mostrados como propuestas en el área de sugerencias del campo <input>. De uso en las etiquetas <datalist> y <option>


<form name="formulario" id="formulario" action="list-html5.php" method="POST">
<!-- datalist con id 'listas' y diferentes valores -->

Escribe un color (Azul, rojo, amarillo, negro, verde):
<datalist id="listas">
    <option value="azul">
    <option value="rojo">
    <option value="amarillo">
    <option value="negro">
    <option value="verde">
</datalist>

<!-- Asociamos al input la datalist 'listas' -->
    <input name="color" list="listas">  <input type="submit" value="Enviar">
</form>

Formularios en HTML 5

min y max


Permite fijar los valores mínimos y máximos de los <input> con valor numérico o de fecha


<form name="formulario" id="formulario" action="ejemplo-min-max-html5.php" method="POST">
	<input type="date" name="dia" min="2010-01-01" max="2016-12-31">
	<input type="number" name="cantidad" min="1" max="100">
</form>

Formularios en HTML 5

multiple


Se pueden seleccionar varios ficheros o emails en el envío de formularios, es compatible con los input de tipo file o email


<input type="file" name="archivos" multiple="multiple" />
<input type="email" name="emails" multiple="multiple" />

Formularios en HTML 5

novalidate


Anula la validación de entradas de formularios


Novalidate: Se aplica a los <input> de formularios, no se validarán

Formnovalidate: Se aplica a la etiqueta <form>, ningún elemento HTML5 se validará al enviar el formulario


<form name="formulario" id="formulario" action="ejemplo-novalidate-html5.php" method="POST">
	Fecha de nacimiento (1-1-1900 a 1-4-2016): <input type="date" name="dia" min="1900-01-01" max="2016-04-01"  novalidate="true">
	<input type="submit" value="Enviar">
</form>
<form name="formulario2" id="formulario2" action="ejemplo-novalidate-html5.php" method="POST">
	Fecha de nacimiento (entre 1-1-1900 y 1-4-2016): <input type="date" name="dia" min="1900-01-01" max="2016-04-01"  novalidate="false">
        <input type="submit" value="Enviar">
</form>

Formularios en HTML 5

pattern


Permite delimitar mediante expresiones regulares el contenido insertado por el usuario en los inputs


<input type="text" name="pueblo" pattern="[A-Za-z]{4-16}">

Formularios en HTML 5

required


Permite establecer que un input de formulario sea de relleno obligatorio


<form action="ejemplo-required-html5.php" method="POST">
	Fecha de nacimiento: <input type="date" name="fechanac" required>
	<input type="submit" value="Enviar">
</form>

Formularios en HTML 5

step


Permite establecer el rango de intervalos para los valores de los los input de fecha y numérico


Edad: <input type="number" name="numero" step="5">
Fecha de nacimiento: <input type="date" name="fechanac" step="1">

Formularios en HTML 5

placeholder


Permite ver una leyenda dentro del <input>. Cuando el usuario comience a escribir sobre él este mostrará texto


<input type="text" name="nombre" placeholder="inserta tu nombre">

Formularios en HTML 5

output


<ouput> muestra el resultado de un cálculo en el formulario


Ejemplo:

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
  <input type="range" id="a" value="50">100   +<input type="number" id="b" value="50">
  =<output name="x" for="a b"></output>
</form>
0 100 + =

Ampliar en:Quackit

Formularios en HTML 5

Nuevos tipos de entrada:


<input type="email" />
<input type="url" />
<input type="date" />
<input type="time" />
<input type="datetime" />
<input type="month" />
<input type="week" />
<input type="number" />
<input type="range" />
<input type="tel" />
<input type="search" />
<input type="color" />

Formularios en HTML 5

Ejemplo tipo color:


Selecciona tu color preferido:

<form action="color.php">
  <strong>Selecciona tu color preferido:</strong><br>
  <input type="color" name="favcolor" value="#ff0000">
  <input type="submit">
</form><br>