ELECTIVA I-HTML

FORMULARIOS EN HTML
Exploremos cómo crear formularios en HTML, cuáles son las etiquetas para crear campos y los
atributos correspondientes para agregar características y funcionalidad, además veremos ejemplos
concretos de formularios hechos en html. Los formularios son elementos de gran importancia y utilidad
al momento de recopilar información de nuestros usuarios a través de una página web.
CONTENIDO:

Cómo crear Formularios en HTML

 Etiqueta <form>
 Etiqueta <input>
 Atributo type
o Valores de atributo type en formularios HTML
o Ejemplo de formulario html con atributo type

Crear una desplegable con opciones HTML

 Etiqueta <select>
 Etiqueta <option>
o Ejemplo de un campo desplegable en formularios HTML
 Atributos para etiqueta <select> en formularios html

Crear un campo de texto grande en formularios HTML

 Etiqueta <textarea>
 Atributo action
 Atributo method

Atributo name

Cómo crear Formularios en HTML

Crear un formulario en html implica construir los campos de información, estos pueden ser: campos de
texto, de número, selectores, desplegables, casillas de verificación y entre otras más.
Como ya es sabido en html se emplean etiquetas para crear los diversos elementos existentes, y el caso
de los formularios no es la excepción, para crear los componentes del formulario HTML también
haremos uso de una variedad de etiquetas y atributos, los mismos que conoceremos a continuación.
Etiqueta <form>
Utilizaremos la etiqueta <form> para indicar al navegador que el elemento será un formulario.
<form> se emplea para cualquier tipo de formulario HTML, ya sea uno de contacto, suscripción,
registro, login, encuesta, etc.
HTML
1
<form>

Profa. Daira Montaño Página 1

 ELECTIVA I-HTML

2
…Aquí irán los campos del formulario...
3
</form>
Etiqueta <input>
Crear los campos en el formulario es tan sencillo como utilizar la etiqueta <input> antecedida de lo que
deseas obtener. Por ejemplo:
HTML
1
<form>
2
Tu nombre: <input/>
3
Tu apellido: <input/>
4
</form>
Resultado:

Imagen con campos de texto input formularios html

Existen varios tipos campos para formularios HTML y también debemos especificar qué tipo de campo
es un elemento del formulario, para ello aprenderemos a utilizar el atributo TYPE a continuación.
Atributo type
El atributo type va dentro de la etiqueta <input> y su valor indicará que tipo de campo se está creando.
Veamos algunos valores que puede tomar el atributo type en un formulario HTML:
Valores de atributo type en formularios HTML
 Text: para campos de texto
 Password: para campos de contraseña
 Checkbox: para casillas de verificación
 Radio: para casillas de selección
 Submit: para botones de envío

Profa. Daira Montaño Página 2

 ELECTIVA I-HTML

 Reset: para botones de resetear

 File: para campos de selección de archivo
Ejemplo de formulario html con atributo type
En el siguiente ejemplo crearemos un formulario empleando los diversos tipos de campo que
aprendimos anteriormente y para organizar y diferenciar mejor cada campo, emplearemos la etiqueta de
salto de linea <br/>, veamos:
HTML
1
<form>
2
Nombre:<input type="text"/> <br/><br/>
3
Apellidos:<input type="text"/> <br/><br/>
4
Contraseña: <input type="password"/> <br/><br/>
5
casilla de verificación: <input type="checkbox"/> <br/><br/>
6
casilla de selección: <input type="radio"/> <br/><br/>
7
selección de archivo: <input type="file"> <br/><br/>
8
Resultado:

Imagen de un formulario hecho en HTML con varios tipos de campos

Si observas el anterior ejemplo te darás cuenta de que todos los campos están construidos con la
etiqueta html <input>. Pero existen otros campos que no utilizan <input>, sino etiquetas específicas
como la etiqueta <select> y <textarea>, conozcamos de que se tratan.
Crear una desplegable con opciones HTML

Profa. Daira Montaño Página 3

 ELECTIVA I-HTML

Ahora aprenderemos a realizar desplegables en formularios, seguramente viste esos campos en las
que existe un desplegable con varias opciones dentro para seleccionar una de ellas, pues ahora
aprenderás a hacerlo.
Etiqueta <select>
Utilizaremos la etiqueta <select> para crear un campo desplegable, este tipo de campos en HTML
permiten seleccionar una opción del desplegable y además son muy útiles en esas ocasiones en las que
buscamos buena presentación de espacio en el formulario.
Etiqueta <option>
Utilizaremos la etiqueta <option> dentro de la etiqueta <select>. <option> contiene una opción del
desplegable y podemos implementar la cantidad de opciones que deseemos.
Ejemplo de un campo desplegable en formularios HTML
El ejemplo a continuación trata de un desplegable con 5 opciones de colores para elegir, veamos:
HTML
1
<form>
2

3
ELIGE UN COLOR:<select>
4
<option>Blanco</option>
5
<option>Negro</option>
6
<option>Azul</option>
7
<option>Rojo</option>
8
Resultado:

Desplegable en formularios HTML

Profa. Daira Montaño Página 4

 ELECTIVA I-HTML

Por defecto estará seleccionada la primera opción, además es necesario pasar el cursor y clic para
desplegar las opciones, una vez seleccionada la opción, esta regresa a su estado inicial pero con la
opción seleccionada.
Atributos para etiqueta <select> en formularios html
 Atributo size.- Utiliza el atributo size para determinar la cantidad de opciones a mostrar y su
valor en números.
 Atributo multiple.- Utiliza el atributo multiple con valor también multiple para permitir que
el desplegable sea de múltiple selección de tal manera que permita seleccionar varias opciones.
Crear un campo de texto grande en formularios HTML
Un campo de texto con varias líneas disponible en el formulario puede ser necesario para permitir a
nuestros usuarios enviar extensos textos y para ello haremos uso de la etiqueta <textarea>.
Etiqueta <textarea>
La etiqueta <textarea> se utilizara para crear un área de texto de varias líneas, puede servirnos por
ejemplo para un capo de mensaje, veamos un ejemplo concreto:
HTML
1
<form>
2
Nombre:
3
<input type="text"/> <br/><br/>
4
Correo electrónico:
5
<input type="email"/> <br/><br/>
6
Tu mensaje:
7
<textarea name="mensaje"> </textarea> <br/><br/>
8
Resultado:

Profa. Daira Montaño Página 5

 ELECTIVA I-HTML

Formulario de contacto HTML con campo multilinea

Si observamos, el campo de texto multilinea posee en la esquina inferior derecha un asistente que
permite ampliar el campo con el cursor.

Atributo action
El valor del atributo action será la URL de la página que queremos que cargue después de que se envíe
la información de un formulario. Este atributo va dentro de la etiqueta <form> y lo podemos utilizar si
deseamos.
HTML
1
<form action="URL">

Atributo method
El atributo method puede tomar como valores a GET o POST y esto indica el método http que será
utilizado cuando se envíe la información.
Ejemplo:
HTML
1
<form action="URL" method="get">
2
<form action="URL" method="post">
 Cuando se usa el valor get, los datos del formulario podrán ser vistos en la dirección de la
página.
 Cuando se usa el valor post los datos enviados no serán visibles en la dirección de la página.
Por seguridad se recomienda utilizar usar el valor post, para datos sensibles.
Atributo name
Utiliza el atributo name para ponerle un nombre al formulario

Profa. Daira Montaño Página 6

 ELECTIVA I-HTML

HTML

1
<form name="miformulario" action="URL" method="post">

Para que el formulario funcione correctamente utilizaremos el atributo name para cada campo del
formulario, así será posible recibir correctamente los datos enviados.
HTML

1
<form>
2
Nombre: <input name="nombre" type="text"/> <br/><br/>
3
Correo electrónico: <input name="correo" type="email"/> <br/><br/>
4
Tu mensaje: <textarea name="mensaje"> </textarea> <br/><br/>
5
<input type="submit" value="Enviar ahora"/>
6

7
</form>

El atributo name será necesario para procesar la información de cada campo y que estas lleguen a su
destino correctamente.
Hemos aprendidos a crear un formulario en html estático y además de muchos detalles, sin embargo
aún no podemos enviar y recibir información a través de ella, para ello es necesario que los datos se
envíen a un servidor y ser procesados por la misma, esto ocurre gracias a otro lenguaje de
programación como puede ser PHP

Profa. Daira Montaño Página 7