Formularios HTML

Hola a todos, hoy os explicare como insertar formularios en un documento HTML.

Los formularios son elementos que permiten construir interfaces de usuario. Se utiliza la etiqueta <form> para crear formularios, dentro de esta etiqueta va todas los campos del formulario.

Los atributos de form son action, que indica la URL de un programa que procesara los datos metidos en el formulario, y method, que indica al servidor remoto el mecanismo usado para enviar los datos escritos en el formulario (get o post). Estos atributos, en principio solo son necesarios si queremos enviar los datos del formulario para tratarlos.

A continuación veremos los elementos del formulario mas usados:

  • Cuadro de texto: permite al usuario que escriba en un cuadro de texto. Se indica con <input type=”text” />. El atributo value permite indicar un valor por defecto y el atributo size le da un tamaño personalizado. Por ejemplo

cuadro texto

  • Cuadro de contraseña: es igual que el cuadro de texto, pero el texto lo pone con asteriscos, se usa para contraseñas. Se indica con <input type=”password” />. Los atributos son los mismos que en el cuadro de texto. Por ejemplo:

cuadro password

  • Checkbox: son controles de formulario que permiten al usuario seleccionar y deseleccionar opciones individualmente. Se indica con <input type=”checkbox” />”nombre de la opcion” por cada opción. Por ejemplo:

checkbox

  • Radio button: permiten al usuario elegir una sola opción entre muchas. Se indica con <input type=”radio” />”nombre opcion” por cada opción. Para un conjunto de elementos radio que estén relacionados, deben de tener el mismo atributo name (lo explicaremos un poco mas adelante), si no lo hacemos podremos seleccionar mas de una opción. Por ejemplo:

radio

  • Botón de envío: permite enviar los datos del formulario al servidor para que los procese. Se indica con <input type=”submit” value=”nombre del boton” />. Por ejemplo:

boton envio

  • Botón de reseteo: permite resetear las opciones del formulario. Se indica con <input type=”reset” value=”nombre del boton” />. Por ejemplo:

reset

  • Fichero adjunto: permite seleccionar un fichero de nuestro equipo. Se indica con <input type=”file” />. Si lo colocamos es obligatorio que pongamos el atributo enctype=”multipart/form-data” en form. Por ejemplo:

file

  • Textarea: nos permite insertar una área de texto en un documento HTML, para que el usuario pueda escribir mas lineas. Se usa la etiqueta <textarea>. Si queremos personalizar la área de texto podemos usar los atributos cols y rows. Si queremos poner algo dentro, pondremos texto dentro. Por ejemplo:

textarea

  • Lista desplegable: permite insertar una lista desplegable en el formulario. No se usa con input, se define la lista con <select> y las opciones con <option>. También permite el atributo value y size. Si queremos seleccionar varias opciones deberemos poner el atributo multiple, si pinchamos con CTRL a varios lo veremos. Si usamos en selected en option, aparecerá seleccionado por defecto. Por ejemplo:

select 1 select 2

También podemos agrupar las opciones con la etiqueta <optgroup>, si queremos poner una etiqueta se usa el atributo <label>. Por ejemplo:

select 3 select 4

  • Fieldset: permite agrupar partes del formulario, se usa la etiqueta <fieldset> y el titulo del fieldset, se indica con <legend>. Por ejemplo:

fieldset

fieldset 2

  • Label: se usa para poner un titulo a un campo determinado, se usa la etiqueta <label>. El campo en cuestión, debe tener un atributo id, en label debe tener un atributo llamado for con el nombre del id del campo al que pone titulo. Por ejemplo:

label

Por último, quiero hablaros del atributo name, se puede usar en todos los elementos que hemos visto en ese post. Este atributo se usa como variable en JavaScript. No es obligatorio, pero si queremos usar JavaScript para HTML es recomendable usarlo. En checkbox, ponemos el nombre mas [].

Espero que os sea de ayuda.

Etiquetas

4 comments

  1. Formularios HTML | DiscoDurodeRoer, ¿Puedes explicarnos màs?, me resulta practico esta post. Saludos.

  2. Buenas noches, os ha dicho alguien que vuestro blog puede ser adictivo ? estoy preocupada, desde que os recibo no puedo parar de mirar todas vuestras sugerencias y estoy muy feliz cuando recibo uno más, sois lo mejor en español, me encata vuestra presentación y el curre que hay detrás. Un beso y abrazos, MUCHAS GRACIAS POR VUESTRO TRABAJO, nos alegrais la vida.

    Saludos

  3. Formularios HTML | DiscoDurodeRoer, me ha parecido muy revelador, me hubiera gustado que fuese más extenso pero ya saeis si lo bueno es breve es dos veces bueno. Enhorabuena por vuestra web. Besotes.

  4. Dime si necesitas, algo en especial y yo lo pondré o quieres algún que otro ejemplo?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *