OLOGICOS DE ESTUDIOS SUPERIORES DE CUAUTITLAN IZ

Programacin Web Cesar Carranza Corona Arturo Villaseor Jimenez Tema: Formularios.

Formulario

Las pginas webs no son solo permiten presentar documentos de forma m

El formulario est formado por una serie de elementos (cajas de texto, c ACTION la accin que se ejecutar al pulsar el botn de enviar. Habitua METHOD indica como se enviarn losa datos del formulario al programa NAME es el nombre que identifica al formulario, til si se usan scripts de

Las cajas de texto bsicas: <input type= text> El type= text le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y La caja de texto bsica se escribira de la siguiente forma
<input type="text name="nombredelacaja">

Las cajas de texto bsicas: <input type= text> El type= text le da a la caja una apariencia sencilla. Este tipo de campos se usan para albergar informaciones cortas y concretas. La caja de texto bsica se escribira de la siguiente forma <input type="text name="nombredelacaja">

Podemos completar el estilo de esta caja gracias a los siguientes atributos: size: mediante el atributo size podemos definir el tamao de la caja. Es decir, la apariencia de la misma. Si el texto que vamos a escribir no cabe en la caja, ste se desplazar pero sin que la caja vare su tamao. El texto ir desapareciendo por la izquierda. maxlength: Este atributo nos sirve para definir la cantidad mxima de letras que se pueden escribir en la caja. No se podrn escribir en la caja ms caracteres que los indicados por el maxlength.

valu: Define si queremos que en la ventana haya un texto ya prescrito Este texto puede ayudar al usuario a saber cual es el tipo de dato que te piden en ese campo. name: para ponerle un nombre al campo. Esto resulta muy til a la hora de gestionar la informacin que nos llegue.

Aqu vemos un tipo de caja text con un tamao de 15 y un lmite de caracteres de 30. Adems, tiene un texto prescrito en l.

Campos de texto largo: <textarea>

Un <textarea> es como una caja de texto sencilla, tipo text, pero en la que dejamos al usuario espacio de sobra para poder escribir un texto largo. Son tiles para que el usuario contacte con nosotros, plantee sus dudas o sugerencias, etc. Su etiqueta es <textarea> y su correspondiente cierre </textarea>. Todo lo que vaya dentro de estas etiquetas formar parte del texto. Sus atributos bsicos son rows y cols que servirn para definir el tamao del textarea. Adems, no debemos olvidar el atributo name, que servir para definir el nombre de este campo.

Un textarea llamado comentarios y con unas dimensiones de 10 filas y de 40 columnas, tendra el cdigo siguiente:
<textarea name="comentarios" rows="10" cols="40">Escribe aqu tus comentarios</textarea>

Textos con passwords

En muchos formularios se piden datos personales que el usuario no quiere que se lean a su alrededor: contraseas, etc. Para ello debemos crear una caja que no muestre los datos que se escriben en ella y que los codifique. Esto es ms sencillo de lo que parece.

El siguiente cdigo es de un campo con datos codificados: <input type="password" name="contrasea">

ETIQUETA SELECT Las listas de opciones son de gran ayuda para los formularios en los que queremos saber la opinin de un aspecto concreto en nuestra Web, dentro de diferentes opciones planteadas previamente por nosotros.

Si queremos preguntar, por ejemplo, cul es el medio de transporte favorito de nuestro usuarios, el cdigo de la lista de seleccin podra ser el siguiente:
<select name="transporte"> <option>Coche</option> <option>Avin</option> <option>Tren</option> </select>

Pero podemos personalizar esta lista de opciones mediante una serie de atributos. Por ejemplo, podemos hacer que se vea ms de una opcin a la vez en la lista. Para ello utilizaremos size, indicando el nmero de opciones que queremos que se muestren. En la lista anterior si quisieramos que se vieran dos opciones, deberamos cambiar el cdigo anterior por el siguiente:
<select name="transporte" size="2"> <option>Coche</option> <option>Avin</option> <option>Tren</option> </select>

Otra cosa que podemos predefinir es que la opcin que aparezca seleccionada al principio no sea la primera que est en la lista. Esto se realiza gracias al atributo selected y lo tenemos que poner en la opcin que queramos que aparezca como seleccionada. En el cdigo siguiente, queramos que apareciera seleccionada la opcin del tren.
<select name="transporte"> <option>Coche</option> <option>Avin</option> <option selected>Tren</option> </select>

Por ltimo esta el atributo value. Este atributo es muy til para gestionar los datos, sobre todo si le llega a un programa. Con este atributo lo que se le hace es atribuir un nmero o una letra a cada opcin. El atributo se escribe dentro de cada opcin y se define el valor del mismo. Por ejemplo, en la primera lista que te hemos presentado podramos valorar nuestras opciones de la siguiente manera:
<select name="transporte"> <option value="1">Coche</option> <option value="2">Avin</option> <option value="3">Tren</option> </select>

Y en el supuesto de seleccionar por ejemplo la opcin del avin, al programa (o al correo electrnico) le llegara el siguiente dato: transporte=2. si te fijas, transporte es el nombre de esta lista de opciones.

Listas de botones: radio A continuacin vamos a ver otro tipo de listas de opciones o de seleccin. Son listas con botones de tipo radio. Estos botones se escriben mediente la etiqueta type=radio. Vamos a transformar la lista anterior en este tipo de lista. Fijarse que a cada opcin le vamos a atribuir una etiqueta nueva, pero todas ellas van a tener el mismo nombre. El cdigo nuevo quedara de la siguiente manera:
<input type="radio" name="transporte" value="1">Coche <br> <input type="radio" name="transporte" value="2">Avin <br> <input type="radio" name="transporte" value="3">Tren

Por defecto no saldr ninguna opcin activada. Pero si queremos activar alguna de ellas podemos hacerlo mediante el atributo checked. Por ejemplo, en el cdigo siguiente la lista de opciones tiene activada la opcin avin:
<input type="radio" name="transporte" value="1">Coche <br> <input type="radio" name="transporte" value="2" checked>Avin <br> <input type="radio" name="transporte" value="3">Tren

Listas de cajas: checkbox. Estas listas de opciones son muy parecidas a las vistas anteriormente salvo por dos detalles que vamos a mostrarte a continuacin. El primero de ellos y fundamental es que las cajas son de un tipo diferente y se escriben, por tanto, de forma diferente. Las cajas se escriben mediante type=checkbox. Otra diferencia es que as como las listas de botones tipo radio slo permitian elegir una opcin (siempre y cuando los nombres de las opciones fueran los mismos), las listas de cajas permiten seleccionar una o varias opciones.

Aqu tienes el cdigo de una lista que hemos escrito para demostrarte todo lo que te hemos explicado anteriormente:
<input type="checkbox" name="transporte" value="1">Coche <br> <input type="checkbox" name="transporte" value="2" checked>Avin <br> <input type="checkbox" name="transporte" value="3">Tren

Botones submit y reset.

Botn de envo Para enviar la informacin, el formulario necesita de un botn que le indique que el formulario ha concluido y que pueden enviar la informacin. Los botones de envo se crean con la etiqueta input de tipo submit. Adems, hay que definir el texto que queremos que est escrito en el botn. Esto lo conseguimos con el atributo value. As, el cdigo de un botn sencillo de formulario sera el siguiente:
<input type="submit" value="Enviar informacin">

Botn de resetear la informacin Es posible que el usuario una vez avanzado el formulario, quiera reiniciarlo desde el principio y volver a escribir la informacin. Para ello es muy til el botn para borrar la informacin. El botn se escribe casi igual que el anterior, cambiando el type, que en el caso de estos botones es reset y cambiando el mensaje interno del botn, o sea, el value. El ejemplo sencillo de este botn tendra el siguiente cdigo:
<input type="reset" value="Borrar informacin">

Barra de desplazamiento
<div style="border : solid 2px #ff0000; Background : #000000; color : #ffffff; padding : 4px; width : 200px; height : 50px; overflow : auto; "> 1<br /> 2<br /> 3<br /> 4<br /> 5<br /> 6<br /> 7<br />
8<br /> 9<br /> 10<br /> </div>

Ejercicio

Realizar el siguiente formulario