Capítulo 1 - Páginas estáticas (Parte 06 de 09)

6. Formularios

En HTML, el tag <form> contiene todos los contenidos del formulario (botones, cuadros de texto, listas desplegables) y la etiqueta <input>, permite definir diferentes elementos (botones y cuadros de texto), como se aprecia según el cuadro siguiente:

<form>

Atributos específicos

• action = "url" – Dirección de envío de los datos del formulario.
• method = "POST o GET" - empleado al enviar el formulario.
• enctype = "application/x-www-form-urlencoded o multipart/form-data" - Codificación empleada para envío de información.
• accept = "tipo_de_contenido" - Lista separada por comas de todos los tipos de documentos aceptados por el servidor.
• autocomplete: define el autocompletado.
• novalidate: deja de validar el formulario.
• Otros: accept-charset, onsubmit, onreset

Tipo de elemento

• Bloque

Descripción

• Se emplea para insertar un formulario en la página.

Los formularios utilizan los atributos action y method.

El atributo action, indica la URL de la aplicación del servidor que se encarga de procesar los datos introducidos por los usuarios, esta aplicación también se encarga de generar la respuesta que muestra el navegador.

El atributo method, específica como se envían los datos del formulario al servidor. Los valores para method son GET y POST, siendo GET por defecto. El método POST hace posible el envío de mayor cantidad de información que GET; este envía hasta 500 bytes de información, no permite el envío de archivos adjuntos. Asimismo, GET hace que los datos se vean en la barra de direcciones del navegador, mientras que con POST no se pueden ver.

Los formularios agrupan objetos visuales para ser llenados con datos o seleccionar datos de estos objetos. La siguiente lista muestra un resumen:

<input>

Atributos específicos

• type = "text | password | checkbox | radio | submit | reset | file | hidden | image | button | color | date | time | email | color | datetime" - Tipo de objeto contenido en formulario
• name = "texto" – Nombre de objeto
• value = "texto" – Asigna valor en objeto
• maxlength = "numero" – Cantidad de caracteres para los controles de texto y de password
• checked = "checked" – Marca a los checkbox y radiobutton indicando seleccionado.
• disabled = "disabled" – Deshabilita el objeto, no hay acceso a él.
• readonly = "readonly" – Contenido solo de lectura.
• src = "url" – En botones con imágenes se da la dirección de la imagen.
• alt = "texto" – Texto alternativo para el objeto.
• Autocomplete = Permite el autocompletado
• Autofocus = Enfoca el objeto

Tipo de elemento

• En línea y etiqueta vacía

Las etiquetas <fieldset> agrupa conjuntos de objetos del formulario y <legend> da un título al conjunto.

<fieldset>

• Se emplea para agrupar varios objetos de un formulario.

Tipo de elemento

• Bloque

<legend>

• Título de un conjunto de objetos del formulario agrupados con fieldset.

Tipo de elemento

• En línea

Una etiqueta es texto, solo de lectura, que describe o indica, el ingreso o selección, que debe hacer el usuario y se crea con la etiqueta <label>.

<label>

• Se emplea para indicar el ingreso o selección que debe hacer el usuario

Atributos específicos

• for = "id_de_elemento" – Identificador de objeto al cual hace referencia.
• Otros: accesskey, onfocus y onblur

Tipo de elemento

• En línea

form

• Indica a que formulario pertenece.

Para ingresar texto de varias líneas se usa la etiqueta <textarea>.

<textarea>

Se emplea para incluir un área de texto en un formulario.

Atributos específicos

• rows = "numero" - Cantidad de filas del textarea.
• cols = "numero" - Cantidad de columnas del textarea. Una columna es un carácter.
• Otros: name, disabled, readonly, onselect, onchange, onfocus, onblur, autofocus, required

Tipo de elemento

• En línea

En el caso de listar elementos, se puede usar la etiqueta <select> y cada ítem de la lista, se define con <option>.

<select>

Para una lista desplegable en un formulario.

Atributos específicos

• size = "numero" – Cantidad de elementos que muestran la lista (por defecto, solo muestra un elemento).
• multiple = "multiple" - Permite seleccionar más de un elemento.
• Otros: name, disabled, onchange, onfocus, onblur, autofocus, required

Tipo de elemento

• En línea

<option>

Define a cada ítem de la lista.

Atributos específicos

• selected = "selected" – Para seleccionar ítem de lista por defecto.
• Otros: label, disabled

Tipo de elemento

• En línea

Number: caja de texto que permite presentar un valor inicial el cual puede ser un incremento o decremento, según su atributo step.

<input type="number" step="1" value="10"/>

Date: para mostrar un calendario, a partir del cual se puede seleccionar una fecha.

<input type="date" value="2015-06-30"/>

Time: utilizado para mostrar datos sobre el tiempo en diferentes formatos:

<time datetime="21:00">9pm</time><br/> <time datetime="2015-09-12">12 de septiembre del 2015</time><br/> <time datetime="2015-09-12T13:30">12 de septiembre del 2015 a las 1:30pm</time>