FJordan Formularios HTML5

F.A.F.I.
Formularios en HTML 5 Sistemas de Información.

F.A.F.I.
Formularios en HTML. Sistemas de Información.
Introducción.
Hasta ahora hemos utilizado el HTML 5 como un lenguaje para presentar

de contenidos tales como: imágenes, textos, listas, tablas, etc. con los
cuales el usuario interactúa con ese contenido pero sin participar.
Sin embargo con los Formularios podemos recibir datos del usuario:
nombre, apellidos, números, valores [true|false], email, ficheros...
F.A.F.I.
Todo Formulario se encuentra

contenido dentro de una
etiqueta <form>. Funciona
como un contenedor de los
distintos campos que
conforman el formulario.
En sí no tiene estilos visibles, siendo una etiqueta de bloque.

Tiene los siguientes atributos:
F.A.F.I.
ATRIBUTOS DESCRIPCIÓN
action=“URL” Indica hacia donde enviaremos los datos recogidos por el formulario.
method=“POST|GET” Indicamos el modo que se va emplear para enviar los datos.
Tipo de codificación en la que se envía el formulario. Generalmente no se
enctype
indica salvo en el caso que enviemos ficheros adjuntos.
Establecemos la codificación de los datos contenidos, que por defecto
accept-charset = “UTF-8”
coincide con el del documento HTML.
Es una buena práctica asignar siempre un identificador o un name a un
name o id
formulario. Para así identificarlo y poder realizar validaciones previas en JS
Permite autocompletar datos del formulario en función de datos
autocomplete = “on”
previamente introducidos por el usuario.
novalidate Permite desactivar la validación de formularios en HTML5.
F.A.F.I.
Diferencias entre enviar por GET y POST.

POST permite enviar más información que GET (el límite de la URL).
POST permite enviar ficheros adjuntos. GET no permite.
Los datos por POST se almacenan en la cabecera HTTP. Los de GET en la
URL.
Aunque no existe un modo 100% seguro, se considera POST más seguro dado
que envía los datos dentro de la cabecera HTTP; mientras que los datos
enviados por GET aparecen en la URL y son más fácilmente visibles.
F.A.F.I.
F.A.F.I.
Etiqueta
<input>
La etiqueta <input> nos permite incluir los distintos controles del
formulario o campos donde poder introducir los datos.
Es una etiqueta simple por lo que en HTML se escribe <input/>
Existen 10 tipos de campos distintos en HTML y aún más con HTML 5:
Campos HTML
text password checkbox radio submit reset file hidden imagen button
F.A.F.I.
Etiqueta
Es el tipo de campo más común. Se muestra
<input>
type=”text” un texto vacío en donde usuario puede escribir
texto.
F.A.F.I.
Etiqueta
Como su propio nombre indica se utiliza para
<input>
type=”password” escribir contraseñas o contenido que no
queramos que se vea en pantalla.
F.A.F.I.
Etiqueta
Son casillas de verificación que permiten al
<input>
type=”checkbox” usuario seleccionar una o varias opciones. Son
campos independientes unos del otro.
F.A.F.I.
Etiqueta Los elementos de este tipo son similares a los

<input> checkbox pero con la distinción de que son
type=”radio”
excluyentes. Cuando se selecciona una opción
automáticamente se desmarca la otra.
El atributo checked permite indicar
que opción aparece preseleccionada.
[radio – checkebox].
Es importante destacar que dado que son excluyentes usan el mismo

atributo name.
F.A.F.I.
Etiqueta En ocasiones nos podemos encontrar con

<input>
formularios especialmente complejos que
type=”button”
necesitan más botones que un reset o un
enviar. (Por ejemplo una calculadora).
Los botones en sí no realizan acciones en concreto sino que sirven como disparadores de funciones JavaScript.
F.A.F.I.
Etiqueta
<input> Genera un botón para enviar los datos del
type=” submit”
formulario.
F.A.F.I.
Etiqueta
<input> Genera un botón para enviar los datos del
type=” reset”
formulario.
F.A.F.I.
Etiqueta Por medio de este tipo de campo podemos incluir

<input>
archivos para ser subidos al servidor. En HTML no
type=” existe ninguna limitación para en formatos y tamaño
file” de los archivos a subir. Sin embargo todos los
servidores incluirán un límite (generalmente entre 2
y 8 Megabytes) en el tamaño de los ficheros.
Los formularios que adjunten ficheros
tendrán el atributo enctype o no
funcionarán.
F.A.F.I.
Etiqueta
En alguna ocasión nos puede interesar sustituir
<input> type=”
un botón por una imagen sobre la que podamos
images”
hacer click.
Posteriormente se le añadirá por medio JS una
acción, probablemente un submit ( );
F.A.F.I.
Etiqueta En ciertos casos será necesario pasar datos en

<input>
el formulario no visibles para el usuario
(aunque aparecerán en código HTML visibles).
type=” hidden”
Generalmente son datos necesarios para la
gestión, controles de seguridad o bien que ya
se le han preguntado al usuario.
F.A.F.I.
Atributos Nos permite especificar el orden que

<input> seguiremos en la selección de un campo de
tabindex = ”numero”
formulario cuando pulsemos la tecla de
tabulador.
Nos permite incluir una descripción sobre el
placeholder=”va
uso del campo en los tipos <input
lor”
type=“text”>.
Tamaño del control, campos de texto y de
password se refiere al número de
size=”tamaño”
caracteres, en el resto se refiere a su
tamaño en píxel.
F.A.F.I.
Atributos
<input> maxlength=”tama Máximo número de caracteres para los
ño” controles de texto y de password.
El elemento input aparece desactivado y no
es posible interactuar con él. Por ejemplo
readonly
un botón de submit. No se envían sus
datos.
Hasta que el campo no ha sido completado
required
no se puede enviar el formulario.
F.A.F.I.
Agrupación de Elementos.
En los formularios podemos agrupar varios elementos de control o
campos mediante el tag <fieldset>. Semánticamente es una buena
práctica. Además podemos definir el nombre de la agrupación con el
elemento <legend>.
F.A.F.I.
Formularios en HTML 5. Sistemas de Información.
Etiqueta
En HTML5 se ha introducido el tag o etiqueta <button> como un
<button>
elemento independiente, pero que también se puede incluir en
formularios. Se trata de un tag doble. Su sintaxis es:
Entre otros atributos cuenta también con el type=”reset” y

type=”submit” por lo que se puede utilizar dentro de formularios.
F.A.F.I.
Etiqueta
La etiqueta <output> se incluye en el estandar HTML5 como
<output>
un elemento en el que se muestra el resultado de una
operación. No soportada por Internet Explorer.
F.A.F.I.
Etiqueta La etiqueta <textarea> se utiliza cuando se debe de introducir

<textarea> una gran cantidad de texto, dado que se puede especificar
altura y anchura.
Se utilizan los atributos row= y cols= para dotar de altura y

anchura en líneas o columnas al elemento.
F.A.F.I.
Etiqueta
Los denominados campos <select> visualmente tienen la apariencia
<select>
de listas de elementos u opciones.
Realmente no aportan una funcionalidad muy distinta de las que

podamos obtener con los checkbox o los radiobutton.
Se compone de un contenedor <select> y tantos elementos

<option> como posibles valores o alternativas que queramos
contener.
F.A.F.I.
Etiqueta
<select>
Lista con un sólo elemento visible.
F.A.F.I.
Etiqueta
<select>
Lista con selección múltiple de elementos.
F.A.F.I.
Etiqueta En los campos <select> podemos además agrupar opciones

<select> visualmente con <optgroup>.
F.A.F.I.
Nuevos tipos <input> en HTML 5. Sistemas de Información.
Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una

muy interesante son los nuevos valores para el atributo type del
elemento input.
Estos nuevos tipos de campos hacen que los navegadores adopten

distintos comportamientos que, sin duda nos van a hacer la vida más
fácil a los desarrolladores de sitios web.
F.A.F.I.
type
Para definir campos de búsqueda. Al ingresar texto en el campo, el
“search”
navegador muestra una cruz a la derecha para borrar todo lo que
hemos escrito.
<body>
<form name="miformulario" action="LonuevoHTML5.php" method="POST">
Buscar en Google:
<input type="search" name="googlebuscar">
</form>
</body>
F.A.F.I.
type
Se utiliza para campos de entrada que deben contener un número
“tel”
de teléfono.
<body>
Telefono:
<input type="tel" name="fono" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" required>
<input type="submit">
<span>Formato es: 099-326-9378</span>
</form>
</body>
F.A.F.I.
type Podemos enviar enteros, estableciendo un mínimo y un máximo

“number” como input de texto.

Cantidad (entre 1 y 5): <br/>
<input type="number" name="cantidad" min="1" max="5">
</form>
F.A.F.I.
type Podemos enviar enteros, estableciendo un mínimo y un máximo

“range” utilizando un control gráfico.

Puntos:
<input type="range" name="puntos" min="0" max="10">
</form>
F.A.F.I.
type Nos permite seleccionar desde un “color picker” un color y

“color” enviarlo como hexadecimal.

Seleccione su color favorito:
<input type="color" name="colorfavorito" value="#ff0000">
</form>
F.A.F.I.
type Nos permite seleccionar una fecha. En los navegadores más

“date” avanzados aparece un calendario.
Cumpleaños:
<input type="date" name="bday">
</form>
También puede utilizar los atributos: min y

max para agregar restricciones de fechas:
F.A.F.I.
type
“datetime Nos permite seleccionar fecha y hora (sin zona horaria).
-local”
Cumpleaños (fecha y hora):
<input type="datetime-local" name="bdaytime">
<input type="submit" value="Send">
</form>
F.A.F.I.
type Se utiliza para campos de entrada que deben contener una

“email” dirección de correo electrónico.

E-mail:
<input type="email" name="correo">
</form>
F.A.F.I.
type Se utiliza para campos de entrada que deben contener una

“url” dirección URL.

Ingrese la dirección web:
<input type="url" name="direccion_url">
</form>
F.A.F.I.
type
“week”, “time” Nos permiten seleccionar distintas unidades de tiempo.
“month”
Seleccione la semana:
<input type="week" name="semana">
</form>
F.A.F.I.
Nos permite vincular a un input de texto una lista de posibles

<datalist>
valores, lo que nos permite emular una funcionalidad de
autocompletado.

<input list="browsers" name="browsers">
<datalist id="browsers">
<option value="IE">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
F.A.F.I.
<datalist> Permite emular una funcionalidad de autocompletado.

F.A.F.I.

FJordan Formularios HTML5

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

FJordan Formularios HTML5

Cargado por

Copyright:

Formatos disponibles

F.A.F.I.

Formularios en HTML 5 Sistemas de Información.

Hasta ahora hemos utilizado el HTML 5 como un lenguaje para presentar

Todo Formulario se encuentra

En sí no tiene estilos visibles, siendo una etiqueta de bloque.

Diferencias entre enviar por GET y POST.

Etiqueta Los elementos de este tipo son similares a los

Es importante destacar que dado que son excluyentes usan el mismo

Etiqueta En ocasiones nos podemos encontrar con

Etiqueta Por medio de este tipo de campo podemos incluir

Etiqueta En ciertos casos será necesario pasar datos en

Atributos Nos permite especificar el orden que

Entre otros atributos cuenta también con el type=”reset” y

Etiqueta La etiqueta <textarea> se utiliza cuando se debe de introducir

Se utilizan los atributos row= y cols= para dotar de altura y

Realmente no aportan una funcionalidad muy distinta de las que

Se compone de un contenedor <select> y tantos elementos

Etiqueta En los campos <select> podemos además agrupar opciones

Dentro de la gran cantidad de novedades que nos ofrece el HTML5, una

Estos nuevos tipos de campos hacen que los navegadores adopten

type Podemos enviar enteros, estableciendo un mínimo y un máximo

<form name="miformulario" action="LonuevoHTML5.php" method="POST">

type Podemos enviar enteros, estableciendo un mínimo y un máximo

<form name="miformulario" action="LonuevoHTML5.php" method="POST">

type Nos permite seleccionar desde un “color picker” un color y

<form name="miformulario" action="LonuevoHTML5.php" method="POST">

type Nos permite seleccionar una fecha. En los navegadores más

También puede utilizar los atributos: min y

type Se utiliza para campos de entrada que deben contener una

<form name="miformulario" action="LonuevoHTML5.php" method="POST">

type Se utiliza para campos de entrada que deben contener una

<form name="miformulario" action="LonuevoHTML5.php" method="POST">

Nos permite vincular a un input de texto una lista de posibles

<form name="miformulario" action="LonuevoHTML5.php" method="POST">

<datalist> Permite emular una funcionalidad de autocompletado.

También podría gustarte