viernes, 4 de mayo de 2012

SESIÓN 7:FORMULARIOS

FORMULARIO <form>

Los formularios son una característica del estándar HTML Que permite a los autores recolectar información provista por los visitantes. Estos formularios pueden resultar útiles para reunir información personal, de contacto, preferencias, opiniones, o de cualquier otro tipo que el autor necesite.
Los formularios se insertan a través de las etiquetas <form> y </form>. Entre dichas etiquetas habrá que insertar los diferentes objetos que formarán el formulario. la etiqueta <form> tiene los siguientes atributos:
El atributo action indica una dirección de correo electrónico a la que mandar el formulario, o la dirección del programa que se encargará de procesar el contenido del formulario.
El atributo enctype indica el modo en que será cifrada la información para su envío. Por defecto tiene el valor application/x-www-form-urlencoded.
El atributo method indica el metodo mediante el que se transferirán las variables del formulario. Su valor puede ser get o post.
El valor get se utiliza cuando no se van a producir cambios en ningún documento o programa que no sea el navegador del usuario que pretende mandar el formulario, como ocurre cuando se realizan consultas sobre una base de datos.
El valor post se utiliza cuando sí se van a producir cambios, como ocurre cuando el usuario manda datos que deben ser almacenados en una base de datos.
Se recomienda utilizar el valor post.
Por ejemplo, podríamos insertar un formulario escribiendo el siguiente código:

<form action="mailto:formularios@aulaclic.com" method="post" enctype="text/plain" >
  ...
</form> 
AREAS DE TEXTO <textarea>
Las áreas de texto permiten a los usuarios insertar varias líneas de texto. Por ello, suelen utilizarse para que incluyan comentarios.
Para insertar un área de texto es necesario incluir las etiquetas <textarea> y </textarea> entre las etiquetas <form> y </form> del formulario.
Para que el área de texto tenga algún valor inicial, habrá que insertarlo entre las etiquetas <textarea> y </textarea>.
El atributo name indica el nombre del área de texto. Es necesario dar nombres diferentes a cada uno de los elementos de un formulario, para poder identificarlos a la hora de procesarlos.
El atributo rows indica el número de líneas que podrán ser visualizadas en el área de texto por lo que determina al alto del área de texto.
El atributo cols indica el número de caracteres por línea que podrán ser visualizados en el área de texto por lo que determina al ancho del área de texto.
Gracias a las barras de desplazamiento, es posible insertar más líneas de las especificadas en el atributo rows, y más caracteres por línea de los especificados en el atributo cols.
Por ejemplo, para insertar el área de texto:
<textarea name="ejemploarea" cols="30" rows="3">Escribe el texto que quieras</textarea>

ELEMENTOS DE ENTRADA <input>
Para insertar un elemento de entrada es necesario incluir la etiqueta <input> entre las etiquetas <form> y </form> del formulario.
El atributo name indica el nombre que se desea dar al elemento de entrada, mediante el cual será evaluado, y el atributo type indica el tipo de elemento de entrada.
Vamos a ver los diferentes tipos de elementos de entrada, y el resto de atributos que pueden definirse para cada uno de ellos.
  • Campo de texto:

Para insertar un campo de texto, el atributo type debe tener el valor text.
El atributo size indica el número de caracteres que podrán ser visualizados en el campo de texto, determina el ancho de la caja.
El atributo maxlenght indica el número de caracteres que podrán ser insertados en el campo de texto.
El atributo value indica el valor inicial del campo de texto.
  • Campo de contraseña:

Para insertar un campo de contraseña, el atributo type debe tener el valor password.
El resto de atributos son los mismos que para un campo de texto normal. La única diferencia es que todas las letras escritas en el campo de contraseña serán visualizadas como asteriscos.
  •  Botón:

Para insertar un botón, el atributo type debe tener el valor submit, restore o button.
Si el valor es submit, al pulsar sobre el botón se enviará el formulario.
Si el valor es restore, al pulsar sobre el botón se restablecerá el formulario, borrándose todos los campos del formulario que hayan sido modificados y adquiriendo su valor inicial.
Si el valor es button, al pulsar sobre el botón no se realizará ninguna acción.
El atributo value indica el texto que mostrará el botón.
  • Casilla de verificación:

Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.
El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores.
  • Casilla de verificación:

Para insertar una casilla de verificación, el atributo type debe tener el valor checkbox.
El atributo value indica el valor asociado a la casilla de verificación. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que la casilla aparecerá activada inicialmente. Este atributo no toma valores.
  • Botón de opción:

Para insertar un botón de opción, el atributo type debe tener el valor radio.
El atributo value indica el valor asociado al botón de opción. Es necesario poner este atributo, aunque el usuario no pueda ver su valor. Es el valor a enviar.
La aparición del atributo checked indica que el botón aparecerá activado inicialmente. Este atributo no toma valores.
Los botones de opción se utilizan cuando se desea que una variable del formulario pueda tomar un solo valor de entre varios posibles. Para ello, se insertan varios botones de opción con el mismo nombre (que indica la variable) y con distintos valores. Sólamente uno de estos botones podrá estar activado, el que esté activado cuando se envia el formulario, su valor será el que tendrá la variable.
Ingrese aquí para ver los ejemplos claramente:http://www.aulaclic.es/html/t_8_2.htm
CAMPOS DE SELECCIÓN <select>
Los campos de selección se utilizan para insertar menús y listas desplegables.
Para insertar uno de estos menús o listas es necesario insertar las etiquetas <select> y </select> en un formulario.
El atributo name indica el nombre del menú o lista será el nombre de la variable que contendrá el valor seleccionado.
El atributo size indica el número de elementos de la lista que pueden ser visualizados al mismo tiempo, determina el alto de la lista.
La aparición del atributo multiple indica que el usuario podrá seleccionar varios elementos de la lista al mismo tiempo, ayudándose de la tecla Ctrl. Este atributo no toma valores.
La aparición del atributo disabled indica que la lista estará desactivada, por lo que el usuario no podrá seleccionar sus elementos. Este atributo tampoco toma valores.
Cada uno de los elementos de la lista ha de insertarse entre las etiquetas <option> y </option>.
El atributo value indica el valor a enviar si se selecciona el elemento. Si no se especifica este atributo, se enviará el texto de la opción, que se encuentra entre las etiquetas <option> y </option>.
La aparición del atributo selected indica que el elemento aparecerá seleccionado. Este atributo no toma valores.
Ingrese aquí para ver los ejemplos claramente:http://www.aulaclic.es/html/t_8_3.htm






1 comentario:

  1. Una página web, es una la mejor desicion que puedes tomar para hacer crecer tu negocio, recuerda que debe contar con diseño adaptativo, elegante y agradable, además de estar optimizado para los motores de busqueda con el fin de mejorar la visibilidad de estos, los invito a conocer web Cancún una de las empresas con los mejores diseños de Paginas web cancun

    ResponderEliminar