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
- 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.
<!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>
- 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>
-
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>
-
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>
- 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>
- 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>
- 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>
- 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:
- 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.
Cursos Informática Gratuitos
