FORMULARIO HTML PREPARACION DEL FORMULARIO. Que información debes solicitar al visitante de tu web?

Transcripción

1 FORMULARIO HTML Con este apunte se realizara un sencillo formulario que creará un nuevo mensaje de en el computador del usuario; y dicho mensaje se rellenará con tu dirección de (como destinatario), y las respuestas que el usuario haya dado a una serie de preguntas planteadas en el formulario. PREPARACION DEL FORMULARIO Que información debes solicitar al visitante de tu web? Su nombre Su Apellido Pedirle que de una nota del 1 al 7 al sitio Que elija de una lista lo que mas le ha gustado Proponerle que deje un comentario Pedirle su dirección de para poder responderle CREACION DEL FORMULARIO Crea un archivo al que llamarás comentarios.htm y rellenalo como sale mas abajo.

2 La etiqueta form contendrá todos los campos del formulario. Cada dato tendrá su propio campo, es decir, su propio espacio. La etiqueta Method indica cómo se tratará el formulario. Los dos métodos posibles son get y post. Post permite enviar un . Action indica la operación a realizar, que en este caso es un vinculo a la dirección de correo del destinatario. Observa que he agregado el parámetro subject en el vinculo para que se rellene automáticamente el asunto del mensaje del correo electrónico. Enctype= text/plain no es obligatorio, pero permite ver el mensaje con un formato mucho mas agradable. NOMBRE Y APELLIDO Justo entre las etiquetas form añade lo siguiente: Cada campo que pueda rellenar el usuario se crea mediante la etiqueta <input.../>, mientras que el atributo type indica cual será el contenido del campo. Aquí, text indica que es un espacio para introducir texto. Cada etiqueta input debe tener un nombre (name=) que permita identificarla. Name permite asignar un nombre único a cada campo. Este campo es invisible para el usuario mientras este rellena el formulario, y no se muestra hasta el momento de enviar las respuestas por . Pero es muy importante, ya que es el que te permitirá saber a qué pregunta hace referencia cada respuesta. En el navegador debería verse lo siguiente:

3 BOTON DE OPCION Para que el usuario pueda puntuar el sitio web, le vamos a proponer que elija un valor entre 1 y 5. Solo podrá elegir una respuesta. Para estos casos, lo mejor es utilizar botones de opción (radio button). Agrega el siguiente código al formulario: Actualiza la pagina del navegador y veras algo como esto: Acabamos de crear 5 botones de opción type= radio. Todos están estructurados igual, y habrás observado que todos los botones comparten el mismo atributo name= nota ; esto es necesario para impedir que el usuario seleccione varias opciones. Solamente se puede seleccionar un botón nota. Haz una prueba, cambia el nombre de los botones y podrás seleccionar varios de ellos. De todas formas no se ajustaría a lo que queremos lograr. Value es el valor que devolverá el formulario, es decir, la respuesta que se mostrará en el . En este caso, es una nota de 1 a 5.

4 CASILLAS DE VERIFICACION La siguiente pregunta permitirá seleccionar varias respuestas de una lista de casillas. Agrega lo siguiente a tu formulario: Guarda el archivo y actualiza la pagina, ahora deberías ver algo como esto; Las casillas de verificación type= checkbox permiten seleccionar varias opciones. Pueden tener o no el mismo nombre name=. Evidentemente cada una deberá tener un valor distinto value=. Seleccionado de forma predeterminada Para que una casilla o un botón de opción aparezca preseleccionado en la página, agrega el siguiente código en la etiqueta input: Naturalmente, el usuario siempre podrá seleccionar otro o deseleccionarlo.

5 CAMPO DE TEXTO Para permitir que el usuario escriba un texto más largo, existe una etiqueta específica: textarea. Agrega lo siguiente; rows determina la cantidad de líneas que se mostrarán y cols hace lo mismo con las columnas, es decir, la cantidad de caracteres de anchura: Si el visitante quiere escribir un texto más largo que el espacio proporcionado, no hay ningún problema: Aparecerá una barra de desplazamiento!

6 DIRECCION DE Agrega un campo para que el usuario pueda introducir su direcciòn de e- mail. Es un campo de tipo texto, como el que ya hemos utilizado anteriormente: CANCELAR O ENVIAR Para terminar el formulario, agregaremos dos botones dos botones en los que el usuario podrá hacer click para enviar el formulario o cancelarlo. Submit y reset son dos botones especiales, y no hay que hacer nada para que funcionen cuando el usuario haga click sobre ellos. Para personalizar el texto que se muestra en cada botón, basta con incluir el texto deseado entre <button...> y </button>. Bueno ya tenemos el formulario terminado y naturalmente como ya estarán suponiendo este podrá mejorarse estéticamente utilizando CSS. Pero eso da para otro pequeño apunte!. Este apunte esta basado en una sección del curso Crea tu sitio WEB y aprende HTML y CSS de David Bosman.

7 juan marcos solis stegmann Docente UBB