Formularios

Introdución

Os formularios ofrecen unha interface que permite aos usuarios interactuar co sitio web.

Na maioría dos casos empréganse para reunir datos, ben para ofrecer unha resposta personalizada ou para reutilizalos despois.

Así, os formularios están compostos por: botóns, campos de texto e menús deslizantes.

O traballo real con estes datos queda en mans de aplicacións de procesado de formularios no servidor ou no cliente, como scripts CGI, ASP, ASP.NET, ColdFusion, PHP, servlets Java, JavaScript,...

Neste intre só veremos os elementos e atributos para crear a interface do formulario e os elementos empregados para mellorar a accesibilidade.

Os elementos que poden compoñer un formulario son os seguintes:

Nome	Explicación
form	Establece o formulario
input	Crea distintos controis
button	Botón xenérico de entrada
textarea	Control de entrada de texto multiliña
select	Menú de edición múltiple ou lista deslizante
option	Unha opción dentro dun control select
optgroup	Define un grupo de opcións
label	Adxunta información aos controis
fieldset	Agrupa controis e etiquetas relacionados
legend	Asigna unha lenda a un conxunto de campos

• Para crear formularios existe unha interesante axuda na seguinte páxina do W3C.

Elemento form

O elemento form utilízase para designar como formulario unha área da páxina web.

<form> ... </form>

O formulario pode ter calquera tipo de contido Web (imaxes, texto, táboas, etc.) pero a súa función é a de conter distintos controis (casiñas de verificación, menús, campos de entrada, botóns, etc) empregados para introducir información. Tamén ten os atributos necesarios para interactuar có script de procesado do formulario.

Pódense ter varios formularios nun único documento, pero estes non poden aniñarse.

Cando un usuario enche un formulario e preme no botón de envío, o navegador toma a información, a dispón en parellas nome/valor, a codifica para a transferencia e a envía ó servidor.

Exemplo de formulario:

 <h2>Introduce o teu nome e apelidos</h2>
 <form action="/cgi-bin/nome.php" method="get">
 <p>
   Nome: <input type="text" name="nome" /><br />
   Apelidos: <input type="text" name="apelidos" /><br />
  <input type="submit" /> <input type="reset" />
 </p>
 </form>

O atributo action

O atributo action do elemento form proporciona a URL do programa que se utilizará para procesar o formulario.

No exemplo anterior déixase para un script PHP chamado nome.php que se atopa no directorio /cgi-bin.

O atributo method

Este atributo especifica un dos dous métodos, get ou post, para enviar información do formulario ao servidor. A información do formulario, normalmente, transmítese do xeito que se ve no seguinte exemplo:

 variable1=contido1&variable2=contido2&variable3=contido3

O atributo name dos elementos de control do formulario proporciona os nomes de variable. O contido que o usuario introduce é o contido asignado á variable. Tendo en conta o exemplo anterior:

 nome=Andrea&apelidos=Torres

• Có método get, o navegador transfire os datos do formulario como parte da propia URL nunha única transmisión.

O exemplo anterior transferido có método get quedaría do seguinte xeito:

 get http://www.iessanclemente.net/cgi-bin/
 nome.php?nome=Andrea&apelidos=Torres

• O método post transmite a información de entrada do formulario separada da URL, nunha mensaxe dividida en dúas partes. Con este método a información reunida polo formulario sería algo así:

 post http://www.iessanclemente.net/cgi-bin/nome.php HTTP1.0
 ...[máis cabeceiras]
 nome=Andrea&apelidos=Torres

Empregar un ou outro método pode depender dos requisitos do servidor. Así e todo, pode ter en conta estes consellos:

• Se se trata dun formulario corto con poucos campos de entrada, o mellor é empregar o método get.
• Se ten que enviar formularios longos e complexos mellor có método post.
• Se está preocupado pola seguridade empregue o método post, pois permite cifrar.

Controis de formulario

Existen distintos elementos de control de formularios cós que imos poder traballar. Todos os elementos menos submit e reset van precisar que lles poñamos un nome (atributo name) para poder ordenar a información, e este nome non debe levar nunca espazos en branco. O atributo name será como unha variable.

O elemento input utilízase para crear distintos controis de entrada de formulario, empregando para iso o atributo type, que especifica o tipo de control que se vai empregar. Vexamos os existentes:

Campo de entrada de texto

Este é o tipo máis sinxelo do elemento de formulario. Permite ao usuario introducir unha soa palabra ou unha liña de texto.

• Este control permite ao usuario introducir unha soa liña de texto.
• O tamaño da casiña pódese cambiar có atributo size (por defecto 20 caracteres).
• O número máximo de caracteres pódese limitar co atributo maxlength (por defecto ilimitado).
• O valor inicial configúrase có atributo value.
• Se non existe un botón de envío (submit), pódese enviar premendo no botón Intro.

Exemplo:

<p>Introduce o teu nome: 
 <input type="text" name="nome" size="15" maxlength="50" value="Pepe" />
</p>

Entrada de texto de contrasinal

Créase un campo de contrasinal dándolle o valor password ao atributo type. Funciona exactamente igual ao campo de entrada de texto, a única diferencia é que os caracteres quedan ocultos por asteriscos (*) ou boliches (•).

Exemplo:

<p>Introduce un contrasinal:
 <input type="password" name="contrasinal" size="8" maxlength="8" value="abc123.." />
</p>

Entrada oculta

Este tipo de entradas engade un control que non se mostra no navegador pero si é enviado ao procesador de formularios.

Créase dándolle o valor hidden ó atributo type.

Estes controis son útiles cando se requiren valores fixos para procesar os datos introducidos no formulario.

Os usuarios non poden nin ver nin modificar estes controis.

Exemplo:

<p>Aquí vai un campo oculto: 
  <input type="hidden" name="info_adicional" value="importante" />
</p>

Casiña de verificación

Este tipo de elementos introdúcense dándolle o valor checkbox ao atributo type.

Son como interruptores que poden ser activados e desactivados polo usuario.

Pódense seleccionar, ao mesmo tempo, varias casiñas de verificación dun grupo.

Cando se envía o formulario, só as casiñas activadas envían valores ao servidor.

Cando se carga a páxina, por defecto, as casiñas están desactivadas; para facer que estean activadas no momento da carga hai que engadir o atributo checked ó elemento input.

Asignado un mesmo nome a un grupo de casiñas estas comportarse como un listado de elección múltiple no que o usuario poderá escoller máis dunha opción.

Exemplo:

 <p>Sinala os sistemas operativos que empregas normalmente:</p>
  <input type="checkbox" name="so" value="WinXP" /> Windows XP
  <input type="checkbox" name="so" value="Win2k3" /> Windows 2k3
  <input type="checkbox" name="so" value="Ubuntu" checked="checked" /> Ubuntu
  <input type="checkbox" name="so" value="Mandriva" /> Mandriva
  <input type="checkbox" name="so" value="Outro" /> Outro

Propiedades dos checkbox :

• checked : Informa sobre o estado do checkbox. Pode ser true o false.
• disabled : Bloquea o checkbox.
• defaultChecked : Se está chequeada por defecto ou non.
• value : O valor actual do checkbox.
• Tamén ten as propiedades form, name, type como calquera outro elemento do formulario.

Métodos dos checkbox :

• click() : É como se fixésemos un click sobre o checkbox, é dicir, cambia o estado do checkbox.
• blur() : Retira o foco da aplicación do checkbox.
• focus() : Coloca o foco da aplicación no checkbox.

Botóns de opción

Os botóns de opción son outro tipo elemento que poden activar e desactivar os usuarios.

Introdúcense dándolle o valor radio ao atributo type.

Á diferencia das casiñas de verificación, cando un grupo de botóns de opción comparten a mesma variable name só pode activarse un botón ao mesmo tempo (todos os demais quedan desactivados automaticamente).

Exemplo:

 <p>Sinala o sistemas operativo que estás empregando neste intre:</p>
   <input type="radio" name="so" value="WinXP" /> Windows XP
   <input type="radio" name="so" value="Win2k3" /> Windows 2k3
   <input type="radio" name="so" value="Ubuntu" checked="checked" /> Ubuntu
   <input type="radio" name="so" value="Mandriva" /> Mandriva
   <input type="radio" name="so" value="Outro" /> Outro

Propiedades dos obxectos radio :

• checked : Indica se está chekeado ou non un botón de radio.
• defaultChecked : O seu estado por defecto.
• value : O valor do campo de radio, asignado pola propiedade value do radio.
• Length : O número de botóns de radio que forman parte do grupo.

Métodos dos radio :

Os mesmos que para os obxectos checkbox.

Botóns de envío e reinicio

• Os botóns de envío, utilizados para enviar os datos do formulario, engádense có tipo de elemento de entrada input.

Todos os formularios (a non ser que teñan un único campo de texto) precisan un control de botón de envío.

O atributo value configura o texto que aparece sobre o botón de envío.

• Os botóns de reinicio devolven todos os controis do formulario aos seus valores iniciais e se engaden có tipo de elemento de entrada reset.

O atributo value configura o texto que aparece sobre o botón de reinicio.

Exemplo:

 <p>¡O formulario xa está completo!</p>
    <input type="submit" value="Enviar" />
    <input type="reset" value="Borrar todo" />

Botón personalizado

Pódese crear un botón para ser utilizado por algún script do lado do cliente (por exemplo feito en JavaScript). Para iso hai que darlle o valor button ao atributo type.

Será un botón sen función predefinida que poderá personalizarse con JavaScript (ou similar).

No seguinte exemplo cando se prema no botón "Boton1" executarase unha función chamada "funcion()":

 <p>Se queres que faga algo especial, preme no seguinte botón.</p>
    <input type="button" name ="Boton1"value="¡Preme!"  onclick="funcion();" />

Botón de imaxe

Pódese empregar unha imaxe propia para un botón de envío submit empregando o valor image no atributo type.

Exemplo:

 <p>¡Preme neste botón tan bonito!</p>
 <input type="image" src="imaxes/boton.gif" alt="Enviar" />

Selección de arquivos

O tipo de entrada file permite enviar arquivos externos có formulario.

Este control inclúe un campo de texto e un botón de navegación que accede aos contidos do ordenador local.

Como noutros campos de texto pódense axustar os valores size e maxwidth así como o texto predeterminado do campo.

Ao empregar este tipo de entradas deberíase especificar enctype="multipart/form-data" no elemento form.

Exemplo:

 <form enctype="multipart/form-data">
   <p>Envía un arquivo ademais da información do formulario:</p>
       <input type="file" size="30" />
  <form/>

Áreas de texto multiliña

O elemento textarea crea una casiña de entrada de texto multiliña que permite introducir entradas de texto amplas.

Exemplo:

 <p>¿Que pensas sobre o software libre?</p>
     <textarea name="opinion" rows="4" cols="45">
         Di o que pensas do software libre en 100 palabras ou menos
     </textarea>

Crear menús có elemento select

O elemento select permite xerar un menú de opcións máis compacto que o que proporcionan agrupacións de casiñas de verificación ou de botóns de opción.

O elemento select funciona a modo de contedor para varios elementos option. Tamén pode conter un ou máis elementos optgroup, empregados para definir un grupo lóxico de elementos option.

• Menús despregables:

O elemento select mostra un menú despregable de opcións se non se lista ningunha especificación de tamaño ou cando size="1".

Neste tipo de menús só se pode seleccionar un elemento de cada vez.

Có atributo selected eliximos un elemento option para convertelo no valor predeterminado do menú.

O texto de cada elemento option é o valor enviado ao servidor. Se queremos enviar outro valor distinto aino que indicar có atributo value no elemento option.

O atributo label indica o que aparece en pantalla en lugar do contido do elemento option.

Exemplo:

 <p>¿Cal é o teu sistema operativo favorito?</p>
    <select name="so">
      <option value="Vista">Windows Vista</option>
      <option value="XP">Windows XP</option>
      <option selected="selected">Ubuntu</option>
      <option>Mandriva</option>
      <option>MACOS-X</option>
      <option>BSD</option>
      <option>Outros</option>
    </select>

• Menús deslizantes:

Para que o menú apareza como unha lista deslizante, débese especificar o número de liñas que nos gustaría que foran visibles na lista empregando o atributo size.

Tamén se pode lograr engadindo o atributo multiple ao elemento select. Este atributo tamén permite que os usuarios seleccionen máis dunha opción da lista.

Exemplo:

 <p>¿Cales son os teus sistemas operativos favoritos?</p>
   <select name="so" size="6" multiple="multiple">
      <option value="Vista">Windows Vista</option>
      <option selected="selected" value="XP">Windows XP</option>
      <option selected="selected">Ubuntu</option>
      <option>Mandriva</option>
      <option>MACOS-X</option>
      <option>BSD</option>
      <option>Outros</option>
    </select>

• Grupos de opcións:

Os grupos conceptuais de opcións poden organizarse en grupos de opcións indicándoo có elemento optgroup. O valor do atributo label (obrigatorio) móstrase como cabeceira das seguintes opcións.

Exemplo:

 <p>¿Cales son os teus sistemas operativos favoritos?</p>
   <select name="so" size="6" multiple="multiple">
     <optgroup label="Windows">
       <option>Windows Vista</option>
       <option>Windows XP</option>
     </optgroup>
     <optgroup label="Linux">
       <option>Ubuntu</option>
       <option>Mandriva</option>
     </optgroup>
     <optgroup label="Outros">
       <option>MACOS-X</option>
       <option>BSD</option>
       <option>Outros</option>
     </optgroup>
   </select>

Botóns.

O elemento button define un botón personalizado que funciona como os botóns creados coa etiqueta input.

Exemplo:

  <button type="submit" name="submit">
     <img src="imaxes/boton_sair.gif" alt="Sair" />
       Rematado. Preparado para o paso dous.
     </button>
   <button type="reset" name="reset">
      <img src="imaxes/boton_reset.gif" alt="Reset" />
        Inténtao de novo.
    </button>

Outros elementos

label

O elemento label é empregado para dar información aos controis. Cada elemento label está asociado con un control do formulario.

O atributo for asocia a cada elemento label con outro elemento do formulario: o valor do atributo for do elemento label debe ser o mesmo que o valor do atributo id do elemento có que queremos asocialo. Pódense asociar mais dunha label a un elemento do formulario configurándolles o mesmo valor aos seus atributos for.

Este exemplo crea unha táboa empregada para aliñar dous elementos input e os seus elementos label asociados:

<form action="..." method="post">
<table>
  <tr>
    <td><label for="idnome">Nome</label>
    <td><input type="text" name="nome" id="idnome">
  <tr>
    <td><label for="idape">Apelidos</label>
    <td><input type="text" name="apelidos" id="idape">
</table>
</form>

fieldset

Os elementos fieldset permiten aos autores facer un grupo de controis sobre o mesmo tema. Estes farán que os usuarios do formulario o teñan mais fácil á hora de entender como cubrir o formulario. Os elementos fieldset fan os formularios mais accesibles.

Os elementos legend permiten ao programador asignar unha caption ao elemento fieldset.

Vexamos un exemplo, esta sería unha parte dun formulario mais amplo:

 <fieldset id="personal">
    <legend>Información Personal</legend>
    <label for="apelidos">Apelidos : </label> 
    <input name="apelidos" id="apelidos" type="text" tabindex="1" />
    <br />
    <label for="nome">Nome : </label>
    <input name="nome" id="nome" type="text" tabindex="2" />
    <br />
    <label for="direccion">Dirección : </label> 
    <input name="direccion" id="direccion" type="text" 
    tabindex="3" />
    <p>...mais información personal...</p>
  </fieldset>

--Vieites 22 xan 2009