Unidad 8. Ejercicio: Formulario básico



En este ejercicio practicaremos cómo insertar un formulario básico. Para realizar este ejercicio vamos a crear un nuevo archivo excel_contacto.html.

Ejercicio 1: Formulario de contacto

  1. Desde el editor Brackets abre un archivo nuevo y copia el siguiente código. Guarda el archivo con el nombre excel_contacto.html, en la carpeta ejercicios/curso-excel que ya habíamos creado en ejercicios anteriores. Copia el siguiente código de un formulario básico. Con la propiedad action="#" decimos que el archivo que va a recibir los datos sea él mismo. Lo hacemos así puesto que no vamos a crear un programa para tratar los datos.
  2. <!doctype html>
    <html lang="es">
    <head>
    <meta charset="utf-8" />
    <title>aulaClic. Contacto Excel</title>
    </head>
    <body>
    <h3>aulaClic. Contacto Excel</h3>
    <form action="#" method="get">
    <p>Nombre: <input type="text" name="nombre" /></p> <p><input type="submit" value="Enviar"></p>
    </form>
    </body>
    </html>
  3. Observa que hay que hacer clic en la caja de texto Nombre para colocar el curso y empezar a escribir. Añade la propiedad autofocus, y recarga la página con F5, para comprobar que el cursor se coloca directamente en la caja de texto.
      <p>Nombre: <input type="text" name="nombre" autofocus /></p>    
  4. Añade una casilla de verificación con el siguiente código. Comprueba que para marcar la casilla hay que hacer clic justo encima.
      <p>Acepto las condiciones de privacidad: <input type="checkbox" name="cond" /></p>    
  5. Si en lugar de una etiqueta <p> utilizamos una etiqueta <label>, basta hacer clic en cualquier parte del texo "Acepto las condiciones de privacidad" para marcar la casilla.
      <label>Acepto las condiciones de privacidad: <input type="checkbox" name="cond" /></label>      
  6. En el campo Nombre, para escribir un texto con instrucciones que desaparecerá al hacer clic utiliza el atributo placeholder con el texto "Escribe tu nombre y apellidos". Para dar un tamaño de visualización de 35 utilizamos size, y para permitir introducir 45 caracteres como máximo el atributo maxlength. Para obligar a rellenar el campo utilizamos required. también cambiamos la etiqueta <p> por <label>. Quedará así:
      <label>Nombre: <input type="text" name="nombre" placeholder="Escribe tu nombre y apellidos" autofocus size="35" maxlength="45" required /></label><br>      
    
  7. Detrás del campo Nombre, añadimos dos campos tipo radio, para elegir el sexo. Como sólo queremos que se pueda elegir uno de los dos sexos (Hombre o Mujer), ambos campos deben tener el mismo identificador en name. Observa (en la barra de direcciones) como al pulsar el botón Enviar, se envia lo que hemos puesto en value (h o m). Quedará así:
    <label>Sexo: Hombre <input type="radio" name="sexo" value="h"></label>
    <label>Mujer <input type="radio" name="sexo" value="m"></label><br>
  8. Para acabar añadimos un área de texto, un botón tipo reset y con el atributo chedked hacemos que inicialmente aparezca marcada la casilla de verificación. Este es el resultado:
     <!doctype html>
        <html lang="es">
        <head>
    <meta charset="utf-8" />
    <title>aulaClic. Contacto Excel</title>
    </head>
    <body>
    <h3>aulaClic. Contacto Excel</h3>
    <form action="#" method="post">
    <label>Nombre: <input type="text" name="nombre" placeholder="Escribe tu nombre" autofocus size="30" maxlength="25" required ></label><br>
    <label>Contacto:<br><textarea name="consulta" cols="40" rows="4" minlength="5" maxlength="200" >Escribe aquí tu consulta</textarea></label><br>
    <label>Sexo: Hombre <input type="radio" name="sexo" value="h"></label>
    <label>Mujer <input type="radio" name="sexo" value="m"></label><br>
    <label>Acepto las condiciones de privacidad: <input type="checkbox" name="cond" checked></label>
    <p><input type="reset" value="Borrar">
    <input type="submit" value="Enviar"></p>
    </form>
    </body>
    </html>
  9. Pulsa en el menú Archivo y elige Guardar con el mismo nombre el archivo html excel_contacto.html. Visualiza la página web desde el editor Brackets con el botón . Veras un formulario cómo el que muestra esta imagen:
  10. formulario básico

  11. Si no dispones de un editor de texto (por ejemplo, si estás viendo este curso desde un dispositivo móvil) puedes probar el código anterior seleccionándolo y pegándolo como se explica en esta página: Probar código desde el navegador.

 


Enero-2019 (V 2.0)
Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook ,    G+            Sobre aulaClic            Política de Cookies


© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.