Exemplo de formulario web (en inglés)
Un **formulario web** é unha agrupación de elementos creados coa linguaxe HTML/XHTML, que permite a un usuario interactuar cunha páxina web, enviando e procesando información. Componse de etiquetas de texto e campos, nos que se pode introducir a información, que logo será envíada e procesada.

Obxectos
--------

Un formulario web está contido entre as etiquetas HTML `<form>` e `</form>`. Entre as varias etiquetas están definidos os campos e etiquetas que permiten introducir a información. Os tipos de campos dispoñibles son os seguintes:

### Campo de texto

Permite ao usuario introducir un texto nunha liña. Utilízase para introducir datos con contido limitado (ex.: Nome).
A sintaxe na linguaxe HTML é a seguinte:

```
	Nome: <input type="text" name="Nome:">
```

Neste exemplo, amosarase unha etiqueta de texto Nome:, seguida dun campo de texto no que se poderá introducir o dato.

### Campo contrasinal

É igual que o campo de texto, pero mentres se escribe amosa asteriscos ou puntos para ocultar a información que se está a escribir.

```
	Contrasinal: <input type="password" name="Contrasinal">
```

### Cadro de selección (*checkbox* en inglés)

Permite ao usuario facer seleccións múltiples facendo clic sobre os cadros predefinidos

```
	Selecciona as tuas aficións:<br/>
	<INPUT type="checkbox" name="Aficións" value="Lectura"> Lectura<br/>
	<INPUT type="checkbox" name="Aficións" value="Música"> Música<br/>
	<INPUT type="checkbox" name="Aficións" value="Xogos"> Xogos<br/>
	<INPUT type="checkbox" name="Aficións" value="Internet"> Internet<br/>
```

Neste exemplo, o formulario permitirá seleccionar unha ou máis afeccións de entre as predefinidas

### Botón de opcións

Permite ao usuario facer unha selección co rato, de entre as que están predefinidas:

```
	Selecciona un xeito de pagamento:<br/>
	<INPUT type="radio" name="pagamento" value="Transferencia"> Transferencia<br/>
	<INPUT type="radio" name="pagamento" value="Tarxeta de crédito"> Tarxeta de crédito<br/>
	<INPUT type="radio" name="pagamento" value="Contrareembolso"> Contrareembolso<br/>
```

No exemplo anterior, o formulario amosará os tres xeitos de pagamento predefinidos, e permitirá seleccionar un deles

### Selector de arquivo

Permite seleccionar un ficheiro (ruta) do ordenador local, a través dun botón examinar, que logo será subido a un servidor.

```
	<input type="file" name="arquivo">
```

Amosará un selector de ficheiro cun botón examinar que abrirá o selector de ficheiros/carpetas locais do ordenador.

### Botón reinicar (*reset* en inglés)

Facendo clic sobre o mesmo borrará os datos introducidos previamente en calquera campo do formulario web.

```
	<input type="reset" value="Borrar">
```

Amosará un botón que borrará tódolos datos introducidos no formulario.

### Botón enviar

Envía/procesa os datos introducidos no formulario:

```
	<input type="submit" value="Enviar">
```

Amosará un botón que enviará o formulario.

### Área de texto

Permite ao usuario introducir un texto en varias liñas. Utilízase para introducir datos de texto con contido máis extenso (ex.: Comentarios).

```
	Comentarios:<br/>
	<TEXTAREA NAME="Comentarios" cols=40 rows=6></TEXTAREA>
```

Esta área de texto terá 40 caracteres de largura e 6 filas de altura. Permitirá introducir un texto de varias liñas.

### Lista de selección

Permite seleccionar un ou varios valores dunha lista previamente definida, a través dun selector despregable.

```
	Provincia:
	<SELECT NAME="Provincia">
		<OPTION VALUE="CO">A Coruña</OPTION>
		<OPTION VALUE="LU">Lugo</OPTION>
		<OPTION VALUE="OU">Ourense</OPTION>
		<OPTION VALUE="PO">Pontevedra</OPTION>
	</SELECT>
```

Neste exemplo, permitirá seleccionar dunha lista despregable unha das provincias galegas.

Exemplo do código HTML dun formulario completo
----------------------------------------------

Así interpreta e amosa o navegador Firefox, o código do formulario da esquerda.

```
<html>
	<head>
		<title>Formulario web</title>
	</head>
	<body>
		<form action="#" method="post">
			Nome: <input type="text" name="Nome"><br/><br/>
			Contrasinal: <input type="password" name="Contrasinal">

 			Selecciona as tuas aficións:<br/>
			<INPUT type="checkbox" name="Aficións" value="Lectura"> Lectura<br/>
			<INPUT type="checkbox" name="Aficións" value="Música"> Música<br/>
			<INPUT type="checkbox" name="Aficións" value="Xogos"> Xogos<br/>
			<INPUT type="checkbox" name="Aficións" value="Internet"> Internet<br/><br/>
 
			Selecciona un xeito de pagamento:<br/>
			<INPUT type="radio" name="Pagamento" value="Transferencia"> Transferencia<br/>
			<INPUT type="radio" name="Pagamento" value="Tarxeta de crédito"> Tarxeta de crédito<br/>
			<INPUT type="radio" name="Pagamento" value="Contrareembolso"> Contrareembolso<br/><br/>
 
			Comentarios:<br/>
			<TEXTAREA NAME="Comentarios" cols=30 rows=6></TEXTAREA>

			Provincia:
			<SELECT NAME="Provincia">
				<OPTION VALUE="CO">A Coruña</OPTION>
				<OPTION VALUE="LU">Lugo</OPTION>
				<OPTION VALUE="OU">Ourense</OPTION>
				<OPTION VALUE="PO">Pontevedra</OPTION>
			</SELECT>

			<input type="submit" value="Enviar">
			<input type="reset" value="Borrar">
		</form>
	</body>
</html>
```

Envío e procesamento dos formularios
------------------------------------

Os datos introducidos nun formulario web poden ser envíados e procesados por un servidor, indicando no atributo `action` da etiqueta `<FORM>` a URL do servidor en concreto seguida dun arquivo que conteña o código que procesará o formulario, escrito nunha linguaxe de servidor (PHP, JSP, ASP ...).
Exemplo: `<FORM action="http://url_servidor/procesa_formulario.php">`.

O procesamento, independentemente da linguaxe de servidor empregada, pódese facer basicamente de dúas formas:

* Envíando os datos por correo electrónico. O formulario terá asignado un enderezo de correo electrónico, e cando se procese, os datos serán envíados a dito enderezo
* Rexistrando os datos nunha base de datos, a partir da que poden ser procesados con posterioridade.

Véxase tamén
------------

### Outros artigos

* Navegador web
* Sitio web
* Páxina web

|  |  |
| --- | --- |
| Control de autoridades | 
* Wd: Q287539
* NKC: ph579342

 |