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 etiquetas, 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 y post.
• 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="http://www.mipag.com" method="post" target="_blank"> Elementos del formulario </form> <form action="pagina_local.php" method="post" target="_self"> Elementos del formulario </form> <form action="mailto:micorreo@correo.com" 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.
• hidden: Campo oculto. Este no será visible en el formulario.
• file: Campo para subir archivos al servidor.

Ejemplo: Componentes de un formulario

value: Especifica el valor inicial del elemento.

name: especifica el nombre que tendrá el elemento.

id: Especifica el identificador que tendrá el elemento.

disabled: Especifica si el campo va a estar deshabilitado.

readonly: Especifica si el campo es de solo lectura.

size: Especifica el tamaño en caracteres de un campo text o password.

checked: Indica que el elemento radio o checkbox inicia marcado o seleccionado.

Nota: La etiqueta
se utiliza en HTML para genera un salto de línea.

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:

<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>

Ejemplo: Elemento 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:

<select name="genero" id="idgenero" size="3" multiple="multiple" disabled="disabled"></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:

<option value="F" selected="selected" disabled="disabled">Femenino</option>

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>

Ejemplo: Elemento 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.