Índice
|
Índice |
| Ejemplo de formulario | ||
| Código | Resultado en pantalla | |
<form action="mailto:usuario@lamerce.com"
method="post"
enctype="text/plein"
>
Apellidos: <input type="text" name="apellidos" size="30">
<br><br>
Nombre: <input type="text" name="nombre" size="25">
<br><br>
¿Como ha llegado usted a esta web?<br>
<select name="acceso" size="1">
<option>Dirección recomendada en una revista</option>
<option>Dirección recomendada por un conocido</option>
<option selected>Por un buscador</option>
<option>Enlace desde otra página web</option>
</select><br><br>
<input type="submit" value="Enviar">
<input type="reset" value="Reinicicar">
</form> | ||
| Atributos de la etiqueta <form> | |
| Atributo | Dato del atributo |
| ACTION | URI (form handler) Tendrá dos posibles datos:
|
| METHOD | [ get | post ] (HTTP method for submitting form)
Son dos métodos diferentes de empaquetar la información. El método por defecto es el método get, pero el método que permite enviar mas de 100 caracteres y sin problemas con el tipo de código de los caracteres es el método post. Por tanto será el que normalmente se utilizará. |
| ENCTYPE | ContentType (content type to submit form as) Tiene que ver con el tipo mime de los datos que se envían. Normalmente será text/plein. |
| ACCEPT-CHARSET | Charsets (supported character encodings) Es el tipo de norma de códigos de carácter que se envían. Normalmente es el ISO-8859-1. |
| Controles creados con <input> | ||
| Valor para TYPE | Uso | resultado en pantalla |
| text | Este control permite al usuario editar un texto de una línea. El atributo size indica el número de caracteres de ancho del control, maxlength es el máximo número de caracteres que
tendrá el dato y value és el dato que captará el control text. <input type="text" name="apellidos" size=10 maxlength=20 value="Hola"> | |
| password | Es igual que el cuadro de texto pero en pantalla solo aparecen asteriscos, aunque el dato real
está formado por los caracteres que escribe el usuario <input type="password" name="password" size=10 maxlength=20 value="Hola"> | |
| checkbox |
El control obtenido con checkbox es una cuadro de selección que puede activar o desactivar el usuario. Si está activado el boton submit añade a la cadena que envía el nombre del cuadro con el dato contenido en el el atributo value. Si no está activado el boton submit no añade nada a la cadena. Se puede poner una cuadro activado por defecto mediante el atributo CHECKED.
<form action="mailto:usuario@lamerce.com"
method="post"
enctype="text/plein"
>
Características que prefiere para el coche<br><br>
<INPUT TYPE=checkbox NAME="metalizado" VALUE="si">Metalizado<br>
<INPUT TYPE=checkbox NAME="aireacondicionado" VALUE="si" CHECKED>
Aire acondicionado<br>
<INPUT TYPE=checkbox NAME="airbag" VALUE="si" CHECKED>Airbag<br><br>
<input type="submit" value="Envia">
</form> | |
| radio | Este control presenta botones de selección que tienen todos el mismo nombre (mismo valor de la propiedad name).
Así que estos botones están agrupados por la propiedad name. Solo uno de ellos puede estar activado y si el usuario activa uno se desactivará el que lo estuviera. Todos los botones tienen que tener la propiedad value diferente ya que con ella se construye la cadena que se envía con el botón submit. <form action="mailto:usuario@lamerce.com"
method="post"
enctype="text/plein"
>
Indique su sexo<br>
<INPUT TYPE=radio NAME="sexo" VALUE="hombre" checked> Hombre<br>
<INPUT TYPE=radio NAME="sexo" VALUE="mujer"> Mujer<br>
<input type="submit" value="Envia"><br>
<input type="reset" value="Reset">
</form> | |
| submit | Botón que ejecuta la acción de enviar los datos de un formulario. Los datos se envían en el formato indicado en los atributos de la etiqueta <form>.
Éste botón tiene que estar obligatoriamente dentro de un formulario. Recuerda que puede haber diferentes formularios en una misma página y que éste botón solo enviará los datos del formulario en el que se encuentra. Ejemplo en el recuadro de encima. | |
| reset | Botón que ejecuta la acción de restaurar los valores por defecto de los controles que se encuentran en un formulario. | |
| file | Este control es un cuadro de texto donde se puede escribir el nombre de un fichero que se adjuntará con el texto que se genera en el momento de ejecutar el botón submit.
Presenta un botón Examinar que permite al usuario elegir el fichero que se ha de adjuntar. <form method="post" action="pagina.asp"> Fichero a enviar<br> <input type="file" name="fichero" enctype="multipart/form-data"> <br><input type="submit" value="Enviar"></form> |
|
| hidden | Son controles que no visualizará el navegador pero cuyo valor si que será enviado con el resto de la información cuando se utilice el botón submit.
Se usan para pasar información entre páginas que se ejecutan en el ordenador servidor y que no tiene que ver el usuario. <input type="hidden" name="tipopagina" value="pagina de estudiante"> | |
| image | Este control es un botón de tipo submit que presenta una imagen en vez del botón.
La imagen se ha de especificar en el atributo SRC. También se puede poner un texto alternativo en el atributo alt. Cuando se ejecuta este botón submit (image) se añade al texto enviado las coordenadas del punto en el que el usuario pinchó para enviar. Lo que quiere decir que se puede utilizar como un mapa de imágenes para que el ordenador servidor actúe de forma diferente según las coordenadas que reciva. Se puede usar en combinación con un mapa de imágenes mediante el atributo USEMAP indicándole un URI del un mapa. <form method="post" action="mailto:usuario@lamerce.com">
Texto a enviar<br>
<input type="text" name="datos">
<br><input type="image" src="imagenes/mail2.gif"
value="Enviar" alt="Enviar">
</form>
| |
| button | El control de tipo input con la propiedad button es un botón de acción. Es decir, que es capaz de recibir eventos y ejecutar funciones de JavaScript u otras lenguajes como respuesta a esos eventos.
En el ejemplo siguiente aparecerá un botón como el de la derecha. Cuando se haga clic en el botón se ejecutará una función sortear() escrita en JavaScript previamente. <input type="button" value="Sortear" name="Sortear" onclick="Sortear()"> | |
| Los menús de opción <select> | ||
| Control | Uso | resultado en pantalla |
|
<select> <option></option> <option></option> .......... <option></option> </select>< | La combinación de las dos etiquetas, select y option, crea un control con un menú desplegable de opciones.
Algunos atributos de la etiqueta select son:
¿Como ha llegado usted a esta web?<br>
<select name="acceso" size="1">
<option>Dirección en una revista</option>
<option>Dirección por un conocido</option>
<option selected>Por un buscador</option>
<option>Enlace desde página web</option>
</select><
|
¿Como ha llegado usted a esta web?
|
| Los textos con<textarea> | ||
| Control | Uso | resultado en pantalla |
|
<textearea> </textarea> | Este control permite escribir textos de cualquier longitud al usuario. También se emplea para mostrar textos.
Algunos atributos són los siguientes
<textarea NAME="texto" rows=10 cols=20> Los amigos del alma que se van para no volver </textarea> |
|
| Los textos con<textarea> | ||
| Control | Uso | resultado en pantalla |
|
<button> </button> | Este control permite hacer los tres tipos de botón explicados antes pero incluyendo al mismo tiempo imágenes y texto dentro del botón.
Si nos fijamos en el ejemplo vemos que es una etiqueta con contenido y no vacía como la etiqueta input. Es en el contenido donde podremos personalizar el botón. Algunos atributos de ésta etiqueta son:
<form action="mailto:usuario@lamerce.com"
method="post"
enctype="text/plein">
<textarea NAME="texto" rows=10 cols=20>
Los amigos del alma que se van para no volver
</textarea><br><br>
<center>
<button name="submit1" value="submit" type="submit">
Enviar los datos<br>
<img src="imagenes/mail2.gif" alt="Enviar formulario">
</button>
</center>
</form>
|
|
Nombre, calle, número, piso, teléfono, sexo, email.También preguntará en cuadros de seleción sobre algunas cosas de contestació si y no como:
Lee periódicos en internet, lee periodicos en papel, lee habitualmente, etc...Evidentemente tiene el botón submit i el botón reset.