1.4. Formularios

Los formularios son una característica del estándar HTML que permite a los autores llevar datos del exterior al interior de nuestro sistema. Esto se logra mediante componentes que transportan diversos tipos de datos para múltiples aplicaciones donde tu imaginación es el límite

Los formularios están delimitados con la etiqueta <form> ... </form>, que permite reunir varios elementos de formulario, como botones y casillas de texto y que debe poseer los siguientes atributos:

La sintaxis genérica para la etiqueta form:

La etiqueta form actúa como una especie de contenedor para almacenar elementos que permiten al usuario seleccionar o introducir datos. Todos los datos se enviarán a la dirección URL indicada en el atributo action de la etiqueta form, por el método indicado en el atributo method.

Se puede insertar cualquier elemento HTML en una etiqueta form (como botones, hipervínculos, tablas y texto), pero los elementos interactivos son los más interesantes. Estos elementos interactivos son:


Atributos de etiquetas form y tipos de entrada
Etiqueta Atributo Valor Resultado Efecto visual
<form> ... </form> method post get Método de envio  
action   Envía a la dirección mostrada  
enctype   Especifica el tipo de código  
<input> type submit realiza la action de la etiqueta <form>
text línea simple de texto cuya longitud se especifica por el atributo size
reset Elimina el contenido del formulario
radio botón de radio
checkbox casilla de selección
id Nombre Nombre del formulario  
name  
size   Tamaño del texto  
<textarea> ... </textarea> id Nombre Casilla de texto
name
rows Número de renglones
cols Número de columnas
<select>
 <option></option>
... 
</select>
          
id Nombre del select Identificador del select  
name
multiple multiple Múltiples selecciones posibles
selected Elección predeterminada Valor por defecto
value Valor forzado Valor asignado

Ejemplo de un formulario:

See the Pen Nxvygx by JOSE (@albatros) on CodePen.

Fieldset

La etiqueta “fieldset” se usa en formularios para agrupar campos relacionados entre sí.

La sintaxis es:

<fieldset>Ejemplo<fieldset>

El efecto que conseguimos gracias a la etiquetas fieldset es un rectángulo enmarcando el texto que esté incluido dentro de él.

legend

La etiqueta <legend> se utiliza para asignar un título a un fieldset.

La sintaxis es:

<fieldset><legend>Leyenda</legend>Ejemplo<fieldset>

LeyendaEsto es un fieldset con legend

label

La etiqueta <label> se utiliza para adjuntar información a los controles.

El valor del atributo for debe ser igual al valor id del elemento input para que los reconozca como asociados.

outgroup

La etiqueta <optgroup> se utiliza para agrupar opciones relacionada, por medio de un título común, en los menús desplegables.

See the Pen GovQLJ by JOSE (@albatros) on CodePen.



Nuevos tipos de entrada en html 5. Note que su uso depende del navegador

See the Pen gPGbeK by JOSE (@albatros) on CodePen.


Envío de datos

Cuando se envía un formulario (haciendo clic en el botón de envío), los datos del formulario se envían a un script CGI bajo la forma de pares nombre/valor, es decir conjuntos de datos representados por el nombre del elemento formulario, un signo igual ('=') y luego el valor asociado. Estos pares nombre/valor se separan unos de otros mediante el símbolo de unión ('&'). Por lo tanto, los datos que se envían al script se verán así:

campo1=valor1&campo2=valor2&campo3=valor3

Con el método get (enviar los datos mediante una dirección URL), la URL será una cadena como la siguiente:

http://www.mipagina.com?campo1=valor1&campo2=valor2&campo3=valor3