Thor 1 de julio de 2008 a las 13.05
   Imprimir artículo
elWebmaster.com

Taller de Adobe Dreamweaver: Dentro del formulario (2)


Taller de Adobe Dreamweaver: Dentro del formulario (2)Buen día muchachos y muchachas ¿como les va? Hoy tenemos la segunda parte de formularios, donde vamos a ver los últimos elementos y la próxima ya es la clase de respuestas, así que vayan preparando sus preguntas para dejar durante esta semana (01/07/2008 al 08/07/2008).

Aclaro la fecha porque sé que este taller quedará para la posteridad y tal vez sus nietos o algún que otro alienígena del futuro aprenderán de el, jajaja ^_^. Bueno, dejemos las ironías y/o idioteces aparte y vayamos al taller.

Hoy vamos a ver algunas otras partes, ademas de los inputs que vimos la clase pasada, que son muy usadas en los formularios.

Elementos del formulario (2)

Arranquemos con los textareas.

Estos campos son para texto y están delimitados por sus etiquetas de apertura y cierre <textarea></textarea>.

El tamaño que van a tener está dado mediante sus propiedades “rows” y “cols”, que van a determinar la cantidad de columnas y filas que va a tener el textarea.

Ademas de las propiedades “rows” y “cols”, tambien tienen la propiedad “name” que como ya vimos la clase pasada, es la que decide bajo qué nombre se enviará esta etiqueta hacia nuestro script (.php, .asp, etc).

Un textarea terminado quedaria más o menos así:

<textarea rows="5" cols="10" name="texto"></textarea>

Recuerden siempre que cualquier elemento de un formulario en XHTML irá, claro que sí, en un formulario.

Otro de los elementos es el checkbox.

Estas son las típicas cajas a las que se les aplica una tilde cuando se les quiere seleccionar.

Un ejemplo muy gráfico y que dudo que no se hayan cruzado alguna vez es la cajita que viene junto a “Acepta los términos y condiciones…”.

Este elemento es otro input más y trabaja como los anteriores.

La sintaxis es:

<input type="checkbox" name="condiciones" value="1" />

Mediante este checkbox, cuando lo tengamos seleccionado, enviará su value a nuestro script, para que sea manejado.

En el caso de los términos y condiciones, una acción lógica sería “si esta chequeado (si nos llega el valor 1) dejamos seguir, si no, no dejamos seguir”.

Otro elemento que también es muy usado es el radiobutton.

Este es parecido al checkbox, solo que permite una sola selección.

Si nosotros tenemos un conjunto de checkbox, podemos seleccionar ninguno, uno, varios, o todos ellos. En cambio los radiobuttons, son excluyentes, si seleccionamos uno, se nos deselecciona otro (siempre que pertenezcan al mismo grupo).

La sintaxis de los radiobuttons es:

<input type="radio" name="radio1" value="1" />

Como ven es otro input, de un tipo diferente. En este caso vamos a hacer una aclaración importante:

Supongamos que tenemos varios radiobuttons a seleccionar. TODOS DEBEN TENER EL MISMO NAME, por eso mismo son excluyentes, todos son el mismo en sí, pero con diferentes opciones a enviar. Recuerden esto porque si no no funcionarán.

Aqui dejo un ejemplo gráfico:

<input type="radio" name="accion" value="aceptar" /> <input type="radio" name="accion" value="no aceptar" />

De esta manera, los inputs al tener el mismo nombre (y ser de tipo radio) cuando seleccionamos uno, se deselecciona el otro, y es lógico que suceda ya que son acciones opuestas.

El radiobutton que este seleccionado, será el que enviará su “value” al script del servidor.

Por último y la más diferente de las etiquetas del formulario, la etiqueta <select>.

Esta etiqueta es un menu desplegable que muestra las opciones que contiene dentro, y manda al script del servidor, el valor de la opción que tengamos seleccionada.

Su sintaxis es:

<select name="opcionElegida"> <option value="1">Opcion 1</option> <option value="2">Opcion 2</option> </select>

El select mostrará la típica cajita con la flecha para abajo, donde desplegará todas sus opciones, que pueden ser cuantas queramos (agregando etiquetas <option>) y enviará al servidor el “value” del option seleccionado dentro de todos los que tengamos.

El script del servidor recibirá este valor dentro del name del select, en este caso “opcionElegida”.

Me olvidaba de algo muy importante:

Todos estos elementos del formulario, pueden estar contenidos dentro de la etiqueta <label></label> en la que podremos asignar un texto para que acompañe al elemento que pongamos en su interior.

Por ejemplo:

<label>Nombre de usuario:<input type="text" name="usuario" value="Ingrese aqui el nombre de usuario"/></label>

Conclusión:

Bueno, hoy terminamos de ver los elementos de un formulario. Tal vez haya quedado alguna cosa colgada que no recuerde en este momento (espero que no), pero bueno.

Recuerden que la clase que viene es una clase EXCLUSIVA PARA RESPONDER DUDAS Y PREGUNTAS.

Aprovechen si no entendieron algo, así trato de explicar o profundizar sobre algunos temas. Y, si no tienen dudas ¡también pueden ayudar via comentarios a algunos que sí las tengan!

Espero que les haya gustado la clase. Nos vemos la semana que viene.

¡Hasta luego!

<< CLASE ANTERIOR

CLASE SIGUIENTE >>


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (5)

  1. julian dice:

    Por favor, quiero saber algo de formularios . que tengo que poner en la parte de accion? mi mail ?? o que cosa ? Para validar ? mi mail . julialoise10@hotmail.com

  2. Mariano dice:

    Hola, soy yo de vuelta…

    bueno, antes te pedia si me podias explicar como hacer funcionar el boton..

    ya lo hice andar, pero el problema que tengo es que, al estar usando conjunto de marcos, no puedo hacer que aparezca en el marco principal..

    saludos y muchas graicas

  3. Thor dice:

    Hola chicos

    Si bien pasamos la clase de respuestas para la que viene, no quiero dejarlos con la duda.

    Julian: En el action va la pagina .php o .asp (o el tipo de script que sea), que va a procesar los datos enviados por el formulario, y guardarlos (o hacer lo que tenga que hacer con ellos).

    En la clase que viene pongo ejemplos concretos por si te quedaron dudas aun.

    Mariano: Te pediria, como pedi para la siguiente clase, si me podes poner el codigo en el que tenes error para entender un poco mas lo que te esta pasando.

    Suerte muchachos, los espero la semana que viene

  4. diana dice:

    hola me gustaria que me ayudaras mira ya hice mi formulario ya me arroja datos bueno yo ya me estoy metiendo un poquito a la programacion eso creo, lo hcie con querystring y response write pero solo una vez me aparece los datos que ingreso y lo que yo quiero es visualizar todos los mensajes que se vayan ingresando a al formulario

  5. jesus dice:

    hola me gustaria poder visualizar los comentarios ke envia un usuario ala base de datos, pero mostrandolo en mi pagina web debajo del formulario como le hago???, un ejemplo seria como lo ke es esta pagina yo envio mi comentario y al enviarlo este se visualiza en tu pagina, mas o menos eso kiero hacer.

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder