Formularios

Formulario es un elemento que permite recoger datos introducidos por el usuario. Para esto se utiliza la etiqueta <form>, entre estas etiquetas se insertan diferentes objetos que formarán el formulario.

Atributos de los formularios:

• action indica la dirección del programa que se encargara de procesar el contenido del formulario, para los correo electrónicos se añade ectype="text/plain"
• method indica el método mediante el que se tranfiere las variables al formulario. Puede tener el valor:
  • get que anexa los datos del formulario a la URL en pares nombre/valor, la longitud de una URL no puede superar 3000 caracteres y no se usa para enviar datos sensibles
  • post se usa cuando los datos enviados modifican una base de datos, envia datos confidenciales, anexa los datos del formulario dentro del cuerpo de la http solicidada sin incluir estos datos en la URL y no tiene limitaciones de tamaño
• enctype indica cómo se deben codificar los datos del formulario

<form action="mailto:formulario@diariosur.com" method="post" enctype="text/plain">

• accept-charset
• target
• autocomplete
• novalidate

---

<form> tiene varios elementos (todos estos elementos tienen un atributo en común, el name):

• textarea permite a los usuarios insertar varias líneas de texto, se suelen utilizar para incluir comentarios y tiene los valores:
  • name indica el nombre del área de texto
  • rows indica el número de lineas que podrán ser visualizadas en el área de texto
  • cols indica el número de caracteres por linea que podrán ser visualizados

  <textarea name="ejemplo" cols="20" rows="20">Escribe texto aqui....</textarea>



• input para insertar un elemento de entrada y aparte de name que indica el nombre, tiene los elementos:
  • text se utiliza para insertar texto y tiene los atributos:
    • size indica el número de caracteres que podrán ser visualizados en el campo texto
    • maxlenght indica el número de caracteres que podrán se insertados e el campo texto
    • value indica el valor inicial del campo texto

    <input name="campo" type="text" value="campo texto" size="10" maxlength="20">

  • password inserta un campo de contraseña

  <input name="contraseña" type="password" value="contraseña" size="20" maxlength="20">

  • button para inserrtar un boton y tiene los valores:
    • submit para enviar el vormulario
    • reset para restablecer el formulario
    • button para activar el JavaScript

    <input name="boton" type="submit" value="Enviar">

  • checkbox para insertar una casilla de verificación

  <input name="casilla verificación" type="checkbox" value"acepto" checked>

  • radio para insertar un boton de opción, se utiliza para insertar varios botones de donde solo uno podrá ser activado

  <input name="comida" type="radio" value="casera" checked>

  <input name="comida" type="radio" value="basura">

  • file para insertar el boton de examinar y poder enviar un fichero audio, video, imagen...., utilizando el atributo enctype="multipart/form-data"
  • hidden sirve para definir un campo oculto para el usuario
  • image

                                // para insertar una imagen como botón de envio :
                                <form action="formulario.asp">
                                Nombre<input type="text" name="nombre"><br>
                                Apellido<input type="text" name="apellido"><br>
                                <input type="image" src="boton.gif" alt="Submit" width="50" height="50">
                                </form>
                              

• select se utiliza para insertar listas desplegables, tiene como atributos:
  • name indica el nombre del menú
  • size indica el número d elementos de la lista que pueden ser visualizados al mismo tiempo
  • disabled indica que la lista etará desactivada
  • <option> tiene como atributos:
    • value indica el valor a enviar si se selecciona el elemento, si no tiene valor se envia el texto de la opcion
    • selected indica que elemento aparecera seleccionado

                                <select name="coches">
                                <option selected>--Elige coche--</option>
                                <option>VW</option>
                                <option>BMW</option>
                                </select>
                              

                                <optgroup label="Coches Alemanes">   //para agrupar  etiquetas
                                <option value="1">VW</option>
                                <option value="2">BMW</option>
                                </optgroup>
                              

• fieldset se utiliza para agrupar elementos en un rectángulo

                                <form action="" method="post">
                                <legend>Datos</legend>
                                Nombre: 
                                <input type="text" name="nombre" size="30"<>br>
                                Dirección: 
                                <input type="text" name="direccion" size="25"<>br>
                                </fieldset>
                                </form>
                              

• label define una etiqueta para un elemento input, el atributo for indica a que elemento del formulario se vincula la etiqueta

                                <form action="from.asp">
                                <label for="hombre">Hombre</label>
                                <input type="radio" name="sexo" id="hombre" value="hombre">
                                </form>
                              

• buttom para indicar un boton

                                <button type="reset" name="Eliminar">Eliminar</button>
                                <button type="button" name="Enviar">Enviar</button>
                              

Ejercicios resueltos en

Siguiente

Anterior