Escuela Técnica Superior Departamento de Lenguajes y

Formularios en HTML 03/02/2017

IISSI 1

Escuela Técnica Superior

de Ingeniería Informática

Departamento de Lenguajes

y Sistemas Informáticos

1.1. Conceptos básicosConceptos básicos

2.2. Elemento <Elemento <formform>>

3.3. GetGet y Posty Post

4.4. Elemento <input>Elemento <input>

5.5. Elemento <Elemento <selectselect>>

6.6. Elemento <Elemento <textareatextarea>>

7.7. Elemento <Elemento <buttonbutton>>

8.8. Elemento <Elemento <datalistdatalist>>

9.9. Elemento <Elemento <fieldsetfieldset>>

10.10. Elemento <Elemento <labellabel>>

11.11. Validación de Validación de

FormulariosFormularios

© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1





© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

Grupo de Ingeniería del Software y Bases de Datos

Departamento de Lenguajes y Sistemas Informáticos

Universidad de Sevilla

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1Formularios en HTML

• ¿Qué es un formulario?

Introducción a la Ingeniería del Software y a los Sistemas de Información 1


IISSI 2

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• Conceptos básicos de formularios HTML– Los formularios permiten enviar información al servidor web mediante

una interfaz de usuario muy básica.

– El procesamiento de un formulario se realiza mediante CGIs o

mediante alguna tecnología de procesamiento en servidor (ASP, PHP,

JSP, servlets, etc.).

– Se pueden validar datos en el cliente mediante el uso de JavaScript.

2: Formulario (HTTP response)

3: Datos del form. (HTTP request)

4: Respuesta del procesamiento (HTTP response)

1: URL del formulario (HTTP request)


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• Elemento para formularios


<<formform id="identificador único para procesado en cliente"id="identificador único para procesado en cliente"

actionaction="URL de CGI, ASP, PHP, JSP, ..."="URL de CGI, ASP, PHP, JSP, ..."

methodmethod="="get|postget|post""

enctypeenctype="="multipartmultipart//formform--data|textdata|text//plainplain""

target="target="frameframe o ventana para la respuesta"o ventana para la respuesta"

>>

<input .../><input .../>

<<selectselect ...>...>

<<optionoption>...</>...</optionoption>>......

</</selectselect>>

<<textareatextarea>... </>... </textareatextarea>>

<<buttonbutton …>…</…>…</buttonbutton>>

<<fieldsetfieldset …>…</…>…</fieldsetfieldset>>

<<labellabel …>…</…>…</labellabel>>

</</formform>>


IISSI 3

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• Atributos de <form>– id: identifica al formulario para poder acceder a él desde código

JavaScript de cliente.

– action: URL de la aplicación que procesará los datos del formulario (un CGI, una página ASP, PHP, JSP, un servlet,…). En XHTML es obligatorio, en HTML si no se especifica se asume que es la propia página. Puede ser también mailto:nombre@dirección si se quieren enviar los datos por correo electrónico.

– enctype: tipo de codificación de los datos. Si se van a enviar ficheros adjuntos debe ser multipart/form-data o text/plain si se va a enviar por correo. El valor por defecto es application/x-www-form-urlencoded, que convierte espacios en +, caracteres con código mayor de 127 en %HH (hexadecimal), retornos de carro en %0D%0A y + en %2B.

– target: nombre de marco o de ventana en el que se mostrarán los resultados del procesamiento del formulario (por defecto _self).

– novalidate: indica al navegador que no se desea validar el formulario (en cliente)

– autocomplete: indica al navegador si debe ofrecer o no autocompletar el formulario. Por defecto es “on”.


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• Atributo method de <form>

– Especifica cómo se van a enviar los datos del formulario.

Puede tomar dos valores: post y get. Por defecto el valor es

get.

• Método GET

– Los datos se añaden a la URL especificada en action

después del carácter ? en parejas nombre=valor separadas

por &:

http://www.ejemplo.com/x.asp?nombre=Pepe&apellido=P%E9rez

• Método POST

– Primero se establece una conexión con la URL especificada

en action y a continuación se envían los datos.

– Si se quieren enviar archivos adjuntos al servidor es la

única opción.



IISSI 4

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• ¿GET o POST?– Para formularios con pocos datos, GET es algo más

eficiente. Para formularios con muchos datos, es mejor POST. Algunos servidores tienen un límite en la longitud de las URL.

– Con GET, los valores de los datos se ven directamente en la URL. Con POST, si se establece una conexión segura

(HTTPS), los datos viajan encriptados.

– La única forma de añadir valores a la URL de un enlace es mediante GET:

<a href="consulta.php?idioma=es">Consulta</a>– De esta forma podemos invocar aplicaciones sin usar un

formulario.

– El procesamiento en servidor es prácticamente el mismo para los dos métodos en la mayoría de los entornos (ASP, PHP, JSP, etc.).


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• Elemento para controles de entrada de datos<input<input namename="nombre para procesamiento en servidor"="nombre para procesamiento en servidor"

typetype="="button|checkbox|file|hidden|imagebutton|checkbox|file|hidden|image||

password|radio|reset|submit|textpassword|radio|reset|submit|text||

email|url|search|tel|number|rangeemail|url|search|tel|number|range||

date|month|week|time|date|month|week|time|colorcolor

……..././>>

text

password

checkbox

radio

file

submit

hidden



IISSI 5

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• Elemento para controles de entrada de datos<input<input namename="nombre para procesamiento en servidor"="nombre para procesamiento en servidor"


password|radio|reset|submit|textpassword|radio|reset|submit|text||

email|url|search|tel|number|rangeemail|url|search|tel|number|range||

date|month|week|time|date|month|week|time|colorcolor

……..././>>


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• Elemento para controles de entrada de datos


<input<input namename="nombre para procesamiento en servidor"="nombre para procesamiento en servidor"

id="id="identident. único para procesamiento en cliente". único para procesamiento en cliente"


password|radio|reset|submit|password|radio|reset|submit|texttext||

email|url|search|tel|number|range|coloremail|url|search|tel|number|range|color||

datetimedatetime--local|date|month|week|timelocal|date|month|week|time""

valuevalue="valor por defecto o texto de botón"="valor por defecto o texto de botón"

sizesize="tamaño del campo de texto"="tamaño del campo de texto"

maxlengthmaxlength="tamaño máximo del campo"="tamaño máximo del campo"

checkedchecked ((sólo para sólo para checkboxcheckbox y radioy radio))

titletitle="texto para el ="texto para el tooltiptooltip””

disableddisabled readonlyreadonly autofocus autofocus requiredrequired novalidatenovalidate

patternpattern=“=“expresionRegularexpresionRegular””

placeholderplaceholder=“texto para guiar al usuario”=“texto para guiar al usuario”

/>/>


IISSI 6

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• Atributos de <input>– name: indica el nombre del valor que se le envía al servidor

(name=value). Si no se especifica name, el valor del control no se envía.

– id: identificador que se usa para acceder al control desde código JavaScript o aplicar estilo CSS

– type: indica el tipo de control.

– value: indica el valor que se envía al servidor en el par nombre=valor. El algunos casos, value se usa como el texto de un botón.

– disabled: si está presente, el control está deshabilitado.

– readonly: si está presente, el control es de sólo lectura.

– size: indica el tamaño en caracteres de los controles de entrada de texto.

– maxlength: indica el número máximo de caracteres que aceptará un control de entrada de texto.

– checked: si está presente, las casillas de verificación (checkbox) y los botones radio (radio), aparecen seleccionados.

– title: añade información al control, normalmente visualizada como un tooltips.


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• Atributos de <input>

– autofocus: coloca el foco en el elemento

– required: califica el campo como obligatorio

– novalidate: el navegador no validará el campo

– pattern: expresión regular que debe cumplir el

contenido ingresado por el usuario

– placeholder: texto que aparece para indicar al

usuario lo que se espera que ingrese en ese campo



IISSI 7

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• <input … type="button"/>– Genera un botón con el texto que indique el atributo value. Sólo tiene

sentido si se gestiona el evento de pulsación en JavaScript.

– El elemento <button> lo ha convertido en obsoleto.

• <input … type="checkbox"/>– Genera una casilla de comprobación que sólo se envía al servidor si está

pulsada. El atributo checked hace que aparezca como seleccionada.

– El atributo value no genera texto, y si no se especifica el valor por defecto es

on.


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• <input … type="file"/>– Genera un control para enviar (upload) archivos al servidor. Se debe usar

con formularios que tengan enctype="multipart/form-data" y method="post"

sino, envía sólo el nombre del archivo.

• <input … type="image" src="URL imagen" />

– Genera una imagen que al pulsarse hace que se envíe el formulario,

incluyendo las coordenadas dónde se pulsó el ratón como nombre.x y

nombre.y.

– Es la forma de implementar los mapas en el servidor.



IISSI 8

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• <input … type="hidden"/>– Genera un campo oculto del formulario (no se visualiza) que siempre se envía

al servidor, por lo que name y value son obligatorios.

– Es útil para la programación de aplicaciones web (como las cookies).

• <input … type="password"/>– Genera una campo de texto en el que no se muestra el texto escrito.

– No implica que el envío de los datos esté encriptado, si se envía con GET

se ve el valor directamente.


***

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• <input … type="radio"/>– Genera un botón radio (1 de n). Todos los botones radio que tengan el mismo

valor de name forman un grupo. Al servidor se le envía sólo el value del botón

seleccionado.

– El atributo value no genera texto. El atributo checked hace que aparezca como

seleccionado (sólo uno).

• <input … type="reset"/>– Genera un botón para inicializar el formulario con los valores por defecto (los

especificados en value).

– Para el texto del botón se puede usar value. Si no se especifica, los navegadores

usan su propio texto por defecto. No necesita name.



IISSI 9

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• <input … type="submit"/>– Genera un botón para enviar los datos al servidor.

– Para el texto del botón se puede usar value o dejar al navegador decidir. No

necesita name a menos que se quieran poner varios en un mismo

formulario con distintos value y así saber cual se pulsó

(Añadir/Modificar/Borrar).

• <input … type="text"/>– Es el tipo por defecto. Genera un campo de texto de longitud máxima

maxlength y de tamaño en pantalla size.

– Se puede mostrar el contenido esperado con el atributo placeholder

– Se puede usar value para darle un valor por defecto.


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• <input … type=”email"/>– Genera un campo de texto donde se espera una dirección de correo.

– Útil para que el navegador valide que el contenido es una dirección de

correo bien formada. Algunos navegadores en dispositivos móviles

ofrecerán un teclado adaptado al contenido esperado.

• <input … type=”url"/>– Genera un campo de texto donde se espera una url. (esquema://xxxx)

– Útil para que el navegador valide que el contenido es una url bien formada.

Algunos navegadores en dispositivos móviles ofrecerán un teclado

adaptado al contenido esperado.



IISSI 10

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• <input … type=”search” />– Genera un campo de texto donde se espera palabras clave a buscar.

– Algunos navegadores renderizan el cuadro de una manera distinta (bordes

redondeados) y aparece un icono para borrar el contenido.

• <input … type=”tel” />– Genera un campo de texto donde se espera un número de teléfono.

– Debido a la variedad de formatos para los números de teléfono, los

navegadores no realizan ninguna validación. Algunos navegadores en

dispositivos móviles pueden presentar un teclado específico.


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• <input … type=”number"/>– Genera un campo de texto donde se espera un valor numérico.

– Se pueden establecer condiciones a los valores aceptados:

• min: valor mínimo aceptable

• max: valor máximo aceptable

• step: paso entre un valor aceptable y el siguiente

– Ejemplo, campo que recoge el peso de un paquete que se desea enviar (se

supone que el peso máximo es 10kg y el sistema requiere conocerlo con

precisión de un decimal.

• <input … type=”range"/>– Genera una barra de ajuste (slider).

– Acepta los mismos atributos que el input de tipo “number”.


<input id=“peso” <input id=“peso” typetype=“=“numbernumber” min=“0” ” min=“0” maxmax=“10” =“10” stepstep=“0.1”>=“0.1”>


IISSI 11

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• <input … type=”color"/>– Genera un selector de colores.

– El color seleccionado por el usuario se envía en formato hexadecimal.


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• <input … type=”datetime-local|date|month|week|time” />– Generan un selector de fechas.

– Evitan el ingreso de fechas incorrectas.



IISSI 12

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• Elemento de selección de valores

– Alternativa a los radio si hay muchas opciones.

– Los atributos name, id, disabled y title tiene el mismo significado que en <input>.


<<selectselect namename="nombre para procesamiento en servidor"="nombre para procesamiento en servidor"


sizesize="1..n"="1..n"

multiplemultiple

disableddisabled

titletitle="texto para el ="texto para el tooltiptooltip""

>>

<<optionoption selectedselected>>ValorValor11</</optionoption>>

<<optionoption valuevalue="="valuevalue">Valor">Valor22</</optionoption>>

......

<<optionoption>>ValorValornn</</optionoption>>

</</selectselect>>

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• Atributos de <select>– multiple: si está presente, indica que se permite seleccionar más de

una opción, que llega al servidor como:

name=value1&name=value2&…&name=valueN

El atributo multiple hace que el control se visualice como una

lista aunque size sea 1. Por defecto, la selección es simple.

– size: indica el número de opciones visualizadas a la vez. Por defecto, el

valor de size es 1. Si size=1 y no es multiple, se visualiza como un

combobox, si no, se visualiza como una lista de tamaño size.



IISSI 13

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• Atributos de <option>– value: si se especifica, es el valor que se envía al servidor, si no, se

envía el contenido de la etiqueta.

– selected: indica las opciones seleccionadas por defecto. Si no se

especifica, es la primera opción.

• Elemento <optgroup>– Permite agrupar opciones y darles un nombre mediante su atributo

label.


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• Elemento de campos de texto libre


<<textareatextarea namename="nombre para procesamiento en servidor"="nombre para procesamiento en servidor"


colscols="columnas de ancho" ="columnas de ancho" rowsrows="filas de alto"="filas de alto"

disableddisabled>>

Texto por defecto.Texto por defecto.

</</textareatextarea>>

– Los atributos cols y rows indican respectivamente el número de columnas y de filas del área de texto que se visualizará.

– Los valores de cols y rows se interpretan como número de caracteres (aproximado).

– El contenido de la etiqueta se toma como valor por defecto.


IISSI 14

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• Elemento de botón


<<buttonbutton namename="nombre para procesamiento en servidor"="nombre para procesamiento en servidor"

id="id="identident. único para procesamiento en servidor". único para procesamiento en servidor"

valuevalue="valor para enviar al servidor"="valor para enviar al servidor"

typetype="="submit|reset|buttonsubmit|reset|button""

disableddisabled>>

<!>

</</buttonbutton>>

– Permite botones con contenido complejo, no sólo texto, sino cualquier contenido HTML, incluyendo imágenes o texto con formato.

– El atributo type indica el uso del botón, por defecto button, que equivale a <input type="button">.

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• Elemento <datalist>


<input id="<input id="movilFavoritomovilFavorito" " namename="="movilFavoritomovilFavorito" " typetype="="texttext" " listlist="="opcionesMovilesopcionesMoviles”>”>

<<datalistdatalist id="id="opcionesMovilesopcionesMoviles">">

<<optionoption labellabel="Samsung" ="Samsung" valuevalue="="samsungsamsung">">

<<optionoption labellabel="Apple" ="Apple" valuevalue="="appleapple">">

……

</</datalistdatalist>>

– Permite generar sugerencias para un campo de texto ordinario.

– El atributo list indica la lista de sugerencias asociada con este input


IISSI 15

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Formularios en HTML

• Elemento de grupo de controles


<<fieldsetfieldset>>

<<legendlegend alignalign="="left|rightleft|right">">

Título del grupoTítulo del grupo

</</legendlegend>>

<!>

</</fieldsetfieldset>>

<<fieldsetfieldset>>

<<legendlegend alignalign="="left|rightleft|right">">

Título del grupoTítulo del grupo

</</legendlegend>>

<!>

</</fieldsetfieldset>>

– Crea un marco alrededor de un grupo de controles.

– La etiqueta legendpermite especificar el título del grupo con formato HTML.

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201


• Elemento de etiqueta de campo


<!>

<<labellabel forfor="id. de control">="id. de control">

Texto etiquetaTexto etiqueta

</</labellabel>>

<!<!–– control con id control con id ---->>

<!>

<<labellabel>>


<!>

</</labellabel>>

<!>

<<labellabel forfor="id. de control">="id. de control">


</</labellabel>>

<!<!–– control con id control con id ---->>

<!>

<<labellabel>>


<!>

</</labellabel>>

– Permite indicar explícitamente la etiqueta o título de un control de un formulario.

– Está pensado para navegadores para discapacitados, que pueden leer en voz alta una página HTML.

– Se puede usar de dos formas, indicando la etiqueta y luego el control mediante el atributo for, o bien haciendo al control hijo de <label>.

– No tiene una representación concreta, aunque se le pueden aplicar hojas de estilo.


IISSI 16

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Validación de formularios

• Es necesario validar los datos que el usuario ingresa en los formularios

• La validación ha de realizarse en cliente y en servidor

• En cliente se realiza la validación a través de las herramientas que integra HTML desde la versión 5 y/o con Javascript.– Con HTML5 se pueden realizar las validaciones más

comunes

– Con JavaScript pueden además realizarse validaciones más complejas.


















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1Validación de formularios con HTML

• Con HTML5 se indica donde se desea realizar validación, pero no es necesario implementar todos los detalles.

• Validación por tipo de campo:– Los input de tipo email, url, number, range, date, etc.

realizan la validación básica. Ejemplos:• email: el contenido debe ser un conjunto de caracteres + @

+ otro conjunto de caracteres.

• url: schema://dominio

• number: sólo se admiten números

• date: sólo se admiten fechas válidas



IISSI 17

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Validación de formularios con HTML

• Validación de campos obligatorios:– Para marcar qué campos es establecen como

obligatorios basta con incluir el atributo required en los campos obligatorios


<<input .. input .. requiredrequired >><<input .. input .. requiredrequired >>

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1Validación de formularios con HTML

• Validación con expresiones regulares:

– Es la herramienta más potente de validación en HTML5

– En el atributo pattern se indica la expresión regular que

deben cumplir los valores introducidos en un campo.

– El contenido del atributo title es mostrado por el

navegador si los datos introducidos no son válidos

– Ejemplo: Validación simple de NIF.


<input <input typetype="="texttext" " placeholderplaceholder="12345678X" ="12345678X"

patternpattern="^[0="^[0--9]{8}[A9]{8}[A--Z]"Z]"

titletitle="Ocho dígitos seguidos de una letra ="Ocho dígitos seguidos de una letra mayúscula” >mayúscula” >

<input <input typetype="="texttext" " placeholderplaceholder="12345678X" ="12345678X"

patternpattern="^[0="^[0--9]{8}[A9]{8}[A--Z]"Z]"

titletitle="Ocho dígitos seguidos de una letra ="Ocho dígitos seguidos de una letra mayúscula” >mayúscula” >


IISSI 18

















© D

iseñ

o de

Am

ador

Dur

án T

oro,

201

1

Validación de formularios con HTML

• Validación avanzada (HTML+Javascritp):

– Custom validation


<<textareatextarea id="id="commentscomments” ” oninputoninput="="validarComentariosvalidarComentarios((thisthis)")">>

<<//textareatextarea>>

<<textareatextarea id="id="commentscomments” ” oninputoninput="="validarComentariosvalidarComentarios((thisthis)")">>

<<//textareatextarea>>

<script><script>

functionfunction validarComentariosvalidarComentarios(input) {(input) {

ifif ((input.value.lengthinput.value.length <= 30) {<= 30) {

input.setCustomValidityinput.setCustomValidity("Por favor, realice ("Por favor, realice un comentario más detallado (>30 un comentario más detallado (>30 caracteres)")caracteres)");};}

elseelse { { // No hay error, limpiar los mensajes.// No hay error, limpiar los mensajes.

input.setCustomValidityinput.setCustomValidity(("”); }"”); }

}}

</script></script>

<script><script>

functionfunction validarComentariosvalidarComentarios(input) {(input) {

ifif ((input.value.lengthinput.value.length <= 30) {<= 30) {

input.setCustomValidityinput.setCustomValidity("Por favor, realice ("Por favor, realice un comentario más detallado (>30 un comentario más detallado (>30 caracteres)")caracteres)");};}

elseelse { { // No hay error, limpiar los mensajes.// No hay error, limpiar los mensajes.

input.setCustomValidityinput.setCustomValidity(("”); }"”); }

}}

</script></script>

Documents

Escuela Técnica Superior Departamento de Lenguajes y