formularios input

UTP Formularios en html

Formularios en HTML

El formulario no es más que una página escrita en HTML como cualquier otra. Lo que la hace diferente es que permite capturar datos de varias maneras: directamente desde el teclado, escogiendo un valor de una lista desplegable o seleccionando una opción desde botones fijos o de todas ellas combinadas.

Una vez terminada la captura de datos, estos forman un registro que es enviado a un servidor http (web) que lo procesará y devolverá una respuesta. Pueden utilizarse también para enviar su contenido a una dirección de correo electrónico, o que simplemente abran otra página.

Un formulario se crea con el tag <FORM> generalmente se pone abajo del body y se cierra antes de cerrar el body </FORM>Se puede tener varios formularios en una misma pagina.

Algunas de las propiedades del FORM son las siguientes:

NAME nombre que se le asigna al formulario. No es obligatorio, pero si el formulario va a ser utilizado en páginas JSP , ASP, PHP, o simplemente en VBScript o JavaScript, se necesitará un nombre, ya que el formulario será considerado como un objeto.

METHOD se refiere al método que emplearemos para enviar los datos al servidor, y pueden ser dos: POST y GET. El optar por uno u otro obedece a complejas cuestiones de programación basadas en la máxima longitud de registro que puede enviarse; cada uno usa un canal de salida distinto. El que soporta más longitud es POST, y será el que utilicemos en casi todos los

Ejemplos.

ACTION se refiere a la acción que queremos que ejecute el formulario en un servidor http o en local.

Ejemplo:

<FORM NAME = FORM1 METHOD=POST ACTION=”PAGINA2.JSP”>

</FORM>

El formulario se llama FORM1 y la acción consiste en llamar a la PAGINA2.JSP con el método POST.


Tipos de campos en formularios

Se pueden usar diversos tipos de campos en los formularios. Aunque los datos siempre se capturan como cadenas de caracteres, difieren respecto a la forma en que se presenta su captura. Es conveniente observar que no es posible hacer ningún tipo de comprobación sobre los datos que el usuario va introduciendo (ello se haría usando javascript).

La tabla muestra las diferentes posibilidades que pueden ser utilizadas.

Campos de texto simple : INPUT

TYPE=TEXT Es el valor por defecto de TYPE. Puede omitirse. Indica que se trata de un campo de texto (TextField)

Lo podemos inicializar con un valor :

<INPUT TYPE=”text” > admite varios atributos mas:

SIZE define la longitud del campo de texto. MAXLENGTH define la máxima longitud de la cadena que se puede escribir dentro del campo. DISABLED Desactiva la caja de texto, por tanto el usuario no podrá insertar ningún texto en dicho campo.

<FORM> <INPUT type = "text"> </FORM>

<FORM> <INPUT type = "text" value = "123"> </FORM>


READONLY. Establece que el texto no puede ser modificado por el usuario.

<form name="form1"> NOMBRE : <INPUT TYPE="TEXT" name="txtNom"><br>SUELDO : <INPUT TYPE="TEXT" name="txtSue" VALUE=5400 readonly><br>Edad : <INPUT TYPE="TEXT" name="txtEdad" VALUE=15 disabled><br>

</form>

NAME define el nombre del campo de texto. Si escribes:

<FORM> <INPUT type=”text” SIZE= 25 MAXLENGTH= 5 NAME="Apellido"></FORM>

Aquí el campo de texto se llama Apellido

Para comprobar, si intentas escribir, por ejemplo, Margarita, sólo se pueden escribir 5 caracteres (Marga) dentro del campo de texto, cuya longitud es 25.


TYPE=PASSWORD para que el valor digitado por el usuario no sea visible :

<FORM> <INPUT TYPE="PASSWORD" name=”clave”> </FORM>

Este campo se llama clave

TYPE=HIDDEN se utiliza para pasar datos que necesite otra pagina o servlet, pero que no es necesario que lo digite el usuario. De hecho, no se visualiza en la página (a menos que se visualice el código de la misma).

Se escribe:

<FORM> <INPUT TYPE="HIDDEN" NAME=”dato” VALUE="HOLA">

</FORM>

CUIDADO, esto no es un formato encriptado, viendo el documento fuente se puede saber el valor pasado.

TYPE=SUBMIT para generar un botón que al ser pulsado cierra la captura de datos del formulario y procede a ejecutar lo definido en el atributo ACTION que ya conocemos.

Se escribe :

<FORM METHOD="POST" ACTION="PAGINA2.JSP"> <INPUT TYPE=”text” NAME="campo1">

<INPUT TYPE = "SUBMIT" VALUE="Procesar"></FORM>

HOLA

Procesar


VALUE puede acompañar a SUBMIT , y en este caso sirve para definir el texto que queremos aparezca sobre el botón. Si se omite, por defecto el visualizador muestra sobre el botón el texto "Submit".

TYPE=BUTTON genera un botón igual al generado por el tipo submit, pero que no realiza ninguna acción; es simplemente un botón "muerto" en cuanto a acciones directas (eventos). Para hacerlo útil, debemos asociarlo con un evento, por ejemplo onClick y trabajar el evento con una función JavaScript.

<INPUT TYPE=”text” NAME = "campo1"> <INPUT TYPE = "BUTTON" VALUE= "Procesar" onClick=”Calcular()”>

Otro ejemplo : escribir un nombre en un campo de texto y mostrar con un alert “Te llamas Fulano”. Usar un botón con evento, implementándolo con Javascript.

La solución se muestra a continuación :

<html><head>

<script>function mens(nom){

alert("Te llamas "+ nom);}

</script></head>

<body><form name="form1">

Nombre : <INPUT type=”text” SIZE=25 NAME="nombre"> <br><br>

<INPUT TYPE= "button" value = "Mostrar saludo" onClick= "mens(nombre.value)">

</form></body>

</html>

TYPE=RESET para generar un botón que al ser pulsado limpia todos los campos del formulario.


Se escribe por ejemplo:

VALUE acompaña a RESET, y en este caso sirve para definir el texto que se mostrara sobre el botón. Si se omite Value, por defecto el visualizador colocara el texto "Reset" sobre el botón.

TYPE = IMAGE hace que el visualizador presente una imagen que sea sensible al evento click del ratón. Para presentar la imagen se utiliza el atributo SRC. El evento click sobre la imagen, se debe manejar con una función javascript. Tambien puede controlar el tamaño de la imagen con width y height.Se escribe:

<INPUT TYPE = IMAGE NAME= "imagen" SRC="foto.jpg">

<html><head>

<script>function mensaje(){

alert("Es Selena Gomez");}

</script></head><body>

<form name="form1"> <h2>Quien esta artista ?</h2> <br><INPUT TYPE= image name="imagen" src="selena.jpg"

width= 410 height=450 onClick= "mensaje()"></form>

</body></html>

Click en la foto


TYPE=RADIO genera botones circulares que permiten seleccionar solo un valor, es decir activar una sola opción.

<html><head></head><body>

<form name="form1"> Seleccione sexo :<br> Masculino

<INPUT type="radio" name="sexo" value="M">Femenino

<INPUT type="radio" name ="sexo" value="F"> <br><br>

<INPUT TYPE="SUBMIT" VALUE="Procesar"> <INPUT TYPE="RESET" VALUE="Inicializar">

</form></body>

</html>

En este ejemplo, los botones permiten seleccionar Masculino o Femenino o ninguna de las dos. Si se desea que por defecto un valor esté seleccionado, por ejemplo Masculino, hay que añadir el parámetro CHECKED después del valor : ... VALUE="M"

Seleccione sexo :<br> Masculino

<INPUT TYPE="RADIO" NAME= "sexo" VALUE="M" checked>Femenino

<INPUT TYPE = "RADIO" NAME= "sexo" VALUE="F">

TYPE=CHECKBOX genera casillas de marca que permiten seleccionar uno o más valores, es decir activar más de una opción.

<html><head></head><body>

<form name="form1"> Seleccione sus aficiones :<br> Lectura

<INPUT TYPE="checkbox" NAME= "aficiones" VALUE="Lect">Futbol

<INPUT TYPE = "checkbox" NAME= "aficiones" VALUE="Fut">Natacion


<INPUT TYPE = "checkbox" NAME= "aficiones" VALUE="Nat">Voleybol

<INPUT TYPE = "checkbox" NAME= "aficiones" VALUE="Vol">

<br><br><INPUT TYPE="SUBMIT" VALUE="Procesar">

<INPUT TYPE="RESET" VALUE="Inicializar"></form>

</body></html>

En este ejemplo, se marcaron las casillas Lectura y Natación. Pero también puede ser ninguna, o todos. Si se desea que por defecto un valor esté seleccionado, por ejemplo Futbol, hay que añadir el parámetro CHECKED después del valor : ... VALUE="Fut" CHECKED>

TYPE=SELECT Permite realizar selecciones en forma de menú desplegable (tipo comboBox). La sintaxis difiere bastante de la de los tipos anteriormente descritos.

En este caso, se usa una directiva llamada "SELECT" entre cuya apertura y cierre se escriben directivas "OPTION" con cada una de las posibles opciones que se deben mostrar.

SELECT puede usar como modificadores :

NAME="texto" : nombre de la variable SIZE=número : fija el número de líneas del cuadro de selección.

OPTION puede usar el modificador SELECTED que selecciona por defecto dicha opción.

<form name="form1"> <select name="Estado Civil">

<Option>Soltero<Option>Casado<Option selected>Divorciado<Option>Viudo


<Option>Conviviente</select>

</form>

formularios input

Documents