PDF de programación - 2.3 Formularios en HTML

Índice: Tema 2.3

2.3 Formularios en HTML
2.3.1 Creación y controles
2.3.2 Cuadros de texto
2.3.3 Botones de acción
ió
2.3.4 Casillas de verificación
2 3 4 C ill
ifi
2.3.5 Botones de radio
2.3.6 Listas de selección
2.3.7 Otros controles

d

Índice: Tema 2.3

2.3 Formularios en HTML
2.3.1 Creación y controles
2.3.2 Cuadros de texto
2.3.3 Botones de acción
ió
2.3.4 Casillas de verificación
2 3 4 C ill
ifi
2.3.5 Botones de radio
2.3.6 Listas de selección
2.3.7 Otros controles

d

2.3
2.3.1

FORMULARIOS EN HTML
CREACIÓN Y CONTROLES

 Interacción con el usuario

 Hasta ahora la única forma de interacción por parte del usuario consiste en la 

pulsación sobre hipervínculos.

 Un segundo nivel de interacción es el ofrecido por las páginas web con 

formularios.

 Los formularios son la herramienta que ofrece HTML para poder obtener 

información de un usuario que visita una página web y enviarla al servidor       
para su procesamiento.

 El usuario rellena el formulario escribiendo datos o seleccionándolos de entre 

varios posibles.

 Una vez completado, pulsa un botón para poner en marcha el envío de la 

información al servidor web.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

3

2.3
2.3.1

FORMULARIOS EN HTML
CREACIÓN Y CONTROLES

 Elementos de un formulario (1)

 Un formulario es una sección de un documento HTML que contiene elementos 

especiales que describen controles.

 Los controles de las páginas web son similares a los controles de los cuadros de 
diálogo de las aplicaciones que ya estamos acostumbrados a utilizar: botones, 
cuadros de texto, casillas de verificación, etc…

 Principales controles que contempla HTML (hay más):

• Cuadros de texto simples (de una sola línea)
• Cuadros de texto multilínea
• Botones de acción
• Casillas de verificación
ió
ifi
• Botones de radio
• Listas de selección

C ill

d

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

4

2.3
2.3.1

FORMULARIOS EN HTML
CREACIÓN Y CONTROLES

 Elementos de un formulario (2)

Cuadros de texto
Cuadros de texto
de una sola línea

Cuadro de texto
multilínea

Botones de radio

Lista de selección

Casillas de
verificación

Botones de acción

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

5

2.3
2.3.1

FORMULARIOS EN HTML
CREACIÓN Y CONTROLES

 Creación de un formulario

 El elemento <form> delimita el formulario completo: <form>...</form>
 Dentro del elemento <form> no sólo pueden colocarse elementos para controles 

del formulario, sino también elementos HTML no específicos para formularios 
(párrafos, encabezamientos, tablas, etc…).

 Normalmente, los elementos de los controles se mezclan convenientemente con 

otros tipos de elementos que describen su utilidad o los identifican.

 Un elemento de control describe la forma y el funcionamiento del control, pero no 

su utilidad o descripción.

 La descripción de la utilidad de un control se especifica colocando junto al control 

un texto adecuado.

 Los controles se configuran con los atributos.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

6

2.3
2.3.1

FORMULARIOS EN HTML
CREACIÓN Y CONTROLES

 Controles de un formulario (1)

 Muchos de los controles se crean con el elemento vacío <input>. Se diferencian 

por el valor dado al atributo type:
• Cuadro de texto simple (una línea): <input type="text"...
• Cuadro de contraseña: <input type="password"...
• Botón de radio: <input type="radio"...
• Casilla de verificación: <input type="checkbox"...
• Botón de acción: <input type="tipo"...
Tres tipos:   submit , reset , button
• Dato oculto: <input type="hidden"...
• Botón de imagen: <input type="image"...
• Cuadro de selección de archivo: <input type="file"...

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

7

2.3
2.3.1

FORMULARIOS EN HTML
CREACIÓN Y CONTROLES

 Controles de un formulario (2)

 Otros controles se crean con otros elementos:

• Cuadro de texto multilínea: <textarea ...
• Lista de selección: <select ...
• Etiqueta activa: <label ...

 El atributo  option sirve para crear las opciones de una lista de selección dentro 

p

p

p
del correspondiente elemento <select>.

 Exceptuando las etiquetas activas y los botones de tipo submit y reset, todos los 

p

p

q

y

y

,

demás controles de un formulario deben estar identificados con un nombre que 
se establece con el atributo name.

 El nombre asignado a un control sirve para identificar el resultado de la 

interacción del usuario con ese control al enviar la correspondiente información al 
servidor web.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

8

2.3
2.3.1

FORMULARIOS EN HTML
CREACIÓN Y CONTROLES

 Controles de un formulario (3)

 El nombre del control también sirve para referirse al mismo en scripts de 

programación.

 Y además, en el caso de los botones de radio y las casillas de verificación, el 

nombre también sirve para agrupar los controles.

 Otro atributo que se usa con muchos controles es value. Dicho atributo tiene 

diferentes utilidades:

• Sirve para establecer un valor inicial para un cuadro de texto simple o un cuadro de 

contraseña.

• Sirve para establecer el valor de un dato oculto.

• Sirve para indicar el valor que se debe enviar cuando la casilla de verificación o el botón de 

radio está activado (por defecto se envía simplemente on), así como cuando la opción de 
la lista de selección ha sido elegida.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

9

Índice: Tema 2.3

2.3 Formularios en HTML
2.3.1 Creación y controles
2.3.2 Cuadros de texto
2.3.3 Botones de acción
ió
2.3.4 Casillas de verificación
2 3 4 C ill
ifi
2.3.5 Botones de radio
2.3.6 Listas de selección
2.3.7 Otros controles

d

2.3
2.3.2

FORMULARIOS EN HTML
CUADROS DE TEXTO

 Cuadros de texto simples

 Son campos de formulario que permiten al usuario introducir una línea de texto  

(y sólo una):
<input type="text" name="nombre">

 Si se utiliza type="pasword", se crea una línea como "text", pero su 

contenido no se hace visible al ser introducido.

 El elemento <input> tan sólo coloca el cuadro de texto, por lo que se deberá 
colocar algún texto junto a él para que el usuario sepa qué información se espera 
p
p
que introduzca en dicho cuadro:
<p>Nombre: <input type="text" name="Nombre"></p>

p q

q

g

j

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

11

2.3
2.3.2

FORMULARIOS EN HTML
CUADROS DE TEXTO

 Atributos de los cuadros de texto simples

 size
 maxlength

 disabled

 readonly
d l



 title

Tamaño del cuadro de texto en caracteres.

Número máximo de caracteres que se pueden introducir; si es 
mayor que size, el texto se puede desplazar.

d d

l

l

No se puede modificar su contenido (el texto que contenga 
aparecerá atenuado y no toma valor).

d

S
id (
Se puede usar su contenido (para copiarlo, por ejemplo), pero no 
modificarlo (no toma valor).

l )

t

i

l

j

Pista de pantalla a mostrar cuando el puntero del ratón está 
encima del cuadro de texto.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

12

2.3
2.3.2

FORMULARIOS EN HTML
CUADROS DE TEXTO

EJERCICIO  23

 Utilización de cuadros de texto simples

 Cuando se envía el formulario, el texto introducido en el cuadro de texto se coloca 

precedido por el nombre del control y un signo =.

 Probar la utilidad de los diferentes atributos del formulario.

<form action="mailto:[email protected]" method="post" enctype="text/plain">

<p>Nombre: <input type="text" name="Nombre"></p>
<input type="submit" value="Enviar">
<input type= submit value= Enviar >

</form>

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

13

2.3
2.3.2

FORMULARIOS EN HTML
CUADROS DE TEXTO

 Cuadros de texto multilínea

 Son campos de formulario que permiten al usuario introducir cualquier cantidad 

de texto.

 El cuadro tiene barra de desplazamiento vertical y si se pulsa INTRO al introducir 

texto, se crea un nuevo párrafo.
<textarea name="Nombre">Contenido inicial del cuadro de
texto</textarea>

 Al igual que con el elemento <input> de los cuadros de texto simples el
 Al igual que con el elemento <input> de los cuadros de texto simples, el 

elemento <textarea> tan sólo coloca el cuadro, por lo que se deberá colocar 
algún texto junto a él para que el usuario sepa qué información se espera que 
introduzca.
<p>Nombre: <textarea name="Nombre">...</p>

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

14

2.3
2.3.2

FORMULARIOS EN HTML
CUADROS DE TEXTO

 Atributos de los cuadros de texto multilínea

 El tamaño del cuadro de texto se determina con los atributos cols (ancho en 

(

caracteres)  y rows (filas visibles).

d

b

t

t

<p>Introduzca su dirección:<br> <textarea cols="40" rows="4"
"4"
name="Dirección">Avenida de Los Conquistadores, 15 28345
Madrid</textarea></p>

"40"

ió

di

l

 Para los cuadros de texto multilínea también se pueden ajustar los atributos 

disabled,  readonly y  title.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

15

2.3
2.3.2

FORMULARIOS EN HTML
CUADROS DE TEXTO

EJERCICIO  24

 Utilización de cuadros de texto multilínea

 El primer párrafo de texto va a continuación del =, y cada párrafo siguiente 

comienza en una nueva línea.

APLICACIONES WEB

TEMA 2: LENGUAJES DE PRESENTACIÓN Y ESTILO

16

Índice: Tema 2.3

2.3 Formularios en HTML
2.3.1 Creación y controles
2.3.2 Cuadros de texto
2.3.3 Botones de acción
ió
2.3.4 Casillas de verificación
2 3 4 C ill
ifi
2.3.5 Botones de radio
2.3.6 Listas de selección
2.3.7 Otros controles

d

2.3
2.3.3

FORMULARIOS EN HTML
BOTONES DE ACCIÓN

 Botones de acción

 Son botones que se pueden pulsar para que se haga algo.

 Se contemplan tres tipos de botones de acción, dos con su funcionalidad ya 

establecida y otro de uso general:
• Botón de envío (submit): Para enviar la información del formulario.
• Botón de borrado (reset): Para volver a poner los controles (sus contenidos o 
t) P
B t