Arribi: /* Campo de entrada de texto */

2010-12-15T12:18:19Z

Campo de entrada de texto

Página nueva

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

{| border="1" cellspacing="0" cellpadding="5"

! style="background:#ffdead;" | Nome
! style="background:#ffdead;" | 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 [http://www.w3.org/TR/html401/interact/forms.html W3C].'''

== Elemento ''form'' ==
O elemento ''form'' utilízase para designar como formulario unha área da páxina web.
<source lang="html4strict">
<form> ... </form>
</source>
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:'''
<source lang="html4strict">
<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>
</source>

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

<source lang="html4strict">
variable1=contido1&variable2=contido2&variable3=contido3
</source>

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:
<source lang="html4strict">
nome=Andrea&apelidos=Torres
</source>

* '''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:
<source lang="html4strict">
get http://www.iessanclemente.net/cgi-bin/
nome.php?nome=Andrea&apelidos=Torres
</source>

* '''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í:

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

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:
<source lang="html4strict">
<p>Introduce o teu nome:
<input type="text" name="nome" size="15" maxlength="50" value="Pepe" />
</p>
</source>

=== 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:
<source lang="html4strict">
<p>Introduce un contrasinal:
<input type="password" name="contrasinal" size="8" maxlength="8" value="abc123.." />
</p>
</source>
=== 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:
<source lang="html4strict">
<p>Aquí vai un campo oculto:
<input type="hidden" name="info_adicional" value="importante" />
</p>
</source>

=== 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:
<source lang="html4strict">
<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
</source>

'''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:
<source lang="html4strict">
<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
</source>

'''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:
<source lang="html4strict">
<p>¡O formulario xa está completo!</p>
<input type="submit" value="Enviar" />
<input type="reset" value="Borrar todo" />
</source>

=== 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()":
<source lang="html4strict">
<p>Se queres que faga algo especial, preme no seguinte botón.</p>
<input type="button" name ="Boton1"value="¡Preme!" onclick="funcion();" />
</source>

=== 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:
<source lang="html4strict">
<p>¡Preme neste botón tan bonito!</p>
<input type="image" src="imaxes/boton.gif" alt="Enviar" />
</source>

=== 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:
<source lang="html4strict">
<form enctype="multipart/form-data">
<p>Envía un arquivo ademais da información do formulario:</p>
<input type="file" size="30" />
<form/>
</source>

=== Á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:
<source lang="html4strict">
<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>
</source>

=== 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:
<source lang="html4strict">
<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>
</source>

:* '''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:
<source lang="html4strict">
<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></source>
:* '''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:
<source lang="html4strict">
<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>
</source>

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

Exemplo:
<source lang="html4strict">
<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>
</source>
== 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:
<source lang="html4strict">
<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>
</source>

=== 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:
<source lang="html4strict">
<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>
</source>

--[[Usuario:Vieites|Vieites]] 22 xan 2009

Formularios - Historial de revisiones

Arribi: /* Campo de entrada de texto */