Formularios en HTML

Con el uso de formularios en HTML, es posible que los visitantes a la página web envíen información, como pueden ser comentarios, archivos, o bien, ingresen palabras o frases para buscarlas dentro del sitio.

Algo importante a mencionar es que con HTML se hacen los formularios con los cuales se envía la información, sin embargo, con HTML no es posible recuperar ni procesar la información que se envíe por medio de estos. Para ello es necesario que la información llegue a una página relizada con un lenguaje de programación de lado del servidor, como PHP, ASP o JSP.

Instrucciones para formularios en HTML

Formulario (Form)
<form></form>

 Elemento en bloque

Es la etiqueta que envuelve a todos los elementos interactivos que componen al formulario y cuyos valores se enviarán a un servidor.

Atributos de Formulario (Form)

action

Su valor deber corresponder al archivo que procesará los datos enviados:

<form action="comentarios.php"></form>

En este ejemplo, la información enviada a través del formulario llegará a un archivo llamado comentarios.php.

method

Es el método que se emplea para enviar la información, sus posibles valores son:

• get
• post

get

Mediante el método get, los datos que se llenan a través del formulario son enviados por medio de la URL, conformándose cada campo con su nombre y valor.

See the Pen formGet by Miguel Méndez (@codigo-web) on CodePen.0

En este ejemplo, el campo donde se escribe el nombre, se llama “nombre” (se le da nombre a un campo mediante el atributo name):

Al dar clic sobre el botón de Enviar, se envía al Navegador al archivo que se definió mediante el atributo action, pero al término de la cadena, automáticamente se agrega un signo de interrogación que se cierra (?), a continuación el nombre del elemento del formulario (en este caso nombre), seguido de un signo de igual (=) y el valor que se haya puesto en el campo del formulario.

Cuando el formulario tiene mas elementos, cada par (nombre de campo-valor) de cada uno de los elementos del formulario, automáticamente es separado con un símbolo de ampersand (&).

Nota: El método get no permite subir archivos.

post

Mediante el método post, los valores de los campos del formulario se envían de forma oculta (sin aparecer en la URL) y permite el envío de archivos a través del formulario.

Es recomendable utilizar este método, ya que no deja en el historial del Navegador los datos que se enviaron a través del formulario.

enctype

El atributo enctype, con el valor multipart/form-data es necesario cuando deseamos incluir en el formulario uno o varios campos para adjuntar archivos.

<form action="#" method="post" enctype="multipart/form-data"></form>

Si se excluye, por omisión toma el valor application/x-www-form-urlencoded, que envía el contenido del formulario en una sola cadena de información (sin permitir archivos adjuntos).

Etiqueta (Label)
<label></label>

 Elemento en línea

Con el uso de esta etiqueta se le proporciona una etiqueta o leyenda a cada elemento del formulario.

Al dar clic sobre la etiqueta, el foco del Navegador pasa al campo del formulario relacionado. Es decir, el elemento del formulario queda seleccionado y listo para recibir información por parte del usuario.

Atributos de etiqueta (Label)

for

Mediante el atributo for se relaciona la etiqueta con el elemento del formulario. El valor del atributo for debe ser el valor del atributo id del elemento del formulario al que deseamos relacionarlo.

See the Pen formLabel by Miguel Méndez (@codigo-web) on CodePen.0

Elementos de formulario

Existen diversos elementos que se pueden colocar en un formulario para facilitar la captura de la información que envía el usuario:

• Campos de texto
• Casillas de verificación
• Áreas de texto
• Botones de radio
• Menús de selección
• Selección de archivo
• Campos ocultos
• Botón de limpiado de datos
• Botón de envío

Atributos generales

Cada uno de los elementos de un formulario es enviado junto con el valor que el usuario haya introducido en este. Por esta razón, existen tres atributos que aplican para cualquier elemento del formulario y debemos incluirlos:

id

El identificador del elemento, su valor no puede repetirse en el id de otro elemento en la misma página, no puede contener espacios, acentos, caracteres especiales ni comenzar con un número.

name

El nombre del elemento, aplican las mismas restricciones que para el id.

value

El valor por omisión que tendrá el elemento en caso que el usuario no proporcione un valor. Su uso es opcional.

See the Pen formValue by Miguel Méndez (@codigo-web) on CodePen.0

Entrada (Input)
<input>

 Elemento en línea

Input es la instrucción que representa a la mayor parte de elementos que pueden componer a un formulario, ya que representa una entrada de información al formulario. El atributo type determina el tipo de entrada:

<input type=”text”>

Entrada de texto, es el tipo de elemento por omisión.

See the Pen formInputText by Miguel Méndez (@codigo-web) on CodePen.0

<input type=”checkbox”>

Con la entrada de tipo checkbox (casilla de verificación) se pone a disposición del usuario una serie de opciones para que pueda seleccionar una o varias de ellas.

See the Pen formCheckbox by Miguel Méndez (@codigo-web) on CodePen.0

<input type=”radio”>

Similar a la entrada de tipo checkbox, pero en esta solo es posible seleccionar una opción:

See the Pen formRadio by Miguel Méndez (@codigo-web) on CodePen.0

<input type="checkbox" name="deportes[]">

<input type=”file”>

Permite la inclusión de un archivo en el formulario. Aparece un botón que abre un cuadro de diálogo para que el usuario seleccione el archivo que desea enviar.

See the Pen formFile by Miguel Méndez (@codigo-web) on CodePen.0

<input type=”hidden”>

Envía un valor al servidor, pero no es visible en la página. Se utiliza para enviar algo que sea de utilidad, pero que no es necesario que el usuario lo vea o interactúe con él.

See the Pen formHidden by Miguel Méndez (@codigo-web) on CodePen.0

<input type=”reset”>

Crea un botón en el formulario que, al oprimirse, limpia los valores que haya puesto el usuario.

See the Pen formReset by Miguel Méndez (@codigo-web) on CodePen.0

<input type=”submit”>

Crea un botón en el formulario que, al oprimirse, envía el formulario al servidor.

See the Pen formSubmit by Miguel Méndez (@codigo-web) on CodePen.0

<input type="submit" disabled="disabled">

Selección (Select)
<select></select>

 Elemento en línea

Genera un menú desplegable, que presenta una lista de opciones. Cada opción del menú se representa con el uso de la etiqueta <option></option>

Opción (Option)
<option></option>

 Elemento en bloque

Etiqueta en la que se incluye cada una de las opciones de un menú desplegable.

See the Pen formSelectOption by Miguel Méndez (@codigo-web) on CodePen.0

Atributos de Opción (Option)

selected

Al incluirlo como atributo y con valor selected en una opción, esta aparece seleccionada al inicio del grupo de opciones.

disabled

Al incluirlo como atributo y con valor disabled en una opción, esta queda deshabilitada.

See the Pen formSelectAttr by Miguel Méndez (@codigo-web) on CodePen.0

Opción de grupo (Optgroup)
<optgroup></optgroup>

 Elemento en bloque

Agrupa a varias opciones dentro del combo <select></select>

Atributos de Opción de grupo (Optgroup)

label

Su valor aparece en forma de título para el grupo de opciones.

disabled

Al incluirlo como atributo y con valor disabled, deshabilita al grupo completo.

See the Pen formOptgroup by Miguel Méndez (@codigo-web) on CodePen.0

Selección múltiple

Es posible que la lista de opciones se muestre como un combo, e incluso, que se pueda seleccionar más de una opción con los siguientes atributos en la instrucción <select></select>:

size

Su valor representa el número de elementos  a mostrar.

multiple

Al incluirlo como atributo y con valor multiple, hace posible que se pueda seleccionar más de un elemento, oprimiendo la tecla Ctrl en PC o Command en Mac.

See the Pen formSelectMultiple by Miguel Méndez (@codigo-web) on CodePen.0

<select name="nacionalidad[]" multiple="multiple">...</select>

Área de texto (Textarea)
<textarea></textarea>

 Elemento en línea

Genera una entrada de texto con múltiples renglones, ideal para que el usuario escriba comentarios o textos largos.

Atributos de Área de texto (textarea)

maxlenght

Su valor representa el número máximo de caracteres que pueden escribirse dentro del área de texto.

disabled

Al incluirlo como atributo y con valor disabled, deshabilita la entrada.

See the Pen formTextarea by Miguel Méndez (@codigo-web) on CodePen.0

Grupo de campos (Fieldset)
<fieldset></fieldset>

 Elemento en bloque

Permite agrupar los elementos de un formulario, para una mejor organización de este.

Por lo general se incluye una leyenda en forma de título para el grupo con la instrucción legend.

Leyenda (Legend)
<legend></legend>

 Elemento en bloque

Su contenido representa al título de un Grupo de campos (Fieldset).

See the Pen formFieldset by Miguel Méndez (@codigo-web) on CodePen.0

Conclusión

Aunque codificar los formularios en HTML es un proceso un tanto tedioso y estos por si solos no procesan la información que se envía, es necesario conocer sus instrucciones y atributos para poder generarlos o modificarlos adecuadamente.

En este artículo escribí las generalidades de los formularios en HTML, con las instrucciones y atributos aceptados por cualquier Navegador web.

HTML5 trajo nuevos elementos, tipos de entrada y atributos que añaden simplicidad en el llenado de información. En un futuro artículo describiré estas nuevas características.

En el siguiente ejemplo se resume lo descrito en este artículo:

See the Pen formHTML by Miguel Méndez (@codigo-web) on CodePen.0

Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas. Ver todas las entradas por Miguel Méndez