ejercicios de html bÁsico...
TRANSCRIPT
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
EJERCICIOS DE HTML BÁSICO FORMULARIOS
1. FORMULARIOS <FORM>
Ejemplo: Confeccionar un formulario que contenga un cuadro de texto donde el visitante debe ingresar
su nombre y un botón de tipo submit para el envío de los datos ingresados al servidor (tener en cuenta
que la página que procesa los datos del formulario en el servidor se encuentra en la raiz del sitio y se
llama: registrardatos.php aunque esto lo veremos más adelante)
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre"
size="20"> <br>
<input type="submit" value="enviar">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 1: Confeccionar un formulario que solicite el ingreso del nombre de una persona y
su edad. Disponer un botón de tipo submit para el envío de los datos.
Jesús Núñez González y Antonio J. Conejo 1
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
2. CONTROLES DE FORMULARIOS: TIPOS TEXT Y PASSWORD
Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre de un usuario y su clave.
Mostrar asteriscos donde se ingresa la clave. Disponer dos botones, uno para el envío de datos al servidor
y otro para borrar el contenido de todos los controles (editores de texto) que contiene el formulario.
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre"
size="20"> <br>
Ingrese su clave:
<input type="password" name="clave" size="12">
<br>
<input type="submit" value="enviar">
<input type="reset" value="borrar">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 2: Confeccionar un formulario que solicite el ingreso de mail de una persona y luego
pida el ingreso de su clave dos veces (recordar inicializar la propiedad name del elemento
input con distintos nombres para cada control)
Jesús Núñez González y Antonio J. Conejo 2
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
3. CONTROLES DE FORMULARIOS: TEXTAREA
Ejemplo: Confeccionar un formulario para que un visitante pueda ingresar su nombre, su mail y un
comentario del sitio, empleando para este último dato a ingresar un elemento de tipo textarea.
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Ingrese su mail:
<input type="text" name="mail"
size="50"><br> Comentarios:<br>
<textarea name="comentarios" rows="5" cols="60"></textarea>
<br> <input type="submit" value="Enviar">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 3: Confeccionar un formulario que permita ingresar el nombre de una persona, su
mail, su dni (documento nacional de identidad) y finalmente su curriculum (este último dato
hacerlo utilizando un textarea)
Jesús Núñez González y Antonio J. Conejo 3
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
4. CONTROLES DE FORMULARIOS: CHECKBOX
Ejemplo: Implementar un formulario que solicite el ingreso del nombre de una persona y 4 elementos
de tipo checkbox para que seleccione los lenguajes de programación que conoce.
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione los lenguajes que conoce:
<br>
<input type="checkbox" name="java">Java<br>
<input type="checkbox" name="cmasmas">C++<br>
<input type="checkbox" name="c">C<br>
<input type="checkbox" name="csharp">C#<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 4: Confeccione un formulario que solicite el ingreso de un mail, una clave y luego
muestre una serie de títulos de películas con su respectivo checkbox. Disponer también del
botón de tipo submit para el envío de datos al servidor.
Jesús Núñez González y Antonio J. Conejo 4
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
5. CONTROLES DE FORMULARIOS: RADIO
Ejemplo: Solicitar el ingreso del nombre de una persona y el máximo nivel en estudios alcanzado (sin Estudios, Estudios primarios, Estudios secundarios o Estudios universitarios). Utilizar controles de tipo radio
para la selección de estudios realizados.
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre"
size="30"><br> Seleccione el máximo nivel de
estudios que tiene: <br>
<input type="radio" name="estudios" value="1">Sin estudios<br>
<input type="radio" name="estudios" value="2">Primario<br>
<input type="radio" name="estudios" value="3">Secundario<br>
<input type="radio" name="estudios"
value="4">Universitario<br> <input type="submit"
value="Enviar"> </form> </body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 5: Confeccionar un formulario que solicite al usuario su nombre y cual sistema
operativo utiliza más (linux o windows).
Jesús Núñez González y Antonio J. Conejo 5
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
6. CONTROLES DE FORMULARIOS: SELECT
Ejemplo: Confeccionar un formulario que solicite cargar el nombre de una persona y el pais donde
vive, este último elemento mediante un control de tipo select permitir seleccionar el pais. <html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione su pais:
<select name="pais">
<option value="1">Argentina</option>
<option value="2">España</option> <option value="3">Alemania</option>
<option value="4">Francia</option>
<option value="5">Italia</option>
<option value="7">Holanda</option>
<option value="8">Brasil</option>
<option value="9">EEUU</option>
<option value="10">Rusia</option>
</select><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 6: Confeccionar un formulario que solicite el ingreso del nombre de una persona y
permita votar el sitio. Mediante un cuadro de selección el visitante puede elegir entre las
siguientes opciones: Excelente, Muy Bueno, Bueno, Regular y Malo.
Jesús Núñez González y Antonio J. Conejo 6
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
7. CONTROLES DE FORMULARIOS: SELECT (selección múltiple)
Ejemplo: Confeccionar un formulario que solicite cargar el nombre de una persona y el pais donde
vive, este último elemento mediante un control de tipo select permitir seleccionar el pais.
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione uno o varios colores (Presione Ctrl para seleccionar varios
colores)<br> <select name="colores[]" size="4" multiple> <option
value="1">Rojo</option>
<option value="2">Verde</option>
<option value="3">Azul</option> <option value="4">Amarillo</option>
<option value="5">Blanco</option>
<option value="6">Negro</option>
<option value="7">Naranja</option>
<option value="8">Violeta</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 7: Confeccionar un formulario que muestre en un control select un serie de mail.
Luego permitir que el visitante seleccione uno o varios mail del cuadro de selección.
Jesús Núñez González y Antonio J. Conejo 7
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
8. CONTROLES DE FORMULARIOS: SELECT (grupos de opciones)
Ejemplo: Confeccionar una página que muestre un control de tipo select. Agrupar las opciones en dos
grupos, en uno las frutas y en otro las verduras. Utilizar el elemento optgroup para el agrupamiento. <html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Seleccione una fruta o verdura:
<select name="articulo">
<optgroup label="Frutas">
<option value="1">Naranjas</option>
<option value="2">Manzanas</option>
<option value="3">Sandia</option>
</optgroup> <optgroup label="Verduras">
<option value="4">Lechuga</option>
<option value="5">Acelga</option>
<option value="6">Zanahorias</option>
<option value="7">Calabaza</option>
</optgroup>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 8: Confeccione un control de tipo select con los nombres de países de América y
Europa. Agrupe los países por continente.
Jesús Núñez González y Antonio J. Conejo 8
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
9. CONTROLES DE FORMULARIOS: BUTTON
Ejemplo: Confeccionaremos una página que muestre el teclado de una calculadora. Utilizar el
elemento input inicializando la propiedad type con el valor "button". <html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php"
method="post"> <h2>CALCULADORA<h2>
<input type="button" name="boton7" value=" 7 ">
<input type="button" name="boton8" value=" 8 ">
<input type="button" name="boton9" value=" 9 ">
<input type="button" name="botondiv" value=" / "><br>
<input type="button" name="boton4" value=" 4 ">
<input type="button" name="boton5" value=" 5 "> <input type="button" name="boton6" value=" 6 ">
<input type="button" name="botondiv" value=" * "><br>
<input type="button" name="boton1" value=" 1 ">
<input type="button" name="boton2" value=" 2 ">
<input type="button" name="boton3" value=" 3 ">
<input type="button" name="botonmas" value=" + "><br>
<input type="button" name="boton0" value=" 0 ">
<input type="button" name="botonigual" value=" = ">
<input type="button" name="botonmenos" value=" - ">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 9: Confeccionar una página que muestre una pregunta y luego tres respuestas
posibles. Al lado de cada respuesta disponer un botón para verificar si la respuesta es
correcta, creado con el elemento input inicializando la propiedad type con el valor="button".
Jesús Núñez González y Antonio J. Conejo 9
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
10. CONTROLES DE FORMULARIOS: FILE
Ejemplo: Confeccionar un formulario que solicite el ingreso del nombre de una persona y permita
seleccionar y enviar su foto.
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post" enctype="multipart/form-data">
Ingrese su nombre:
<input type="text" name="nombre" size="30"><br>
Seleccione la foto:
<input type="file" name="foto">
<br>
<input type="submit" value="Enviar"> </form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 10: Confeccionar un formulario que solicite dos archivos para ser enviados. Por
ejemplo, el currículum y la foto del usuario.
Jesús Núñez González y Antonio J. Conejo 10
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
11. FORMULARIOS: AGRUPAMIENTOS DE CONTROLES
Ejemplo: Confeccionar un formulario que solicite los datos personales de una persona y los datos del
lugar donde trabaja, cada grupo de datos disponerlos en un fieldset.
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php"
method="post"> <fieldset>
<legend>Datos personales</legend>
Apellido y nombre:
<input type="text" name="nombre" size="30"><br>
Documento de identidad: <input type="text" name="dni" size="8"><br>
Fecha de nacimiento:
<input type="text" name="fechanacimiento" size="12"><br>
Dirección:
<input type="text" name="direccionpersona"
size="30"><br> </fieldset>
<fieldset> <legend>Datos Laborales</legend>
Nombre de la empresa:
<input type="text" name="nombreempresa" size="30"><br>
Actividad:
<input type="text" name="actividad" size="50"><br>
Dirección:
<input type="text" name="direccionempresa"
size="30"><br> </fieldset>
<input type="submit" value="Enviar"> </form>
</body>
</html>
Jesús Núñez González y Antonio J. Conejo 11
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
En el navegador obtendríamos el resultado:
Ejercicio 11: Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar
los controles aquellos relacionados con el cliente y los referentes al pedido.
Jesús Núñez González y Antonio J. Conejo 12
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
12. FORMULARIOS: CONTROLES CON VALORES INICIALES
Ejemplo: Confeccione un formulario que solicite el ingreso del nombre de una persona. Luego que
seleccione si es mayor de edad o no (por defecto inicializar en si),seguidamente el teléfono (cargar por
defecto 956-) y por último en un textarea solicitar que ingrese comentarios.
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Apellido y nombre:
<input type="text" name="nombre"
size="30"><br> Es mayor de edad?:<br>
<input type="radio" name="radio1" checked
value="si">Si<br> <input type="radio" name="radio1"
value="no">No<br> Telefono: <input type="text" value="956-" name="telefono" size="15"><br>
<textarea name="comentarios" rows="5" cols="40">Ingrese aqui sus
comentarios </textarea><br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 12: Confeccione un formulario de un libro de visitas, se debe solicitar el nombre,
mail, pais de origen (por defecto la opcion seleccionada será "seleccione pais"), valoración
del sitio (malo, regular, bueno, muy bueno, excelente) por defecto debe estar seleccionado
"bueno". Por último disponer un textarea donde se puede ingresar los comentarios.
Jesús Núñez González y Antonio J. Conejo 13
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
13. FORMULARIOS: ORDEN DEL FOCO DE LOS CONTROLES
Ejemplo: Implementar un formulario que contenga una matriz de tres filas y tres columnas de elementos
de tipo text. Hacer que el foco sea por columna, es decir primero tomará foco el text de la primer fila y
primer columna, luego el text de la segunda fila y primer columna etc. (si no definimos la propiedad
tabindex la carga de datos se efectua por fila).
<html>
<head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
<input type="text" name="text1" size="5" tabindex="1">
<input type="text" name="text2" size="5" tabindex="4">
<input type="text" name="text3" size="5" tabindex="7"><br>
<input type="text" name="text4" size="5" tabindex="2"> <input type="text" name="text5" size="5" tabindex="5">
<input type="text" name="text6" size="5" tabindex="8"><br>
<input type="text" name="text7" size="5" tabindex="3">
<input type="text" name="text8" size="5" tabindex="6">
<input type="text" name="text9" size="5" tabindex="9"><br>
<input type="submit" value="enviar" tabindex="10">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 13: Definir una matriz de 4 filas y 4 columnas de elementos de tipo text. Luego hacer
la carga de todos los elementos del perímetro y finalmente los cuatro elementos centrales.
Jesús Núñez González y Antonio J. Conejo 14
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
14. FORMULARIOS: LIMITACIÓN DEL TAMAÑO DE LOS CONTROLES
Ejemplo: Confeccionar un formulario que solicite el nombre de usuario y su clave, solo permitir
ingresar en el nombres de usuarios hasta 20 caracteres y la claves hasta 12.
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<form action="/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" maxlength="20"
size="20"> <br>
Ingrese su clave:
<input type="password" name="clave" maxlength="12" size="12">
<br> <input type="submit" value="enviar">
</form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 14: Confeccionar un formulario que solicite el ingreso del nombre y apellido de una
persona (hasta 40 caracteres), su edad (3 caracteres como máximo) y su documento nacional
de identidad (hasta 8 caracteres).
Jesús Núñez González y Antonio J. Conejo 15
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
15. FORMULARIOS: ENVÍO DE DATOS MEDIANTE MAIL
Ejemplo: Confeccionar una página que permita hacer una petición de reparaciones y se envíen los datos
a una dirección de correo. Se debe poder ingresar el nombre, dirección y un comentario del problema.
<html> <head>
<title>Prueba de formulario</title>
</head>
<body>
<h2>Reparacion</h2>
<form action="mailto:[email protected]" method="post" enctype="text/plain">
Ingrese su nombre: <input type="text" name="nombre" size="20"> <br> Ingrese su
dirección: <input type="text" name="direccion" size="30"> <br>
Informe del problema: <br>
<textarea rows="5" cols="40" name="problema"></textarea>
<br> <input type="submit" value="enviar"> </form>
</body>
</html>
En el navegador obtendríamos el resultado:
Ejercicio 15: Confeccionar un formulario que permita solicitar pizzas a domicilio. Enviar el
pedido a la dirección de correo [email protected]
Jesús Núñez González y Antonio J. Conejo 16
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
16. EJERCICIO FINAL DE FORMULARIOS
Vamos a confeccionar un formulario donde aparezcan la mayoría de los conceptos practicados
sobre formularios.
El formulario en cuestión nos permitirá matricularnos vía web en el ciclo formativo de
EXPLOTACIÓN DE SISTEMAS INFORMÁTICOS del IES Fuente Grande. Cada alumno debe
realizar un diseño propio intentando poner en práctica la mayor cantidad posible de aspectos
estudiados en html y darle la mayor funcionalidad posible.
El primer conjunto de controles del formulario hacen referencia a los DATOS
PERSONALES del alumno: DNI (máximo 9 caracteres), Fecha de nacimiento (hay
muchas formas de diseñarlo, desde poner día, mes y año por separado controlando que
no metan mas de 2 caracteres en día y mes y mas de 4 en año hasta cargar en listas
desplegables datos para que seleccione), nombre, apellidos, población de nacimiento,
provincia (cargarlos en una lista desplegable y que aparezca por defecto seleccione
provincia), país de nacimiento, correo electrónico, contraseña de usuario para acceso
a los contenidos web, confirmación de contraseña, sexo (con controles tipo radio) y
foto.
El segundo grupo de controles se refieren a los DATOS DE CONTACTO: Tipo de vía
(calle, avenida, plaza…), Nombre de la vía, número (no superior a 3 dígitos), piso,
teléfono (no superior a 9 caracteres donde por defecto ponga el prefijo de Cádiz),
teléfono móvil (no superior a 9 caracteres) y código postal (no superior a 5 caracteres).
El tercer grupo de controles hace referencia a los DATOS DE LA MATRÍCULA:
aparecerán los nombre de los módulos agrupados según el curso en el que se imparten
(1º o 2º). Cada módulo podrá seleccionarse mediante campos de tipo checkbox. Como
mejora opcional se propone que al lado de cada módulo aparezca un enlace que diga
ver contenido del módulo y nos lleve a una página diferente donde aparezcan datos
de ese módulo en concreto, como por ejemplo: nombre del módulo, número de horas
semanales, profesor que lo imparte y contenidos del mismo.
Vamos a suponer que para matricularse en el ciclo hay que pagar una pequeña matrícula,
con lo cual, el siguiente grupo de controles hacen referencia al DATOS y FORMA DE
PAGO: el usuario seleccionará el tipo de matrícula (ordinaria 30€, reducción por
familia numerosa 15€, reducción por discapacidad 15 €,…), así como podrá seleccionar
si quiere o no pertenecer al AMPA (15 € anuales) y si quiere tener un seguro escolar (3
€ anuales). Por último, podrá seleccionar la forma de pago (domiciliación bancaria, pago
en metálico en el banco Santander o bien pago por Internet).
Por último, proporcionamos otro pequeño grupo de controles llamados OTROS DATOS:
En este bloque ofreceremos al usuario si quiere o no recibir la conformidad de la
matrícula en su correo electrónico, se le preguntará la forma de acceso al ciclo (mediante
el título de ESO o mediante prueba de acceso), si ha cursado algún otro ciclo con
anterioridad y si se encuentra trabajando en la actualidad. También seleccionará cuáles
de los siguientes temas le gustan más (redes, sistemas operativos, ofimática,
programación, hardware…). Por último, tendrá un espacio donde podrá escribir cualquier
tipo de comentarios u observaciones.
Jesús Núñez González y Antonio J. Conejo 17
Tecnología de la información y comunicación II: EJERCICIOS DE HTML BÁSICO
El formulario tendrá un botón para limpiar los campos y otro para confirmar la matrícula,
llevándonos a una página que indique que la matrícula en el ciclo formativo se ha realizado
correctamente.
Una vez acabado, se propone como ejercicio opcional, dividir esta página tan extensa en 5
páginas más pequeñas donde en cada una de ellas se lleve a cabo un paso en la matriculación: - PASO 1: Inserción de datos personales.
- PASO 2: Información de contacto.
- PASO 3: Matriculación.
- PASO 4: Forma de pago.
- PASO 5: Información adicional.
De esta última se llegará a la página que indica que se ha realizado la matrícula.
OBSERVACIONES: - Se valorarán todas las mejoras que el alumno crea conveniente hacer.
- También se valorará el diseño, la vistosidad y la homogeneidad de las páginas.
- Esta práctica se llamará formulario_matricula.html.
- Los ejercicios opcionales serán tenidos en cuenta en la nota final de las prácticas.
Jesús Núñez González y Antonio J. Conejo 18