+
HTML
Capítulo 8
Lenguajes de Marcas y Sistemas de Gestión de Información
Curso 2025/2026
+ 2
Capítulo 8: FORMULARIOS
1. Introducción
2. Formularios Básicos
3. Elementos de Formulario
4. Formularios Avanzados
5. Otros Elementos de Formulario
+ 3
1. INTRODUCCIÓN
HTML incluye elementos para crear aplicaciones web.
Permite crear formularios para que los usuarios
interactúen con las aplicaciones web.
HTML/XHTML incluye los suficientes elementos de
formulario para crear desde los formularios sencillos
que utilizan los buscadores hasta los formularios
complejos de las aplicaciones más avanzadas.
+ 4
2. FORMULARIOS BÁSICOS
Los formularios más sencillos se pueden crear utilizando
solamente dos etiquetas: <form> y <input>:
+ 5
2. FORMULARIOS BÁSICOS
<form action="[Link]
method="post">
Escribe tu nombre:
<input type="text" name="nombre" value="" />
<br/>
<input type="submit" value="Enviar" />
</form>
La etiqueta <form> encierra todos los contenidos del formulario
(botones, cuadros de texto, listas desplegables) y la etiqueta <input>
permite definir varios tipos diferentes de elementos (botones y cuadros
de texto).
+ 6
2. FORMULARIOS BÁSICOS
La mayoría de formularios utilizan sólo los atributos action y method. El
atributo action indica la URL de la aplicación del servidor que se
encarga de procesar los datos introducidos por los usuarios. Esta
aplicación también se encarga de generar la respuesta que muestra el
navegador.
+ 7
2. FORMULARIOS BÁSICOS
El atributo method establece la forma en la que se envían los datos del
formulario al servidor. Hace referencia al método HTTP, por lo que no es algo
propio de HTML.
Los dos valores que se utilizan en los formularios son GET y POST → Casi todos
los formularios incluyen el atributo method="get" o el atributo
method="post".
El método POST permite el envío de mucha más información que el método
GET, que admite como máximo el envío de unos 500 bytes de información. La
otra gran limitación del método GET es que no permite el envío de archivos
adjuntos con el formulario. Además, los datos enviados mediante GET se ven en
la barra de direcciones del navegador (se añaden al final de la URL de la página),
mientras que los datos enviados mediante POST no se pueden ver tan fácilmente.
+ 8
2. FORMULARIOS BÁSICOS
Si no sabes que método elegir para un formulario, existe una
regla general que dice que el método GET se debe utilizar
en los formularios que no modifican la información (por
ejemplo en un formulario de búsqueda).
Por su parte, el método POST se debería utilizar cuando el
formulario modifica la información original (insertar,
modificar o borrar alguna información).
+ 3. ELEMENTOS DE FORMULARIO 9
Los elementos de formulario como botones y cuadros de texto también
se denominan "campos de formulario" y "controles de formulario". Se
crean con la etiqueta <input>:
+ 3.1. CUADRO DE TEXTO 10
Se trata del elemento más utilizado en los formularios. En
el caso más sencillo, se muestra un cuadro de texto vacío en
el que el usuario puede escribir cualquier texto:
+ 3.1. CUADRO DE TEXTO 11
Nombre <br/>
<input type="text" name="nombre" value="" />
El atributo type diferencia a cada uno de los diez controles que
se pueden crear con la etiqueta <input>. Para los cuadros de
texto, su valor es text.
El atributo name es el más importante en los campos del
formulario. De hecho, si un campo no incluye el atributo name,
sus datos no se envían al servidor. El valor que se indica en el
atributo name es el nombre que utiliza la aplicación del servidor
para obtener el valor de este campo de formulario.
+ 3.1. CUADRO DE TEXTO 12
El atributo value se emplea para establecer el valor inicial del
cuadro de texto. Si se crea un formulario para insertar datos, los
cuadros de texto deberían estar vacíos. Por lo tanto, o no se añade
el atributo value o se incluye con un valor vacío value="".
Si por el contrario se crea un formulario para modificar datos,
lo lógico es que se muestren inicialmente los datos guardados en
el sistema. En este caso, el atributo value incluirá el valor que se
desea mostrar:
<input type="text" name="nombre" value=“Enrique” />
+ 3.1. CUADRO DE TEXTO 13
El navegador muestra el cuadro de texto con un tamaño predeterminado. El
atributo size permite establecer el tamaño con el que se muestra el cuadro
de texto. Su uso es imprescindible en muchos formularios, donde algunos
campos como la dirección deben mostrar más caracteres de lo normal (<input
size=“100”) y otros campos como el código postal deben mostrar menos
caracteres de lo normal (<input size=“5”).
También se puede limitar el tamaño del texto introducido. El atributo
maxlength permite establecer el máximo número de caracteres que el usuario
puede introducir en un cuadro de texto.
Por último, el atributo readonly permite que el usuario pueda ver los
contenidos del cuadro de texto pero no pueda modificarlos y el atributo
disabled deshabilita un cuadro de texto de forma que el usuario no pueda
modificarlo y además, el navegador no envía sus datos al servidor.
+ 3.2. CUADRO DE CONTRASEÑA 14
La única diferencia entre este control y el cuadro de texto normal es que el
texto que el usuario escribe en un cuadro de contraseña no se ve en la
pantalla. Los navegadores ocultan el texto utilizando asteriscos o círculos:
Contraseña <br/>
<input type="password" name="contrasena" value="" />
Cambiando el valor del atributo type por password se transforma el cuadro
de texto normal en un cuadro de contraseña. Todos los demás atributos se
utilizan de la misma forma y tienen el mismo significado.
+ 3.3. CHECKBOX 15
Los checkbox son controles de formulario que permiten al usuario
seleccionar y deseleccionar opciones individualmente. Aunque se
muestran juntos, cada uno de ellos es completamente independiente
del resto. Por este motivo, se utilizan cuando el usuario puede activar y
desactivar varias opciones relacionadas pero no excluyentes.
Puestos de trabajo buscados <br/>
<input name="puesto_directivo" type="checkbox" value="direccion"/>
Dirección
<input name="puesto_tecnico" type="checkbox" value="tecnico"/>
Técnico
<input name="puesto_empleado" type="checkbox" value="empleado"/>
Empleado
+ 3.3. CHECKBOX 16
El valor del atributo type para estos controles de formulario es
checkbox. Como se muestra en el ejemplo anterior, el texto que se
encuentra al lado de cada checkbox no se puede establecer mediante
ningún atributo, por lo que es necesario añadirlo manualmente fuera
del control del formulario. Si no se añade un texto al lado de la
etiqueta <input /> del checkbox, el usuario sólo ve un pequeño
cuadrado sin ninguna información relativa a la finalidad de ese
checkbox.
El valor del atributo value, junto con el valor del atributo name, es la
información que llega al servidor cuando el usuario envía el
formulario.
+ 3.3. CHECKBOX 17
Si se quiere mostrar un checkbox seleccionado por
defecto, se utiliza el atributo checked. Si el valor del
atributo es checked, el checkbox se muestra seleccionado.
Aunque resulta redundante que el nombre y el valor del
atributo sean idénticos, es obligatorio indicarlo de esta
forma porque los atributos en XHTML no pueden tener
valores vacíos:
<input type="checkbox" checked="checked" ... />
Checkbox seleccionado por defecto
+ 3.4. RADIOBUTTON 18
Los controles de tipo radiobutton son similares a los controles de tipo
checkbox, pero presentan una diferencia muy importante: son
mutuamente excluyentes.
Los radiobutton se utilizan cuando el usuario solamente puede escoger
una opción entre las distintas opciones relacionadas que se le
presentan. Cada vez que se selecciona una opción, automáticamente se
deselecciona la otra opción que estaba seleccionaba.
+ 3.4. RADIOBUTTON 19
Estado Civil: <br/>
<input type="radio" name=”estado" value=”soltero"
checked="checked" /> Soltero/a
<input type="radio" name=”estado" value=”casado"
/> Casado/a
El valor del atributo type para estos controles de formulario es
radio. El atributo name se emplea para indicar los radiobutton
que están relacionados. Por lo tanto, cuando varios radiobutton
tienen el mismo valor en su atributo name, el navegador sabe que
están relacionados y puede deseleccionar una opción del grupo
de radiobutton cuando se seleccione otra opción.
+ 3.5. BOTÓN DE ENVÍO DE FORMULARIO 20
La mayoría de formularios dispone de un botón para enviar al
servidor los datos introducidos por el usuario:
<input type="submit" name="buscar" value="Buscar" />
El valor del atributo type para este control de formulario es submit. El
navegador se encarga de enviar automáticamente los datos cuando el
usuario pincha sobre este tipo de botón. El valor del atributo value es
el texto que muestra el botón.
+ 3.6. BOTÓN DE RESET DE FORMULARIO 21
Se trata de un botón especial que borra todos los datos
introducidos por el usuario y devuelve el formulario a su estado
original:
<input type="reset" name="limpiar" value="Borrar datos
del formulario" />
El valor del atributo type es reset. Cuando el usuario pulsa este
botón, el navegador borra toda la información introducida y
muestra el formulario en su estado original.
+ 3.7. FICHEROS ADJUNTOS 22
Los formularios permiten adjuntar archivos para subirlos al
servidor. Por motivos de seguridad, los servidores añaden
restricciones
Fichero adjunto
<input type="file" name="adjunto" />
El valor del atributo type para este control de formulario es file. El
navegador se encarga de mostrar un cuadro donde aparece el
nombre del archivo seleccionado y un botón que permite navegar
por los directorios y archivos del ordenador del usuario.
+ 3.7. FICHEROS ADJUNTOS 23
Si se incluye un control para adjuntar archivos, es obligatorio
añadir el atributo enctype en la etiqueta <form> del formulario. El
valor del atributo enctype debe ser multipart/form-data:
<form action=”url_servidor" method="post"
enctype="multipart/form-data">
Fichero adjunto
<input type="file" name="adjunto" />
</form>
+ 3.8. BOTÓN DE IMAGEN 24
El aspecto de los botones de formulario se puede personalizar por
completo, ya que incluso es posible utilizar una imagen como botón:
<input type="image" name="enviar" src="[Link]" />
El valor del atributo type para este control de formulario es image. El
atributo src indica la URL de la imagen.
VENTAJA: Permite personalizar por completo la estética de los botones y
mostrarlos con aspecto homogéneo en los navegadores.
INCONVENIENTE: Ralentiza la carga del formulario y si se quiere
modificar su aspecto, es necesario crear una nueva imagen.
+ 3.9. BOTÓN 25
Algunos formularios complejos necesitan botones más avanzados que
los de enviar datos o resetear el formulario:
<input type="button" name="guardar" value="Guardar
Cambios" />
El valor del atributo type para este control de formulario es button.
Este tipo de botones sólo son útiles si se utilizan junto con JavaScript,
pudiendo programarlos para que realicen cualquier tarea compleja
cuando se pulsa sobre ellos.
+ 26
4. FORMULARIOS AVANZADOS
HTML define algunos elementos adicionales para mejorar la estructura de los
formularios creados.
La siguiente imagen muestra un formulario que agrupa sus elementos y añade
etiquetas a cada campo para mejorar su estructura:
+ 27
4. FORMULARIOS AVANZADOS
La etiqueta <fieldset> agrupa campos del formulario y la etiqueta
<legend> asigna un nombre a cada grupo.
+ 4. FORMULARIOS AVANZADOS 28
<form action="maneja_formulario.php" method="post">
<fieldset>
<legend>Datos personales</legend>
Nombre <br/>
<input type="text" name="nombre" value="" />
<br/>
Apellidos <br/>
<input type="text" name="apellidos" value="" />
<br/>
DNI <br/>
<input type="text" name="dni" value="" size="10"
maxlength="9" />
</fieldset>
…
+ 4. FORMULARIOS AVANZADOS 29
…
<fieldset>
<legend>Datos de conexión</legend>
Nombre de usuario<br/>
<input type="text" name="nombre" value="" maxlength="10" />
<br/>
Contraseña<br/>
<input type="password" name="password" value=""
maxlength="10" />
<br/>
Repite la contraseña<br/>
<input type="password" name="password2" value=""
maxlength="10" />
</fieldset>
</form>
+ 30
4. FORMULARIOS AVANZADOS
◼ La etiqueta <fieldset> agrupa todos los controles de formulario a
los que encierra. El navegador muestra por defecto un borde resaltado
para cada agrupación.
◼ La etiqueta <legend> se incluye dentro de cada etiqueta <fieldset>
y establece el título que muestra el navegador para cada agrupación
de elementos.
Todos los controles de formulario (salvo botones) presentan una carencia
muy importante: no disponen de la opción de establecer el título o
texto que se muestra junto al control. El nombre de cada campo se
incluye en forma de texto normal, sin ninguna relación con el campo al
que hace referencia.
+ 31
4. FORMULARIOS AVANZADOS
HTML incluye una etiqueta denominada <label> que se utiliza para
establecer el título de cada campo del formulario:
El único atributo que suele utilizarse con la etiqueta <label> es for,
que indica el identificador (atributo id) del campo de formulario para el
que esta etiqueta hace de título.
+ 4. FORMULARIOS AVANZADOS 32
<label for="nombre">Nombre</label>
<input type="text" id="nombre" name="nombre" value="" />
<label for="apellidos">Apellidos</label>
<input type="text" id="apellidos" name="apellidos" value="" />
<label for="dni">DNI</label>
<input type="text" id="dni" name="dni" value="" size="10"
maxlength="9" />
La principal ventaja de utilizar <label> es que el código HTML está
mejor estructurado y se mejora su accesibilidad. Al pinchar sobre el
texto del <label>, el puntero del ratón se posiciona automáticamente
para poder escribir sobre el campo de formulario asociado. Este
comportamiento es especialmente útil para los campos de tipo
radiobutton y checkbox.
+ 33
4. FORMULARIOS AVANZADOS
+ 34
5. OTROS ELEMENTOS DE
FORMULARIO
Algunas aplicaciones web utilizan otros elementos que no se pueden
crear con <input>. Las listas desplegables y las áreas de texto
disponen de sus propias etiquetas (<select> y <textarea>).
Las áreas de texto son útiles cuando se debe introducir una gran
cantidad de texto, ya que es mucho más cómodo de introducir que en un
campo de texto normal:
+5. OTROS ELEMENTOS DE
35
FORMULARIO
<form action=”[Link]" method="post">
<label for="nombre">Nombre del producto</label> <br/>
<input type="text" id="nombre" name="nombre" value="" />
<label for="descripcion">Descripción del
producto</label> <br/>
<textarea id="descripcion" name="descripcion" cols="40"
rows="5"></textarea>
</form>
+ 36
5. OTROS ELEMENTOS DE
FORMULARIO
La definición formal de la etiqueta <textarea> es:
+ 37
5. OTROS ELEMENTOS DE
FORMULARIO
Los atributos más utilizados en las etiquetas <textarea> son los que
controlan su anchura y altura.
◼ La anchura se controla mediante cols, que indica las columnas o
número de caracteres que se podrán escribir como máximo en cada
fila.
◼ La altura se controla mediante rows, que indica directamente las filas
de texto que serán visibles.
PROBLEMA: HTML no permite limitar el número máximo de caracteres
que se pueden introducir. Mientras los elementos <input
type="text"> disponen del atributo maxlength, las áreas de texto no
disponen de un atributo equivalente → Sólo es posible limitar el número
de caracteres mediante JavaScript.
+ 38
5. OTROS ELEMENTOS DE
FORMULARIO
El otro control disponible para los formularios es el de las listas
desplegables:
❑ El primero es el de las listas que sólo muestran un valor cada vez y
sólo permiten seleccionar un valor.
❑ El segundo tipo de lista es el que sólo permite seleccionar un valor
pero muestra varios a la vez.
+ 5. OTROS ELEMENTOS DE 39
FORMULARIO
LISTA MUESTRA UNA OPCIÓN
<label for="so">Sistema operativo</label> <br/>
<select id="so" name="so">
<option value="" selected="selected">- selecciona -
</option>
<option value="windows">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
+ 5. OTROS ELEMENTOS DE 40
FORMULARIO
LISTA MUESTRA VARIAS OPCIONES
<label for="so2">Sistema operativo</label> <br/>
<select id="so2" name="so2" size="5">
<option value="windows"
selected="selected">Windows</option>
<option value="mac">Mac</option>
<option value="linux">Linux</option>
<option value="otro">Otro</option>
</select>
+ 41
5. OTROS ELEMENTOS DE
FORMULARIO
Los tipos de listas desplegables se definen con la misma etiqueta
<select> y cada elemento de la lista se define mediante la etiqueta
<option>:
+ 42
5. OTROS ELEMENTOS DE
FORMULARIO
◼ La etiqueta <select> define la lista y encierra todas las
opciones que muestra la lista. Cada una de las opciones de
la lista se define mediante una etiqueta <option>.
◼ Elatributo value de cada opción es obligatorio, ya que es
el dato que se envía al servidor cuando el usuario envía
el formulario.
◼ Paraseleccionar por defecto una opción al mostrar la lista,
se añade el atributo selected a la opción deseada.
+ 43
5. OTROS ELEMENTOS DE
FORMULARIO
La etiqueta <optgroup> permite agrupar opciones relacionadas
dentro de una lista desplegable.
El único atributo que suele utilizarse con la etiqueta <optgroup> es
label, que indica el nombre de cada agrupación. Los navegadores
muestran de forma destacada el título de cada agrupación.
+ 44
5. OTROS ELEMENTOS DE
FORMULARIO
<form id="formulario" method="post" action="”>
<label for="programa">Programa selecc.</label> <br/>
<select id="programa" name="programa">
<optgroup label="Sistemas Operativos">
<option value="Windows"
selected="selected">Windows</option>
<option value="Mac">Mac</option>
<option value="Linux">Linux</option>
<option value="Other">Otro</option>
</optgroup> …
+ 45
5. OTROS ELEMENTOS DE
FORMULARIO
… <optgroup label="Navegadores">
<option value="Internet Explorer"
selected="selected">Google Chrome</option>
<option value="Firefox">Firefox</option>
<option value="Safari">Safari</option>
<option value="Opera">Opera</option>
<option value="Other">Otro</option>
</optgroup>
</select>
</form>
+ 46
5. OTROS ELEMENTOS DE
FORMULARIO