El elemento HTML para definir un formulario Web se especifica con la etiqueta <FORM> y tiene este aspecto:
<FORM ACTION="url" METHOD="método de envío">
<INPUT> | <SELECT> | <TEXTAREA> | <BUTTON> | <DATALIST> | <OUTPUT>
</FORM>
Estos son los atributos que encontramos en la etiqueta FORM:
ACTION: la URL de un programa que procesa la petición en el lado servidor.
METHOD: el método HTTP que el navegador utiliza para mandar los datos del formulario del cliente al servidor. Hay dos opciones:
- post: corresponde al método POST HTTP, por el cual los datos del formulario son incluidos en el cuerpo del formulario y son enviados al servidor. Los más habitual es elegir este método.
- get: corresponde al método GET HTTP, por el cual los datos del formulario son adjuntados a la URI del atributo action con un ‘?’ como separador, y la URI resultante es enviada al servidor.
Los elementos del formulario
Los elementos que se pueden tener en un formulario son:
- <INPUT>: entrada o campo del formulario. Los tipos de input más utilizados son:
- text: cuadro de texto.
- password: cuadro de texto para introducir contraseña (no se ve contenido).
- hidden: texto oculto, el navegador no lo visualiza en el documento Web, sin embargo si vemos su código podemos ver su contenido.
- checkbox: casilla de verificación.
- radio: casilla de selección.
- submit: botón de envío del contenido del formulatio al servidor.
- reset: botón que facilita el borrado de los datos completados en el formulario.
- color
- date
- datetime-local
- month
- number
- range
- search
- tel
- time
- url
- week
<input type="button"> <input type="checkbox"> <input type="color"> <input type="date"> ...
- <SELECT>: lista de selección con múltiples valores.
- <TEXTAREA>: campo de texto multilínea.
- <BUTTON>: botón de acción.
- <DATALIST>: facilita un listado de opciones predeterminadas para un cuadro de texto.
- <OUTPUT>: facilita mostrar la salida a un calculo realizado en el formulario.
Al igual que la etiqueta FORM, cada uno de los elementos del formulario tiene sus propios atributos. A modo de ejemplo, estos son los más habituales del elemento <INPUT> cuadro de texto (text):
- id: identificador del elemento.
- name: nombre del elemento. Lo habitual es que tenga el mismo valor que el atributo «id».
- type: para indicar el tipo (text, password, hidden, etc).
- required: indica si es imprescindible poner información en el campo, se pone en el campo sólo la palabra «required» (tambien es posible escribiendo required=»true»).
- placeholder: da información del dato que se espera introduzca el usuario (aparece en el cuadro de texto hasta que el usuario hace click en él).
- size: tamaño del cuadro de texto.
- maxlength: longitud máxima del texto.
- value: para inicializar con dicho valor el cuadro de texto.
<div class="inputs">
<input type="email" id="email" name="email" required size="80"></input>
</div>
