17 Formulários

17.1 Introdución aos formulários

Un formulário HTML é unha sección dun documento que contén conteúdo normal, código, elementos especiais chamados contróis (recadros de verificación, botóns de rádio, menus, etc.) e etiquetas deses contróis. Os usuários normalmente "completan" un formulário modificando os seus contróis (introducindo texto, seleccionando elementos dos menus, etc.) antes de enviar-lle o formulário a un axente para que este o procese (p.ex.: a un servidor web, a un servidor de correo, etc.).

 <FORM action="http://unsitio.com/prog/adicionarusuario" method="post">
    <P>
    <LABEL for="nome">Nome: </LABEL>
              <INPUT type="text" id="nome"><BR>
    <LABEL for="apelidos">Apelidos: </LABEL>
              <INPUT type="text" id="apelidos"><BR>
    <LABEL for="email">email: </LABEL>
              <INPUT type="text" id="email"><BR>
    <INPUT type="radio" name="sexo" value="Home"> Home<BR>
    <INPUT type="radio" name="sexo" value="Muller"> Muller<BR>
    <INPUT type="submit" value="Enviar"> <INPUT type="reset">
    </P>
 </FORM>

17.2 Contróis

Os usuários interaccionan cos formulários através de contróis con nome.

O "nome de control" dun control vai definido polo seu atributo name . O rango dun atributo name para un control que estexa dentro dun elemento FORM é o elemento FORM .

Cada control ten un valor inicial e un valor actual, e ambos os dous son cadeas de caracteres. Consulte a definición de cada control se precisar de información sobre os valores iniciais e posíbeis restricións sobre os valores que o control poida impor. En xeral, o "valor inicial" dun control pode-se especificar co atributo value do elemento control. Porén, o valor inicial dun elemento TEXTAREA ven determinado polo seu conteúdo e o valor inicial dun elemento OBJECT nun formulário ven determinado pola implementación do obxecto (ou sexa, fica fóra do ámbito desta especificación).

O "valor actual" dun control asigna-se primeiro ao valor inicial. A partir de entón, o valor actual do control pode ser modificado através da interacción co usuário e con scripts.

O valor inicial dun control non varia. Asi, cando se limpa un formulário, o valor actual de cada control volve a ser o valor inicial. Se un control non ten un valor inicial, non se define o efecto dunha limpeza do formulário sobre ese control.

Cando se envia un formulário para ser procesado, alguns contróis os nomes dalguns contróis emparellan-se cos seus valores actuais e esas parellas son enviadas co formulário. Eses contróis cuxos parellas de nome/valor se envian chaman-se contróis exitosos .

17.2.1 Tipos de contróis

A HTML define os seguintes tipos de contróis:

botóns

Os autores poden crear tres tipos de botóns:

• botóns de enviar: Cando se activa, un botón de enviar envia un formulário. Un formulário pode conter máis de un botón de enviar
• botóns de limpeza : Cando se activa, un botón de limpeza limpa todos os contróis e pon-nos nos seus valores iniciais .
• botóns : Os botóns non teñen un comportamento por omisión. Cada botón pode ter scripts do lado do cliente asociados cos atributos de event do elemento. Cando ocorre un evento (p.ex.:, o usuário preme o botón, solta-o, etc.), dispara-se o script asociado.

  Os autores deberian especificar a linguaxe de script dun script de botón por meio dunha declaración do script por omisión (co elemento META ).

Os autores crean botóns co elemento BUTTON ou o elemento INPUT . Consulte as definicións destes elementos para detalles sobre como especificar os distintos tipos de botóns.

Nota. Os autores deberian saber que o elemento BUTTON oferece unhas capacidades de apresentación máis ricas que as do elemento INPUT .

recadros de verificación

Os recadros de verificación (e os botóns de rádio) son interruptores on/off que o usuário pode activar. Un interruptor está "seleccionado" ("on") cando se selecciona o atributo checked do elemento control. Cando se envia un formulário, só poden resultar exitosos os recadros de verificación "seleccionados" ("on").

Nun formulário, vários recadros de verificación poden compartillar o mesmo nome de control. Asi, por exemplo, un recadro de control permite que os usuários seleccionen vários valores da mesma propriedade. Para crear un control de recadro de verificación usa-se o elemento INPUT .

botóns de rádio

Os botóns de rádio son como recadros de verificación, exceito que cando vários deles compartillan o mesmo nome de control , son mutuamente exclusivos: cando un está "seleccionado" ("on"), todos os demáis que teñan o mesmo nome "deseleccionan-se" ("off"). Para crear un control de botón de rádio usa-se o elemento INPUT .

Se nengun botón de rádio dun conxunto que compartille o mesmo nome de control está seleccionado inicialmente, non se define o comportamento do axente de usuário para escoller que control está inicialmente seleccionado. Nota. Dado que as implementacións existentes tratan este caso de maneira diferente, a especificación actual difire de RFC 1866 ( [RFC1866] sección 8.1.2.4), que afirma:

En todos os casos, exactamente un dos botóns de rádio dun grupo está seleccionao. Se nengun dos elementos <INPUT> dun grupo de botóns de rádio especifica `CHECKED' ("seleccionado"), entón o axente de usuário debe seleccionar inicialmente o primeiro botón de rádio do grupo.

Dado que o comportamento dos axentes de usuário difire, os autores deberian-se asegurar de que en cada grupo de botóns de rádio se selecciona un deles inicialmente.

menus

Os menus oferecen-lles aos usuários opcións de entre as cais poden escoller. O elemento SELECT crea un menu, en combinación cos elementos OPTGROUP e OPTION .

entrada de texto

Os autores poden crear dous tipos de contróis que permiten que os usuários introduzan texto. O elemento INPUT crea un control de entrada de unha só liña e o elemento TEXTAREA crea un control de entrada de várias liñas. En ambos os dous casos, o texto introducido converte-se no valor actual do control.

seleccion de ficheiros

Este tipo de control permite que o usuário seleccione ficheiros para que os seus conteúdos se poidan enviar cun formulário. Para crear un control de selección de ficheiros usa-se o elemento INPUT .

contróis ocultos

Os autores poden crear contróis que non se mostran mais cuxos valores son enviados cun formulário. Os autores normalmente usan este tipo de control para armacenar información entre intercámbios cliente/servidor que se non se perderian debido à natureza (ver [RFC2616] ). Para crear un control oculto usa-se o elemento INPUT .

contróis de obxecto

Os autores poden inserir obxectos xenéricos nos formulários de tal maneira que os seus valores asociados se envian xunto cos demáis contróis. Para crear contróis de obxectos os autores poden usar o elemento OBJECT .

Os elementos usados para crear contróis normalmente aparecen dentro dun elemento FORM , mais tamén poden aparecer fora dunha declaración de elemento FORM cando se usan para construir interfaces de usuário. Isto trata-se na sección sobre acontecimentos intrínsecos. Observe-se que os contróis que aparecen fora dun formulário non poden ser contróis exitosos .

17.3 O elemento FORM

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- formulário interactivo -->
<!ATTLIST FORM
  %attrs;                              -- %coreattrs, %i18n, %events --
  action      %URI;          #REQUIRED -- procesador de formulários do lado do servidor --
  method      (GET|POST)     GET       -- método HTTP utilizado para enviar o formulário--
  enctype     %ContentType;  "application/x-www-form-urlencoded"
  accept      %ContentTypes; #IMPLIED  -- lista de tipos MIME para o envio de ficheiros --
  name        CDATA          #IMPLIED  -- nome do formulário para os scripts --
  onsubmit    %Script;       #IMPLIED  -- enviou-se o formulário --
  onreset     %Script;       #IMPLIED  -- limpou-se o formulário --
  accept-charset %Charsets;  #IMPLIED  -- lista de conxuntos de caracteres aceitados --
  >

Etiqueta inicial: requerida , Etiqueta final: requerida

O elemento FORM actua como contentor de contróis . Especifica:

• A composición do formulário (dada polos conteúdos do elemento).
• O programa que tratará o formulário completado e enviado (o atributo action ). O programa receptor debe ser capaz de analisar as parellas nome/valor para pode-las utilizar.
• O método polo que se enviarán ao servidor os dados do usuário (o atributo method ).
• Unha codificación de caracteres que deba ser aceitada polo servidor para poder tratar este formulário (o atributo accept-charset ). Os axentes de usuário deben-lle aconsellar ao usuário o valor do atributo accept-charset e/ou restrinxir a capacidade do usuário de introducir caracteres que non se recoñezan.

Un formulário pode conter texto e código (parágrafos, listas, etc.) ademáis dos contróis de formulário.

 <FORM action="http://unsitio.com/prog/adicionarusuario" method="post">
 ...conteúdo do formulário...
 </FORM>

Consulte a sección sobre envio de formulários para información sobre como os axentes de usuários deben preparar os dados dos formulários para os servidores e como os axentes de usuário deberian tratar as respostas esperadas.

17.4 O elemento INPUT

<!ENTITY % InputType
  "(TEXT | PASSWORD | CHECKBOX |
    RADIO | SUBMIT | RESET |
    FILE | HIDDEN | IMAGE | BUTTON)"
   >

<!-- require-se o atributo name para todos exceito para os botons enviar e limpar -->
<!ELEMENT INPUT - O EMPTY              -- control de formulário -->
<!ATTLIST INPUT
  %attrs;                              -- %coreattrs, %i18n, %events --
  type        %InputType;    TEXT      -- que tipo de control se necesita --
  name        CDATA          #IMPLIED  -- enviar como parte do formulário --
  value       CDATA          #IMPLIED  -- especificar para botóns de rádio e recadros de verificación --
  checked     (checked)      #IMPLIED  -- para botóns de rádio e recadros de verificación --
  disabled    (disabled)     #IMPLIED  -- non disponíbel neste contexto --
  readonly    (readonly)     #IMPLIED  -- para texto e contrasinais --
  size        CDATA          #IMPLIED  -- especificar para cada tipo de campo --
  maxlength   NUMBER         #IMPLIED  -- número máximo de caracteres para os campos de texto --
  src         %URI;          #IMPLIED  -- para campos con imaxes --
  alt         CDATA          #IMPLIED  -- descrición corta --
  usemap      %URI;          #IMPLIED  -- usar mapa de imaxes do lado do cliente --
  ismap       (ismap)        #IMPLIED  -- usar mapa de imaxes do lado do servidor --
  tabindex    NUMBER         #IMPLIED  -- posición na orde de tabulación --
  accesskey   %Character;    #IMPLIED  -- carácter da tecla de acesibilidade --
  onfocus     %Script;       #IMPLIED  -- o elemento recebeu o foco --
  onblur      %Script;       #IMPLIED  -- o elemento perdeu o foco --
  onselect    %Script;       #IMPLIED  -- seleccionou-se texto --
  onchange    %Script;       #IMPLIED  -- o valor do elemento mudou --
  accept      %ContentTypes; #IMPLIED  -- lista de tipos MIME para o envio de ficheiros --
  >

Etiqueta inicial: requerida, Etiqueta final: proibida

17.4.1 Tipos de control creados con INPUT

O tipo de control definido polo elemento INPUT depende do valor do atributo type :

text

Crea un control entrada de texto de unha só liña.

password

Como "text", mais o texto de entrada mostra-se de xeito que se escondan os caracteres (p.ex., unha série de asteriscos). Este tipo de control usa-se con frecuéncia para entradas sensíbeis, tais como contrasinais. Observe-se que o valor actual é o texto introducido polo usuário, non o texto mostrado polo axente de usuário.

Nota. Os deseñadores de aplicacións deberian fixar-se en que este mecanismo proporciona só unha seguranza reducida. Ainda que o contrasinal vai mascarado para observadores casuais polo axente de usuário, transmite-se ao servidor en texto simples e pode ser lido por calquer con aceso à rede de baixo nível.

checkbox

Crea un recadro de verificación.

radio

Crea un botón de rádio.

submit

Crea un botón de enviar.

image

Crea un botón de enviar gráfico. O valor do atributo src especifica o URI da imaxe que decorará o botón. Por razóns de acesibilidade, os autores deberian fornecer un texto alternativo para a imaxe através do atributo alt .

Cando se usa un dispositivo de ponteiro para facer clic na imaxe, envia-se o formulário e as coordenadas do clic pasan-se ao servidor. O valor x mide-se en pontos desde a esquerda da imaxe e o valor y en pontos desde a parte superior da imaxe. Os dados enviados incluen nome .x=valor-x e nome.y=valor-y, onde "nome" é o valor do atributo name e valor-x e valor-y son os valores das coordenadas x e y, respectivamente.

Se o servidor realiza accións diferentes dependendo do sítio no que se fixo clic, os usuários de navegadores non visuais estarán en desvantaxe. Por esta razón, os autores deberian considerar focaxes alternativas:

• Usar vários botóns de enviar (cada un coa sua própria imaxe) en lugar de un único botón gráfico de enviar. Os autores poden usar follas de estilo para controlar a posición destes botóns.
• Usar un mapa de imaxes do lado do servidor xunto cun script.

reset

Crea un botón de limpeza.

button

Crea un botón. Os axentes de usuário deberian usar o valor do atributo value como etiqueta do botón.

hidden

Crea un control oculto.

file

Crea un control de selección de ficheiro . Os axentes de usuário poden usar o valor do atributo value como nome inicial do ficheiro.

17.4.2 Exemplos de contróis que conteñen elementos INPUT

 <FORM action="http://unsitio.com/prog/adicionarusuario" method="post">
    <P>
    Nome: <INPUT type="text" name="nome"><BR>
    Apelidos: <INPUT type="text" name="apelidos"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sexo" value="Home"> Home<BR>
    <INPUT type="radio" name="sexo" value="Muller"> Muller<BR>
    <INPUT type="submit" value="Enviar"> <INPUT type="reset" value="Limpar">
    </P>
 </FORM>

<HEAD>
<META http-equiv="Content-Script-Type" content="text/javascript">
</HEAD>
<BODY>
 <FORM action="..." method="post">
    <P>
    <INPUT type="button" value="Fai clic aqui" onclick="verify()">
 </FORM>
</BODY>

<FORM action="http://servidor.dom/cgi/tratar"
    enctype="multipart/form-data"
    method="post">
 <P>
 Cal é o seu nome? <INPUT type="text" name="nome_de_quen_envia">
 Que ficheiros vai enviar? <INPUT type="file" name="nome_dos_ficheiros">
 </P>
</FORM>

17.5 O elemento BUTTON

<!ELEMENT BUTTON - -
     (%flow;)* -(A|%formctrl;|FORM|FIELDSET)
     -- botón -->
<!ATTLIST BUTTON
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED
  value       CDATA          #IMPLIED  -- remetido ao servidor ao enviar --
  type        (button|submit|reset) submit -- para usar como botón de formulário --
  disabled    (desactivado)  #IMPLIED  -- non disponíbel neste contexto --
  tabindex    NUMBER         #IMPLIED  -- posición na orde de tabulación --
  accesskey   %Character;    #IMPLIED  -- carácter da tecla de acesibilidade --
  onfocus     %Script;       #IMPLIED  -- o elemento recebeu o foco --
  onblur      %Script;       #IMPLIED  -- o elemento perdeu o foco --
  >

Etiqueta inicial: requerida, Etiqueta final: requerida

Os botóns creados co elemento BUTTON funcionan exactamente igual que os botóns creados co elemento INPUT , mais oferecen posibilidades de apresentación máis ricas: o elemento BUTTON pode ter conteúdo. Por exemplo, un elemento BUTTON que conteña unha imaxe funciona como e pode parecer-se a un elemento INPUT cuxo type sexa "image", mais o tipo de elemento BUTTON permite conteúdo.

Os axentes de usuário visuais poden mostrar botóns BUTTON con relevo e movimento para riba e abaixo cando se fai clic neles encanto os botóns INPUT se mostran como imaxes "planas".

 <FORM action="http://unsitio.com/prog/adicionarusuario" method="post">
    <P>
    Nome: <INPUT type="text" name="nome"><BR>
    Apelidos: <INPUT type="text" name="apelidos"><BR>
    email: <INPUT type="text" name="email"><BR>
    <INPUT type="radio" name="sexo" value="Home"> Home<BR>
    <INPUT type="radio" name="sexo" value="Muller"> Muller<BR>
    <BUTTON name="enviar" value="enviar" type="submit">
    Send<IMG src="/icons/tremendo.gif" alt="tremendo"></BUTTON>
    <BUTTON name="limpar" type="reset">
    Limpar<IMG src="/icons/vaia-vaia.gif" alt="vaia-vaia"></BUTTON>
    </P>
 </FORM>

Lembre que os autores deben fornecer un texto alternativo para un elemento IMG .

É ilegar asociar un mapa de imaxes cun IMG que aparece como o conteúdo dun elemento BUTTON .

<BUTTON>
<IMG src="oquesexa.gif" usemap="...">
</BUTTON>

17.6 Os elementos SELECT , OPTGROUP , e OPTION

<!ELEMENT SELECT - - (OPTGROUP|OPTION)+ -- selector de opcións -->
<!ATTLIST SELECT
  %attrs;                              -- %coreattrs, %i18n, %events --
  name        CDATA          #IMPLIED  -- nome do campo --
  size        NUMBER         #IMPLIED  -- filas visíbeis --
  multiple    (múltiple)     #IMPLIED  -- por omisión é selección simples --
  disabled    (desactivado)  #IMPLIED  -- non disponíbel neste contexto --
  tabindex    NUMBER         #IMPLIED  -- posición na orde de tabulación --
  onfocus     %Script;       #IMPLIED  -- o elemento recebeu o foco --
  onblur      %Script;       #IMPLIED  -- o elemento perdeu o foco --
  onchange    %Script;       #IMPLIED  -- mudou o valor do elemento --
  >

Etiqueta inicial: requerida, Etiqueta final: requerida