CREACIÓN DE FORMULARIOS
Los formularios en HTML nos ayudan a aumentar la interactividad de nuestra Web y nos permiten recibir
información de los usuarios de nuestra página. Estos están compuestos por diferentes componentes para
capturar información y botones.
La etiqueta de los formularios es <form> y su cierre </form>. Todo lo que vaya dentro de estas, serán parte
del formulario.
Principales Atributos
Action: El atributo “action” indica el tipo de acción que va a realizar el formulario. Se puede pasar la
url o ubicación del archivo donde se enviará el formulario o una dirección de correo si se quiere
enviar a este.
Method: Mediante este atributo le indicamos al formulario la forma en la que el formulario será
enviado. Existen dos valores posibles:
Get (Es una forma de envío de datos de una página a otra. Con este método los datos se envían en
la URL o dirección, haciéndolos visibles desde la barra de direcciones del navegador).
Post (Es una forma de envío de datos de una página a otra. Con este método los datos que se
envían no se podrán ver ya que viajan ocultos.)
Target: Mediante este atributo indicaremos la forma en la que se desplegará la ventana que
procesará el formulario.
Sus valores posibles son: _blank (nueva), _self (mismo frame) _parent (frame padre), _top(cuerpo)
Ejemplos de definición de formularios:
<form action="[Link] method="post" target="_blank">
Elementos del formulario
</form>
<form action="pagina_local.php" method="post" target="_self">
Elementos del formulario
</form>
<form action="[Link] method="post" target="_parent">
Elementos del formulario
</form>
Elementos o Componentes del Formulario
Elemento <input>: Esta etiqueta establece un campo que puede ser de diferente tipo, donde un usuario
puede ingresar datos.
Principales Atributos de la etiqueta <input>
Type: especifica el tipo de elemento a utilizar. Entre los cuales se tienen:
Text: Es el campo más simple, generalmente se usa para preguntas abiertas.
Radio: Utilizado en preguntas de opción múltiple y única respuesta.
Checkbox: Utilizados para preguntas de opción múltiple y múltiple respuestas.
Password: Utilizado para capturar contraseñas.
Submit: Botón para el envío del formulario.
Reset: Botón para borrar o reiniciar.
Hidden: Campo oculto. Este no será visible en el formulario.
File: Campo para subir archivos al servidor.
Value: Especifica el valor inicial del elemento.
Name: Especifica el nombre que tendrá el elemento. La variable name contendrá el texto especificado en
el atributo valor.
Id: Especifica el identificador que tendrá el elemento.
Disabled: Especifica si el campo va a estar deshabilitado. (disabled="disabled")
Readonly: Especifica si el campo es de solo lectura. (readonly=”readonly)
Size: Especifica el tamaño en caracteres de un campo text o password.
Maxlenght: Indica el número máximo de caracteres que el usuario podrá introducir.
(Ejemplo:maxlenght=”80”)
Placeholder: Indicación corta en una entrada de texto.
Checked: Indica que el elemento radio o checkbox inicia marcado o seleccionado.
Ejemplo 1.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Formulario</title>
</head>
<body>
<form action="[Link] method="post" target="_blank">
<pre>
Información película:
<input type="text" name="pelicula" placeholder="nombre película" size="20">
Información Genero:
<input type="radio" name="genero" value="acción" checked="checked">Acción
<input type="radio" name="genero" value="Terror">Terror
Medio de pago:
<input type="checkbox" name="medio1" value="Efectivo">Efectivo
<input type="checkbox" name="medio2" value="Tarjeta">Tarjeta
<input type="checkbox" name="medio3" value="Cheque">Cheque
Contraseña:
<input type="password" name="clave" id="idclave">
Archivo:
<input type="file" name="archivo" id="idarchivo">
<input type="submit" value="enviar" name="archivo" id="idarchivo">
<input type="reset" value="borrar" name="archivo" id="idarchivo">
</pre>
</form>
</body>
</html>
***** Al contrario del radio botones la casilla de verificación permite seleccionar más de una
opción
Elemento <select>
Estos elementos son los que se conocen comúnmente como listas desplegables o lista de
opciones, donde el usuario podrá escoger una o múltiples opciones de acuerdo a como se haya
establecido.
Cada una de las opciones de la lista vendrán entre las etiquetas. <option> y </option> y estas a su
vez entre las etiquetas <select> y </select> de la siguiente manera:
Ejemplo 2.
<select name="transporte">
<option value="1">Coche</option>
<option value="2">Avión</option>
<option value="3">tren</option>
</select>
Atributos de la Etiqueta <select>
Name: Nombre del campo de selección.
Id: Identificador del campo de selección.
Size: Número de opciones visibles en la lista.
Multiple: Indica que se pueden seleccionar múltiples opciones en la lista.
Disabled: Indica que el elemento estará deshabilitado.
Ejemplo 3.
<select name="genero" id="idgenero" size="3" multiple="multiple"</select>
Atributos de la etiqueta <option> </option>
Disabled: Indica que la opción va a estar deshabilitada.
Selected: Indica que la opción va a estar seleccionada inicialmente
Value: El valor real que tendrá la opción.
Ejemplo:4
<option value="F" selected="selected" >Femenino</option>
Ejemplo 5.
<!DOCTYPE html>
<html>
<head>
<title>Formulario</title>
</head>
<body>
<form action="[Link] method="post" target="_blank">
Viaja:
<select name="transporte" size="2" multiple="multiple">
<option value="0">-Seleccione opción-</option>
<option value="1">Coche</option>
<option value="2" selected="selected">Avión</option>
<option value="3">tren</option>
</select>
<br><br>
Fecha:
<select name="ingreso" id="idingreso" >
<option value="0">-Seleccione opción-</option>
<option value="2014">Año 2014</option>
<option value="2015">Año 2015</option>
<option value="2016">Año 2016</option>
</select>
</form>
</body>
</html>
Elemento <textarea>
Esta etiqueta permite crear un campo de texto de múltiples líneas, ideal para capturar textos extensos; por
ejemplo: una observación, un resumen, una sugerencia.
El texto a ingresar estará entre las etiquetas de apertura y cierre <textarea> y </textarea>
Atributos de la etiqueta <textarea>
Cols: Ancho del elemento basado en número de columnas a mostrar.
Rows: Altura del elemento basado en el número de filas a mostrar.
Name: Nombre del textarea.
Id: identificador del textarea.
Disabled: Indica que el elemento estará deshabilitado
Readonly: Indica que el elemento será de sólo lectura.
Ejemplo: Elemento textarea
<!DOCTYPE html>
<html>
<head>
<title>Formulario</title>
</head>
<body>
Observaciones<br />
<textarea name="observacion" cols="50" rows="4">
Escriba una corta descripción de su experiencia
</textarea>
</body>
</html>
Mejorando la Estructura
Vamos a ver cómo mejorar la estructura del formulario que estamos creando con la
utilización de tres etiquetas: <fieldset>, <legend>
Las etiquetas <fieldset> y <legend>
La etiqueta <fieldset> la vamos a utilizar para agrupar campos del formulario y la etiqueta <legend> va a
asignar un nombre a cada grupo que hayamos creado.
En este caso vamos a dividir el formulario en dos grupos, todos los inputs en uno, y el área de texto y la lista
desplegable en otro.
Metemos a ambos entre etiquetas fieldset y dentro de éstas las etiquetas legend con sus respectivos
nombres.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Formulario</title>
</head>
<body>
<form action="[Link] method="post" target="_blank">
<pre>
<fieldset>
<legend>Información preliminar</legend>
Información película:
<input type="text" name="pelicula" placeholder="nombre película" size="20">
Información Genero:
<input type="radio" name="genero" value="acción" checked="checked">Acción
<input type="radio" name="genero" value="Terror">Terror
Medio de pago:
<input type="checkbox" name="medio1" value="Efectivo">Efectivo
<input type="checkbox" name="medio2" value="Tarjeta">Tarjeta
<input type="checkbox" name="medio3" value="Cheque">Cheque
</fieldset>
<fieldset>
<legend>Informacion personal</legend>
Contraseña:
<input type="password" name="clave" id="idclave">
Archivo:
<input type="file" name="archivo" id="idarchivo">
<input type="submit" value="enviar" name="archivo" id="idarchivo">
<input type="reset" value="borrar" name="archivo" id="idarchivo">
</fieldset>
</pre>
</form>
</body>
</html>
