ejercicios de html bÁsico...

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


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>


</head>

<body>


Ingrese su 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>


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)



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>


</head>

<body>


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>


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)



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>


</head>

<body>


Ingrese su nombre:


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>


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.



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>


</head>

<body>


Ingrese su 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>


Ejercicio 5: Confeccionar un formulario que solicite al usuario su nombre y cual sistema

operativo utiliza más (linux o windows).



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>


</head>

<body>


Ingrese su nombre:


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>


</form>

</body>

</html>


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.



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>


</head>

<body>


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>


</form>

</body>

</html>


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.



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>


</head>

<body>


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>


</form>

</body>

</html>


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.



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>


</head>

<body>

<form action="/registrardatos.php"

method="post"> <h2>CALCULADORA<h2>

<input type="button" name="boton7" value=" 7 ">



<input type="button" name="botondiv" value=" / "><br>


<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="botonmas" value=" + "><br>


<input type="button" name="botonigual" value=" = ">

<input type="button" name="botonmenos" value=" - ">

</form>

</body>

</html>


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".



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>


</head>

<body>

<form action="/registrardatos.php" method="post" enctype="multipart/form-data">

Ingrese su nombre:


Seleccione la foto:

<input type="file" name="foto">

<br>

<input type="submit" value="Enviar"> </form>

</body>

</html>


Ejercicio 10: Confeccionar un formulario que solicite dos archivos para ser enviados. Por

ejemplo, el currículum y la foto del usuario.



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>


</head>

<body>

<form action="/registrardatos.php"

method="post"> <fieldset>

<legend>Datos personales</legend>

Apellido y nombre:


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>




Ejercicio 11: Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar

los controles aquellos relacionados con el cliente y los referentes al pedido.



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>


</head>

<body>


Apellido y 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>


</form>

</body>

</html>


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.



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>


</head>

<body>


<input type="text" name="text1" size="5" tabindex="1">


<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="submit" value="enviar" tabindex="10">

</form>

</body>

</html>


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.



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>


</head>

<body>


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>


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).



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>


</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>


Ejercicio 15: Confeccionar un formulario que permita solicitar pizzas a domicilio. Enviar el

pedido a la dirección de correo [email protected]



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.



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.


ejercicios de html bÁsico...

Documents