Formularios en HTML 5
Introducción
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.
Formularios en HTML 5
autofocus
autofocus
Situa el cursor de manera activa en un <input> del formulario sin necesidad de pulsar en él
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
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
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
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
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
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
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
formenctype
Permite cambiar la codificación establecida en un formulario, tiene un funcionamiento y sintaxis similar al atributo formaction
Valores posibles: application/x-www-form-urlencoded, multipart/form-data, text/plain
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>
Formularios en HTML 5
formmethod
formmethod
Permite cambiar el método de envío de formularios, entre POST y GET
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
formnovalidate
Controla la validación de formularios. Permite decidir si los nuevos <input> HTML5 que contenga un formulario son validados automáticamente o no
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
formtarget
Elige el target de un formulario
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
height y width
Permiten modificar las dimensiones de la imagen que sustituye al botón de enviar formularios
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
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>
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
min y max
Permite fijar los valores mínimos y máximos de los <input> con valor numérico o de fecha
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
multiple
Se pueden seleccionar varios ficheros o emails en el envío de formularios, es compatible con los input de tipo file o email
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
novalidate
Anula la validación de entradas de formularios
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
pattern
Permite delimitar mediante expresiones regulares el contenido insertado por el usuario en los inputs
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
required
Permite establecer que un input de formulario sea de relleno obligatorio
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
step
Permite establecer el rango de intervalos para los valores de los los input de fecha y numérico
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
placeholder
Permite ver una leyenda dentro del <input>. Cuando el usuario comience a escribir sobre él este mostrará texto
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
output
<ouput> muestra el resultado de un cálculo en el formulario
Ejemplo:
Ampliar en:Quackit
<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>
Ampliar en:Quackit
Formularios en HTML 5
Nuevos tipos de entrada
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
Nuevos tipos de entrada
Ejemplo tipo color:
<form action="color.php"> <strong>Selecciona tu color preferido:</strong><br> <input type="color" name="favcolor" value="#ff0000"> <input type="submit"> </form><br>