Estructura de un formulario
Un sitio web , no solamente nos proporciona información , a veces es el
usuario el que le suministra o envía información a la web añadiendo
interactividad a la misma.
Una de las formas de enviar información es a través de los formularios que
tienen la misma utilidad que los formularios de papel en la vida cotidiana.
Los formularios se construyen por medio de la etiqueta <form> y su cierre
</form> que marcará el comienzo y fin del mismo.
El atributo principal de <form> es acción que le indica qué debe hacer con los
datos, uno de los posibles valores que podría tomar
es "malito:direccionemail@dominio" para mandar los datos escritos a una
determinada dirección de correo. También puede indicar la URL del script
al que se enviarán los datos (éste caso se estudiará en el tema de PHP).
El atributo method indica cómo debe enviarse la información, siendo 2 sus
posibles valores:
-GET: La información se envía junto con la URL de la web.
-POST: La información se envía dentro del paquete de petición HTTP.
Con el atributo enctype especificamos cómo debe codificarse la información
durante su transmisión. El valor que se le suele asignar es "text/plain"
que indica que los datos se enviaran como texto plano.
<form action="mailto:profe@servi.com" method="get" enctype="text/plain">
<input …../>
<input …../>
…
</form>
Escribimos este código
<form action="mailto:profe@servi.com" enctype="text/plain" method="get"><input type="text" /> <input type="text" /></form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Dentro de la etiqueta <form> encontraremos etiquetas <input/> que marcan cada uno de los campos de entrada del formulario por
los que se le solicita informaciôn al usuario. Toda entrada ha de identificarse con el atributo name por ejemplo le daremos de
valor a una entrada “CP” si lo que vamos a pedirle allí es su Código Postal. Los diferentes tipos de entradas que se pueden
usar se suele indicar mediante el atributo type cuyos posibles valores veremos a continuación. Entradas de tipo texto:Se indican
escribiendo el atributo type con valor igual a “text” y se usan para pedirle al usuario la introducción de un dato en formato
de texto.
<form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”> Apellidos:<input name=”apellidos” type=”text”/>
</form>
Estas etiquetas y atributos se mostrarán como esta aqui abajo.
Si se añade el atributo value hace que la entrada tome un determinado valor
inicial o por defecto:
<form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”>
Provincia:<input name=”provincia” type=”text” value=”granada”/>
</form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Botones de verificación (Check Box):
A diferencia del Radio Button permite marcar más de una opción a la vez.
El valor utilizado para type es “checkbox”.
Otra diferencia con Radio Button es que en este caso sí se le dará un nombre
diferente a cada entrada:
<form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”>
<input name=”moto” type=”checkbox” checked/>Tengo coche</br>
<input name=”coche” type=”checkbox” checked/>Tengo moto
<input name=”casa” type=”checkbox”/>Tengo casa propia
</form>
Estas etiquetas y atributos se mostrarán como esta aqui abajo.
Admite también el atributo checked pudiendo estar en más de una opción.
Lista de selección (Pull Down List):
Permite elegir una opción entre varias posibles. Se suele emplear cuando la
lista de opciones es demasiado extensa para usar un Radio Button. Esa lista
se despliega al hacer clic sobre ella.
La manera de escribir esta entrada ya no es a través de la etiqueta.
<input> sino con la etiqueta <select> y su
cierre </select> que contendrán las diferentes opciones indicadas mediante
la etiqueta <option/>.
<form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”>
<select name=”provincia”>
<option value=”Almería”/>Almería
<option value=”Cádiz”/ selected >Cádiz
<option value=”Córdoba”/>Córdoba
<option value=”Granada”/>Granada
<option value=”Jaén”/>Jaén
<option value=”Huelva”/>Huelva
<option value=”Málaga”/>Málaga
<option value=”Sevilla”/>Sevilla
</select>
</form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
El atributo selected permite seleccionar una opción por defecto.
área de texto:
Se usa cuando queremos que el usuario introduzca un texto de más de una línea
(párrafo). Se suele emplear para recoger opiniones o comentarios.
No utiliza tampoco la etiqueta <input/> sino las etiquetas <textarea> y su
cierre </textarea>.
Los atributos que admite son name (para el nombre de la entrada), cols
(para indicar el número de columnas que tendrá expresado en caracteres)
y rows (para indicar el número de filas que se tendrá).
Otro atributo que admite es wrap siendo éstos sus posibles valores:
-“off”: No parte la línea automáticamente y el texto se envía tal .Si se
quiere partir la línea habrá que pulsar el retorno de carro. El texto se
manda tal y como se tecleó.
-“soft”: Al llegar al final del recuadro automáticamente continúa
escribiendo en la línea de abajo. El texto se manda tal y como se tecleó.
-“hard”: Al llegar al final del recuadro automáticamente continúa escribiendo
en la línea de abajo. El texto se manda tal y como se ve en pantalla.
<form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”>
Comentarios y sugerencias:
<textarea name=”comentario” cols=”30″ rows=”10″ wrap=”hard”>
</textarea>
</form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Botón enviar (Submit): Para enviar los datos del formulario debemos crear un botón de enviar, para este fin se usa la etiqueta <input> con su atributo type con valor “submit” de manera que cuando el usuario pinche sobre él se ejecutará la acción indicada en el atributo action del formulario. Se puede usar el atributo value para cambiar el texto por defecto que aparece en el botón.
<form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”> Nombre:<input name=”nombre” type=”text”/></br> Apellidos:<input name=”apellidos” type=”text”/> <input type=”submit” value=”Enviar el formulario”/> </form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Podemos usar una imagen como botón de enviar utilizando el valor “image” en
lugar de “submit” para el atributo type.
<form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”>
Nombre:<input name=”nombre” type=”text”/>
Apellidos:<input name=”apellidos” type=”text”/>
<input type=”image” src=”boton.jpg” width=”30px” height=”30px”/>
</form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Acepta los atributos propios de la etiqueta ![]()
Botón borrar (Reset):
Si se quieren borrar los datos escritos en un formulario haremos uso del
atributo type con el valor “reset”. Acepta también el atributo value para
cambiar el texto mostrado.
<form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”>
Nombre:<input name=”nombre” type=”text”/>
Apellidos:<input name=”apellidos” type=”text”/>
<input type=”submit” value=”Enviar el formulario”/>
<input type=”reset” value=”Borrar datos”/>
</form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
Organización de las entradas de un formulario:
Cuando utilizamos formularios con una gran cantidad de entradas se puede organizar el formulario mediante conjuntos de entradas, para ello se encerrarán las entradas con las etiquetas <fieldset> y </fieldset> que además pueden contener la etiqueta <legend> y </legend> para encerrar el nombre del conjunto.
<form action=”mailto:profe@servi.com” method=”get” enctype=”text/plain”><fieldset><legend>Datos Personales</legend>Nombre:<input name=”nombre” type=”text”/>Apellidos:<input name=”apellidos” type=”text”/></fieldset><fieldset>
<legend>Datos Bancarios</legend>Número de cuenta:<input name=”cuenta” type=”text”/></fieldset>
<input type=”submit”/>
</form>
Estas etiquetas y atributos se mostraran como esta aqui abajo.
