https://manuais.iessanclemente.net/index.php?title=Formularios&feed=atom&action=historyFormularios - Historial de revisiones2024-03-28T15:51:31ZHistorial de revisiones de esta página en el wikiMediaWiki 1.36.2https://manuais.iessanclemente.net/index.php?title=Formularios&diff=19820&oldid=prevArribi: /* Campo de entrada de texto */2010-12-15T12:18:19Z<p><span dir="auto"><span class="autocomment">Campo de entrada de texto</span></span></p>
<p><b>Página nueva</b></p><div>== Introdución ==<br />
Os formularios ofrecen unha interface que permite aos usuarios interactuar co sitio web.<br />
<br />
Na maioría dos casos empréganse para reunir datos, ben para ofrecer unha resposta personalizada ou para reutilizalos despois.<br />
<br />
Así, os formularios están compostos por: botóns, campos de texto e menús deslizantes.<br />
<br />
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,...<br />
<br />
Neste intre só veremos os elementos e atributos para crear a interface do formulario e os elementos empregados para mellorar a accesibilidade.<br />
<br />
Os elementos que poden compoñer un formulario son os seguintes:<br />
<br />
{| border="1" cellspacing="0" cellpadding="5" <br />
<br />
! style="background:#ffdead;" | Nome<br />
! style="background:#ffdead;" | Explicación<br />
|-<br />
| ''form''<br />
| Establece o formulario<br />
|-<br />
| ''input''<br />
| Crea distintos controis<br />
|-<br />
| ''button''<br />
| Botón xenérico de entrada<br />
|-<br />
| ''textarea''<br />
| Control de entrada de texto multiliña<br />
|-<br />
| ''select''<br />
| Menú de edición múltiple ou lista deslizante<br />
|-<br />
| ''option''<br />
| Unha opción dentro dun control select<br />
|-<br />
| ''optgroup''<br />
| Define un grupo de opcións<br />
|-<br />
| ''label''<br />
| Adxunta información aos controis<br />
|-<br />
| ''fieldset''<br />
| Agrupa controis e etiquetas relacionados<br />
|-<br />
| ''legend''<br />
| Asigna unha lenda a un conxunto de campos<br />
|-<br />
|}<br />
<br />
<br />
* '''Para crear formularios existe unha interesante axuda na seguinte páxina do [http://www.w3.org/TR/html401/interact/forms.html W3C].'''<br />
<br />
== Elemento ''form'' ==<br />
O elemento ''form'' utilízase para designar como formulario unha área da páxina web.<br />
<source lang="html4strict"><br />
<form> ... </form><br />
</source><br />
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.<br />
<br />
Pódense ter varios formularios nun único documento, pero estes non poden aniñarse.<br />
<br />
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.<br />
<br />
'''Exemplo de formulario:'''<br />
<source lang="html4strict"><br />
<h2>Introduce o teu nome e apelidos</h2><br />
<form action="/cgi-bin/nome.php" method="get"><br />
<p><br />
Nome: <input type="text" name="nome" /><br /><br />
Apelidos: <input type="text" name="apelidos" /><br /><br />
<input type="submit" /> <input type="reset" /><br />
</p><br />
</form><br />
</source><br />
<br />
=== O atributo ''action'' ===<br />
O atributo ''action'' do elemento ''form'' proporciona a URL do programa que se utilizará para procesar o formulario.<br />
<br />
No exemplo anterior déixase para un ''script'' PHP chamado nome.php que se atopa no directorio /cgi-bin.<br />
<br />
=== O atributo ''method'' ===<br />
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:<br />
<br />
<source lang="html4strict"><br />
variable1=contido1&variable2=contido2&variable3=contido3<br />
</source><br />
<br />
O atributo '''''name''''' dos elementos de control do formulario proporciona os nomes de variable. O contido que o usuario introduce é o contido asignado á variable.<br />
Tendo en conta o exemplo anterior:<br />
<source lang="html4strict"><br />
nome=Andrea&apelidos=Torres<br />
</source><br />
<br />
* '''Có método ''get'',''' o navegador transfire os datos do formulario como parte da propia URL nunha única transmisión.<br />
<br />
O exemplo anterior transferido có método ''get'' quedaría do seguinte xeito:<br />
<source lang="html4strict"><br />
get http://www.iessanclemente.net/cgi-bin/<br />
nome.php?nome=Andrea&apelidos=Torres<br />
</source><br />
<br />
* '''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í:<br />
<br />
<source lang="html4strict"><br />
post http://www.iessanclemente.net/cgi-bin/nome.php HTTP1.0<br />
...[máis cabeceiras]<br />
nome=Andrea&apelidos=Torres<br />
</source><br />
<br />
Empregar un ou outro método pode depender dos requisitos do servidor. Así e todo, pode ter en conta estes consellos:<br />
* Se se trata dun formulario corto con poucos campos de entrada, o mellor é empregar o método ''get''.<br />
* Se ten que enviar formularios longos e complexos mellor có método ''post''.<br />
* Se está preocupado pola seguridade empregue o método ''post'', pois permite cifrar.<br />
<br />
== Controis de formulario ==<br />
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.<br />
<br />
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:<br />
<br />
=== Campo de entrada de texto ===<br />
Este é o tipo máis sinxelo do elemento de formulario. Permite ao usuario introducir unha soa palabra ou unha liña de texto.<br />
<br />
:* Este control permite ao usuario introducir unha soa liña de texto.<br />
:* O tamaño da casiña pódese cambiar có atributo '''''size''''' (por defecto 20 caracteres).<br />
:* O número máximo de caracteres pódese limitar co atributo '''''maxlength''''' (por defecto ilimitado).<br />
:* O valor inicial configúrase có atributo '''''value'''''.<br />
:* Se non existe un botón de envío (''submit''), pódese enviar premendo no botón '''Intro'''.<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<p>Introduce o teu nome: <br />
<input type="text" name="nome" size="15" maxlength="50" value="Pepe" /><br />
</p><br />
</source><br />
<br />
=== Entrada de texto de contrasinal ===<br />
Créase un campo de contrasinal dándolle o valor '''''password''''' ao atributo '''''type'''''.<br />
Funciona exactamente igual ao campo de entrada de texto, a única diferencia é que os caracteres quedan ocultos por asteriscos (*) ou boliches (&bull;).<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<p>Introduce un contrasinal:<br />
<input type="password" name="contrasinal" size="8" maxlength="8" value="abc123.." /><br />
</p><br />
</source><br />
=== Entrada oculta ===<br />
Este tipo de entradas engade un control que non se mostra no navegador pero si é enviado ao procesador de formularios.<br />
<br />
Créase dándolle o valor '''''hidden''''' ó atributo '''''type'''''.<br />
<br />
Estes controis son útiles cando se requiren valores fixos para procesar os datos introducidos no formulario. <br />
<br />
Os usuarios non poden nin ver nin modificar estes controis.<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<p>Aquí vai un campo oculto: <br />
<input type="hidden" name="info_adicional" value="importante" /><br />
</p><br />
</source><br />
<br />
=== Casiña de verificación ===<br />
Este tipo de elementos introdúcense dándolle o valor '''''checkbox''''' ao atributo '''''type'''''.<br />
<br />
Son como interruptores que poden ser activados e desactivados polo usuario.<br />
<br />
Pódense seleccionar, ao mesmo tempo, varias casiñas de verificación dun grupo.<br />
<br />
Cando se envía o formulario, só as casiñas activadas envían valores ao servidor.<br />
<br />
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'''''.<br />
<br />
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.<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<p>Sinala os sistemas operativos que empregas normalmente:</p><br />
<input type="checkbox" name="so" value="WinXP" /> Windows XP<br />
<input type="checkbox" name="so" value="Win2k3" /> Windows 2k3<br />
<input type="checkbox" name="so" value="Ubuntu" checked="checked" /> Ubuntu<br />
<input type="checkbox" name="so" value="Mandriva" /> Mandriva<br />
<input type="checkbox" name="so" value="Outro" /> Outro<br />
</source><br />
<br />
'''Propiedades dos ''checkbox'' :'''<br />
:* '''''checked'' : '''Informa sobre o estado do checkbox. Pode ser ''true'' o ''false''.<br />
:* '''''disabled'' : ''' Bloquea o ''checkbox''. <br />
:* '''''defaultChecked'' : ''' Se está chequeada por defecto ou non.<br />
:* '''''value'' : ''' O valor actual do ''checkbox''.<br />
:* Tamén ten as propiedades '''''form''''', '''''name''''', '''''type''''' como calquera outro elemento do formulario.<br />
<br />
'''Métodos dos ''checkbox'' : '''<br />
:* '''''click()'' : ''' É como se fixésemos un click sobre o ''checkbox'', é dicir, cambia o estado do ''checkbox''.<br />
:* '''''blur()'' : ''' Retira o foco da aplicación do ''checkbox''.<br />
:* '''''focus()'' : ''' Coloca o foco da aplicación no ''checkbox''.<br />
<br />
=== Botóns de opción ===<br />
Os botóns de opción son outro tipo elemento que poden activar e desactivar os usuarios.<br />
<br />
Introdúcense dándolle o valor '''''radio''''' ao atributo '''''type'''''.<br />
<br />
Á 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).<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<p>Sinala o sistemas operativo que estás empregando neste intre:</p><br />
<input type="radio" name="so" value="WinXP" /> Windows XP<br />
<input type="radio" name="so" value="Win2k3" /> Windows 2k3<br />
<input type="radio" name="so" value="Ubuntu" checked="checked" /> Ubuntu<br />
<input type="radio" name="so" value="Mandriva" /> Mandriva<br />
<input type="radio" name="so" value="Outro" /> Outro<br />
</source><br />
<br />
'''Propiedades dos obxectos ''radio'' : '''<br />
:* '''''checked'' : ''' Indica se está chekeado ou non un botón de radio.<br />
:* '''''defaultChecked'' : ''' O seu estado por defecto.<br />
:* '''''value'' : ''' O valor do campo de radio, asignado pola propiedade ''value'' do radio.<br />
:* '''''Length'' : ''' O número de botóns de radio que forman parte do grupo.<br />
<br />
'''Métodos dos ''radio'' : '''<br />
::Os mesmos que para os obxectos '''checkbox'''.<br />
<br />
=== Botóns de envío e reinicio ===<br />
* '''Os botóns de envío,''' utilizados para enviar os datos do formulario, engádense có tipo de elemento de entrada '''''input'''''.<br />
<br />
: Todos os formularios (a non ser que teñan un único campo de texto) precisan un control de botón de envío.<br />
<br />
: O atributo '''''value''''' configura o texto que aparece sobre o botón de envío.<br />
<br />
* '''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'''''.<br />
<br />
: O atributo '''''value''''' configura o texto que aparece sobre o botón de reinicio.<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<p>¡O formulario xa está completo!</p><br />
<input type="submit" value="Enviar" /><br />
<input type="reset" value="Borrar todo" /><br />
</source><br />
<br />
=== Botón personalizado ===<br />
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'''''.<br />
<br />
Será un botón sen función predefinida que poderá personalizarse con [[JavaScript]] (ou similar).<br />
<br />
No seguinte exemplo cando se prema no botón "Boton1" executarase unha función chamada "funcion()":<br />
<source lang="html4strict"><br />
<p>Se queres que faga algo especial, preme no seguinte botón.</p><br />
<input type="button" name ="Boton1"value="¡Preme!" onclick="funcion();" /><br />
</source><br />
<br />
=== Botón de imaxe ===<br />
Pódese empregar unha imaxe propia para un botón de envío ''submit'' empregando o valor '''''image''''' no atributo '''''type'''''.<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<p>¡Preme neste botón tan bonito!</p><br />
<input type="image" src="imaxes/boton.gif" alt="Enviar" /><br />
</source><br />
<br />
=== Selección de arquivos ===<br />
O tipo de entrada '''''file''''' permite enviar arquivos externos có formulario.<br />
<br />
Este control inclúe un campo de texto e un botón de navegación que accede aos contidos do ordenador local.<br />
<br />
Como noutros campos de texto pódense axustar os valores '''''size''''' e '''''maxwidth''''' así como o texto predeterminado do campo.<br />
<br />
Ao empregar este tipo de entradas deberíase especificar '''''enctype="multipart/form-data"''''' no elemento '''''form'''''.<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<form enctype="multipart/form-data"><br />
<p>Envía un arquivo ademais da información do formulario:</p><br />
<input type="file" size="30" /><br />
<form/><br />
</source><br />
<br />
=== Áreas de texto multiliña ===<br />
O elemento '''''textarea''''' crea una casiña de entrada de texto multiliña que permite introducir entradas de texto amplas.<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<p>¿Que pensas sobre o software libre?</p><br />
<textarea name="opinion" rows="4" cols="45"><br />
Di o que pensas do software libre en 100 palabras ou menos<br />
</textarea><br />
</source><br />
<br />
=== Crear menús có elemento ''select'' ===<br />
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.<br />
<br />
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''.<br />
<br />
:* '''Menús despregables:'''<br />
: O elemento '''''select''''' mostra un menú despregable de opcións se non se lista ningunha especificación de tamaño ou cando ''size="1".<br />
: Neste tipo de menús só se pode seleccionar un elemento de cada vez.<br />
: Có atributo '''''selected''''' eliximos un elemento ''option'' para convertelo no valor predeterminado do menú.<br />
: 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''.<br />
: O atributo '''''label''''' indica o que aparece en pantalla en lugar do contido do elemento ''option''.<br />
<br />
: Exemplo:<br />
<source lang="html4strict"><br />
<p>¿Cal é o teu sistema operativo favorito?</p><br />
<select name="so"><br />
<option value="Vista">Windows Vista</option><br />
<option value="XP">Windows XP</option><br />
<option selected="selected">Ubuntu</option><br />
<option>Mandriva</option><br />
<option>MACOS-X</option><br />
<option>BSD</option><br />
<option>Outros</option><br />
</select><br />
</source><br />
<br />
:* '''Menús deslizantes:'''<br />
: 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'''''.<br />
<br />
: 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.<br />
<br />
: Exemplo:<br />
<source lang="html4strict"><br />
<p>¿Cales son os teus sistemas operativos favoritos?</p><br />
<select name="so" size="6" multiple="multiple"><br />
<option value="Vista">Windows Vista</option><br />
<option selected="selected" value="XP">Windows XP</option><br />
<option selected="selected">Ubuntu</option><br />
<option>Mandriva</option><br />
<option>MACOS-X</option><br />
<option>BSD</option><br />
<option>Outros</option><br />
</select></source><br />
:* '''Grupos de opcións:'''<br />
: 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.<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<p>¿Cales son os teus sistemas operativos favoritos?</p><br />
<select name="so" size="6" multiple="multiple"><br />
<optgroup label="Windows"><br />
<option>Windows Vista</option><br />
<option>Windows XP</option><br />
</optgroup><br />
<optgroup label="Linux"><br />
<option>Ubuntu</option><br />
<option>Mandriva</option><br />
</optgroup><br />
<optgroup label="Outros"><br />
<option>MACOS-X</option><br />
<option>BSD</option><br />
<option>Outros</option><br />
</optgroup><br />
</select><br />
</source><br />
<br />
=== '''Botóns.''' ===<br />
O elemento '''''button''''' define un botón personalizado que funciona como os botóns creados coa etiqueta '''''input'''''.<br />
<br />
Exemplo:<br />
<source lang="html4strict"><br />
<button type="submit" name="submit"><br />
<img src="imaxes/boton_sair.gif" alt="Sair" /><br />
Rematado. Preparado para o paso dous.<br />
</button><br />
<button type="reset" name="reset"><br />
<img src="imaxes/boton_reset.gif" alt="Reset" /><br />
Inténtao de novo.<br />
</button><br />
</source><br />
== Outros elementos ==<br />
=== label ===<br />
O elemento '''''label''''' é empregado para dar información aos controis. Cada elemento ''label'' está asociado con un control do formulario.<br />
<br />
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''.<br />
<br />
Este exemplo crea unha táboa empregada para aliñar dous elementos ''input'' e os seus elementos ''label'' asociados: <br />
<source lang="html4strict"><br />
<form action="..." method="post"><br />
<table><br />
<tr><br />
<td><label for="idnome">Nome</label><br />
<td><input type="text" name="nome" id="idnome"><br />
<tr><br />
<td><label for="idape">Apelidos</label><br />
<td><input type="text" name="apelidos" id="idape"><br />
</table><br />
</form><br />
</source><br />
<br />
=== fieldset ===<br />
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. <br />
<br />
Os elementos '''''legend''''' permiten ao programador asignar unha '''caption''' ao elemento '''''fieldset'''''.<br />
<br />
Vexamos un exemplo, esta sería unha parte dun formulario mais amplo:<br />
<source lang="html4strict"><br />
<fieldset id="personal"><br />
<legend>Información Personal</legend><br />
<label for="apelidos">Apelidos : </label> <br />
<input name="apelidos" id="apelidos" type="text" tabindex="1" /><br />
<br /><br />
<label for="nome">Nome : </label><br />
<input name="nome" id="nome" type="text" tabindex="2" /><br />
<br /><br />
<label for="direccion">Dirección : </label> <br />
<input name="direccion" id="direccion" type="text" <br />
tabindex="3" /><br />
<p>...mais información personal...</p><br />
</fieldset><br />
</source><br />
<br />
--[[Usuario:Vieites|Vieites]] 22 xan 2009</div>Arribi