Curso de HTML 5

APOYATURA EN PROGRAMACION II AO 2013 Prof.
Guillermo de Majo
IES 9-012 SAN RAFAEL EN INFORMATICA CURSO 2 AO

Pgina 1 de 17
CURSO DE HTML 5
CREACIN DE PGINAS WEB MEDIANTE EL LENGUAJE HTML

32 - Formulario - select (cuadro de seleccin individual)

El elemento select es un cuadro de seleccin.

Este elemento HTML nos permite seleccionar una opcin entre un conjunto. Veremos en el
concepto prximo que segn como la configuramos podemos seleccionar varias opciones.

Veamos con un ejemplo como crear un control de tipo select. Confeccionemos un formulario
que solicite cargar el nombre de una persona y el pas donde vive, este ltimo elemento mediante un
control de tipo select permitir seleccionar el pas.

El archivo pagina1.html es:

<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">Espaa</option>
<option value="3">Mxico</option>
<option value="4">Guatemala</option>
<option value="5">Honduras</option>
<option value="7">El Salvador</option>
<option value="8">Venezuela</option>
<option value="9">Colombia</option>
<option value="10">Cuba</option>
<option value="11">Bolivia</option>
<option value="13">Per</option>
<option value="14">Ecuador</option>
<option value="15">Paraguay</option>
<option value="16">Uruguay</option>
<option value="17">Chile</option>
</select>
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>

Veamos la sintaxis para crear un cuadro de seleccin, primero abrimos la marca select la cual
tiene definido la propiedad name:

Luego sin cerrar el select definimos tantos elementos de tipo option como opciones tendr el
cuadro de seleccin:

APOYATURA EN PROGRAMACION II AO 2013 Prof. Guillermo de Majo

Pgina 2 de 17
<option value="2">Espaa</option>
El elemento option define el texto a mostrar y en la propiedad value indica el valor a enviar al
servidor en caso de estar seleccionada dicha opcin.

Luego de definir todas las opciones de nuestro cuadro de seleccin cerramos la marca select:

</select>

Una variante grfica de este control es inicializar la propiedad size del elemento select con un
valor distinto a uno, con esto creamos un cuadro de seleccin que muestra simultneamente varios
elementos (de todos modos solo uno se puede elegir)

Es decir que con la propiedad size solo logramos un cambio esttico del control.

Problema resuelto de HTML.

Solicitar el ingreso del nombre de una persona y el mximo nivel en estudios alcanzado (sin
estudios, estudios primarios, estudios secundarios o estudios universitarios)

Utilizar controles de tipo radio para la seleccin de estudios realizados.

html>
<head>
</head>
<body>
Ingrese su nombre:
Seleccione el mximo 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>
</form>
</body>
</html>

Problema a resolver de HTML.

Confeccionar un formulario que solicite el ingreso del nombre de una persona y permita votar el
sitio. Mediante un cuadro de seleccin el visitante puede elegir entre las siguientes opciones: Excelente,
Muy Bueno, Bueno, Regular y Malo.

33 - Formulario - select (cuadro de seleccin mltiple)

Una variante del cuadro de seleccin que vimos en el concepto anterior es permitir que el
visitante del sitio pueda seleccionar varias opciones.

Supongamos que tenemos un cuadro de seleccin con una lista de colores y queremos que el
visitante pueda elegir varios y no uno solo.

La pgina que resuelve este problema es:

Pgina 3 de 17

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

Podemos observar la sintaxis para la definicin de un cuadro de seleccin mltiple:

Definimos una propiedad llamada multiple y no le asignamos valor, por otro lado al nombre
definido en la propiedad name le agregamos al final los caracteres [] para que desde el servidor
podamos identificar que el control retorna posiblemente muchos valores.

Es tambin comn inicializar la propiedad size con un valor mayor a 1 para que sea ms fcil la
seleccin.

La mayora de los navegadores permiten seleccionar opciones que no se encuentran juntas
mediante el mouse y presionando simultneamente la tecla Ctrl.


Confeccionar un cuadro de seleccin mltiple para elegir colores de una lista. Permitir la
seleccin de varios colores.

<html>
<head>
</head>
<body>
Seleccione uno o varios colores (Presione Ctrl para seleccionar varios
colores)<br>
<option value="1">Rojo</option>
<option value="3">Azul</option>
<option value="5">Blanco</option>

Pgina 4 de 17
</select>
<br>
</form>
</body>
</html>


Confeccionar un formulario que muestre en un control select una serie de mail. Luego permitir
que el visitante seleccione uno o varios mail del cuadro de seleccin.

34 - Formulario - select (agrupamiento de opciones)

Hemos visto que podemos crear cuadros de seleccin individual o de seleccin mltiple. Ahora
veamos que podemos agrupar las opciones que tiene el cuadro de seleccin, esto tiene sentido si el
cuadro de seleccin tiene muchos items.

Se cuenta con un nuevo elemento llamado optgroup que agrupa un conjunto de elementos
option.

Veamos un ejemplo de agrupar una serie de opciones, agruparemos una serie de frutas y
verduras:

<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>
<option value="4">Frutilla</option>
<option value="5">Durazno</option>
<option value="6">Ciruela</option>
</optgroup>
<optgroup label="Verduras">
<option value="7">Lechuga</option>
<option value="8">Acelga</option>
<option value="9">Zapallo</option>
<option value="10">Papas</option>
<option value="11">Batatas</option>
<option value="13">Zanahorias</option>
<option value="14">Rabanitos</option>
<option value="15">Calabaza</option>
</optgroup>
</select>
<br>

Pgina 5 de 17
</form>
</body>
</html>

Como podemos observar para agrupar una serie de opciones dentro de un select debemos
encerrarlas con el elemento optgroup:

<optgroup label="Frutas"> <option value="1">Naranjas</option> <option
value="2">Manzanas</option> <option value="3>Sandia</option> <option
value="4">Frutilla</option> <option value="5">Durazno</option> <option
value="6">Ciruela</option> </optgroup>

La propiedad label del elemento optgroup aparece dentro del control select pero no se
puede seleccionar, es un ttulo.

La propiedad label del elemento optgroup es el texto que se debe mostrar dentro del
select.

Se puede hacer agrupamiento de opciones y permitir selecciones mltiples.


Confeccionar una pgina 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>
<option value="4">Frutilla</option>
<option value="5">Durazno</option>
<option value="6">Ciruela</option>
</optgroup>
<optgroup label="Verduras">
<option value="7">Lechuga</option>
<option value="8">Acelga</option>
<option value="9">Zapallo</option>
<option value="10">Papas</option>
<option value="11">Batatas</option>
<option value="13">Zanahorias</option>
<option value="14">Rabanitos</option>
<option value="15">Calabaza</option>
</optgroup>
</select>
<br>
</form>
</body>
</html>

Pgina 6 de 17


Confeccione un control de tipo select con los nombres de pases de Amrica y Europa.
Agrupe los pases por continente.

35 - Formulario button

El elemento button es un control visual que se puede utilizar para sustituir los controles:

<input type="reset" value="Borrar">

Entre otras las ventanjas de este elemento es que podemos agregar imgenes dentro del botn.

La sintaxis de este elemento es la siguiente:

<button type="submit">
Texto a mostrar dentro del botn.
</button>

Todo lo que est contenido entre las marcas de comienzo y fin del elemento button aparece
dentro del botn, como por ejemplo una imagen, un prrafo, enfatizado de una palabra etc.

La propiedad type se puede inicializar con alguno de estos tres valores: "submit", "reset" y
"button". Los dos primeros cumplen las funciones que ya conocemos es decir envo de los datos al
servidor y borrado del contenido de los controles. En cuanto al tercer valor posible de la propiedad type
significar que deberemos codificar una funcin en javascript para procesar el evento.

Para ver el funcionamiento confeccionaremos un formulario que solicite el ingreso del nombre de
una persona y dos elementos button para subir el dato al servidor o borrar el dato cargado:

<html>
<head>
</head>
<body>
<form action="/htmlya/registrardatos.php" method="post">
Ingrese su nombre:
<input type="text" name="nombre" size="20">
<br>
<button type="submit">Enviar<img src="/imagenes/enviar.gif"
alt="envio"></button>
<button type="reset">Borrar<img src="/imagenes/borrar.gif"
alt="borrado"></button>
</form>
</body>
</html>

Perfectamente podemos definir un texto y cargar una imagen dentro del botn:

<button type="submit">Enviar<img src="/imagenes/enviar.gif"



Pgina 7 de 17
Confeccionar un formulario que solicite el ingreso del nombre de una persona y dos elementos
button para subir el dato al servidor o borrar el dato cargado.

<html>
<head>
</head>
<body>
Ingrese su nombre:
<br>
<button type="submit">Enviar<img src="/htmlya/imagenes/enviar.gif"
<button type="reset">Borrar<img src="/htmlya/imagenes/borrar.gif"
alt="borrado"></button>
</form>
</body>
</html>


Confeccionar un formulario que solicite el ingreso del nombre de usuario y su clave. Disponer un
botn para subir los datos al servidor (en el botn escribir el texto: "Ingreso al" y en la lnea siguiente
"sitio").

36 - Formulario - input type="button"

Otro tipo de boton que podemos crear es mediante el elemento input y fijando en la propiedad
type el valor "button".

Este tipo de botn no se lo puede hacer que acte como los botones de tipo submit o reset, su
actividad depender de un programa desarrollado generalmente en JavaScript o PHP.

Si bien no podemos ver su funcionamiento ya que no conocemos JavaScript o PHP todava, si
podemos implementar una pgina que muestre este control. Confeccionaremos una pgina que muestre
el teclado de una calculadora:

<html>
<head>
</head>
<body>
<h1>Resultado:<h1>
<input type="button" name="boton7" value=" 7 ">
<input type="button" name="botondiv" value=" / ">
<br>
<input type="button" name="botondiv" value=" * ">
<br>

Pgina 8 de 17
<input type="button" name="botonmas" value=" + ">
<br>
<input type="button" name="botonigual" value=" = ">
<input type="button" name="botonmenos" value=" - ">
</form>
</body>
</html>

Como ver cuando se presiona el botn no sucede nada. Esto es as porque no hemos asignado
ninguna actividad cuando sea presionado. Recordemos que HTML solo tiene Contenido, si queremos
funcionalidad deberemos definir los eventos para dichos botones.


Confeccionaremos una pgina que muestre el teclado de una calculadora. Utilizar el elemento
input inicializando la propiedad type con el valor "button".

<html>
<head>
</head>
<body>
<h1>Resultado:<h1>
<input type="button" name="botondiv" value=" / ">
<br>
<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>


Confeccionar una pgina que muestre una pregunta y luego tres respuestas posibles. Al lado de
cada respuesta disponer un botn creado con el elemento input inicializando la propiedad type con el
valor="button".

37 - Formulario - input type="file"


Pgina 9 de 17
El control de tipo file nos permite enviar un archivo al servidor. Nuevamente el HTML solo indica
al navegador que debe enviar el archivo al servidor pero debe haber en el servidor un programa que
lo almacene en una carpeta del servidor.

Veamos la sintaxis para disponer un control de tipo file:

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

Nuevamente utilizamos el elemento HTML input para definir este tipo de control. En la propiedad
type inicializamos con el valor file. Inicializar la propiedad name tambin es importante ya que mediante
este nombre se lo recupera en el servidor.

Otra cosa muy importante a tener en cuenta cuando hacemos upload de archivos al servidor es
inicializar la propiedad enctype del elemento form:

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

Con esto indicamos al navegador que el formulario almacena uno o ms archivos que deben ser
enviados al servidor.

Confeccionemos una pgina que solicite el ingreso de un nombre y la foto de la persona:

<html>
<head>
</head>
<body>
<form action="/registrardatos.php" method="post"
Ingrese su nombre:
Seleccione la foto:
<input type="file" name="foto">
<br>
</form>
</body>
</html>

Recordemos siempre inicializar la propiedad enctype del elemento form:

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

Tenga en cuenta que si no se hace ningn programa en el servidor el archivo no se almacena.


Confeccionar un formulario que solicite el ingreso del nombre de una persona y permita
seleccionar y enviar su foto.

<html>
<head>
</head>
<body>

Pgina 10 de 17
<form action="/registrardatos.php" method="post"
Ingrese su nombre:
Seleccione la foto:
<input type="file" name="foto">
<br>
</form>
</body>
</html>


Confeccionar un formulario que solicite y enve al servidor dos archivos.

38 - Formulario - input type="hidden"

Un campo hidden se lo denomina campo oculto. Este tipo de control no visualiza nada dentro
del formulario.

Su utilidad se presenta cuando desde el servidor se genera una pgina dinmica por ejemplo
mediante PHP y se almacena en un campo oculto un valor que se rescatar al subir el formulario al
servidor.

Su utilidad real solo podr ser comprendida cuando estudie un lenguaje de servidor, pero
veamos y conozcamos su sintaxis con un ejemplo.

Confeccionar un formulario que solicite ingresar el nombre de una persona y en un campo oculto
almacene una hora cualquiera:

<html>
<head>
</head>
<body>
<input type="hidden" value="10:20" name="hora">
Ingrese su nombre:
<br>
</form>
</body>
</html>

Como vemos la sintaxis para definir un campo oculto es:


En el atributo value almacenamos el valor (este valor no se puede modificar desde el
formulario)

Podemos imaginar una utilidad, supongamos que queremos que un visitante reenve un
formulario cargado con todos los datos en un tiempo limitado, podramos almacenar en el campo oculto
la primera vez que solicita la pgina que contiene el formulario donde se resgistrar dicha hora. Luego

Pgina 11 de 17
al subir el formulario ya cargado al servidor controlaremos mediante un lenguaje de servidor si la hora
actual y la hora de pedido del formulario no hacen invalidar los datos.


Confeccionar un formulario que solicite ingresar el nombre de una persona y en un campo oculto
almacene una hora cualquiera.

<html>
<head>
</head>
<body>
Ingrese su nombre:
<br>
</form>
</body>
</html>


Confeccionar un formulario que solicite ingresar el nombre, correo electrnico de una persona y
en un campo oculto almacene la fecha.

39 - Formulario - agrupamiento de controles.

El HTML dispone de un elemento llamado fieldset que solo tiene el objetivo de recuadrar y
agrupar un conjunto de controles de un formulario.

Debemos encerrar todos los controles a agrupar entre las marcas <fieldset> y
</fieldset>. Adems para agregar un ttulo a este recuadro debemos agregar otro elemento HTML
llamado legend.

Confeccionemos un formulario que solicite los datos personales de una persona y los datos del
lugar donde trabaja, cada grupo de datos los dispondremos en un fieldset:

<html>
<head>
</head>
<body>
<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>
Direccin:
<input type="text" name="direccionpersona" size="30"><br>

Pgina 12 de 17
</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>
Direccin:
<input type="text" name="direccionempresa" size="30"><br>
</fieldset>
</form>
</body>
</html>

Podemos ver que cada grupo de controles est encerrado con el elemento fieldset:

<fieldset>
Apellido y nombre:
Direccin:
</fieldset>

Luego el ttulo de cada fieldset lo disponemos con:



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>
<fieldset>
Apellido y nombre:
Direccin:
</fieldset>
<fieldset>
<legend>Datos Laborales</legend>

Pgina 13 de 17
Nombre de la empresa:
<input type="text" name="nombreempresa" size="30"><br>
Actividad:
<input type="text" name="actividad" size="50"><br>
Direccin:
<input type="text" name="direccionempresa" size="30"><br>
</fieldset>
</form>
</body>
</html>


Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar los controles
aquellos relacionados con el cliente y los referentes al pedido.

40 - Formulario - controles con valores iniciales.

Un control puede aparecer cargado con un valor por defecto. Veamos como inicializar con
valores por defecto para cada uno de los controles que hemos visto.

Para inicializar un control de tipo text debemos dar un valor a la propiedad value:

<input type="text" value="aqui su nombre" name="nombre"
size="20">

El control aparece cargado con la cadena "aqui su nombre".

Para inicializar un control de tipo textarea debemos indicar el dato entre el comienzo y el fin de la
marca:

<textarea rows="10" cols="40" name="curriculum">Ingrese
aqui su curriculum</textarea>

El control textarea se inicializa con la cadena "Ingrese aqui su curriculum"

Para inicializar un control de tipo checkbox debemos disponer la propiedad checked sin asignar
valor:
<input type="checkbox" name="java" checked>Opcion 1<br>

Con esto logramos que el checkbox aparezca tildado apenas aparece el formulario.

Para inicializar un control de tipo radio debemos definir la propiedad checked sin valor, igual que
un checkbox, con la salvedad que solo un un control de tipo radio puede tener definida esta propiedad:

<input type="radio" name="estudios" value="1"
checked>Opcin 1<br>

Para inicializar un control de tipo select con seleccin individual debemos definir la propiedad
selected de los elementos option:

<option value="2" selected>Espaa</option>

Pgina 14 de 17
<option value="4">Guatemala</option>
<option value="5">Honduras</option>
<option value="7">El Salvador</option>
<option value="8">Venezuela</option>
<option value="9">Colombia</option>
<option value="10">Cuba</option>
<option value="11">Bolivia</option>
<option value="13">Per</option>
<option value="14">Ecuador</option>
<option value="15">Paraguay</option>
<option value="16">Uruguay</option>
<option value="17">Chile</option>
</select>

En este caso aparece seleccionado Espaa, ms alla que sea el segundo option en la lista.

Para inicializar un control de tipo select con seleccin mltiple debemos definir la propiedad
selected de varios elementos option:

<select name="colores[]" size="4" multiple="multiple">
<option value="1" selected>Rojo</option>
<option value="3" selected>Azul</option>
<option value="5" selected>Blanco</option>
</select>

En este ejemplo los items Rojo,Azul y Blanco aparecen seleccionados desde un comienzo.

Confeccionaremos como ejemplo 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
telfono (cargar por defecto 0260-) y por ltimo en un textarea solicitar que ingrese comentarios.

<html>
<head>
</head>
<body>
Apellido y nombre:
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="453-" name="telefono"
size="15"><br>
<textarea name="comentarios" rows="5" cols="40">Ingrese
aqui sus comentarios</textarea><br>
</form>
</body>
</html>

Pgina 15 de 17


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 telfono (cargar por
defecto 0260-) y por ltimo en un textarea solicitar que ingrese comentarios.

<html>
<head>
</head>
<body>
Apellido y nombre:
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="453-" name="telefono" size="15"><br>
<textarea name="comentarios" rows="5" cols="40">Ingrese aqui sus
comentarios</textarea><br>
</form>
</body>
</html>


Confeccione un formulario de un libro de visitas, se debe solicitar el nombre, mail, pais de origen
(por defecto la opcion seleccionada debe ser "seleccione pais"), valoracin 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.

41 - Formulario - orden de foco de controles.

Todos los controles de formulario pueden definir una propiedad llamada tabindex que es un
valor entero entre 0 y 32767. Este nmero indica el orden en que los controles toman foco. Cuando se
presiona la tecla tab el navegador pasa el foco al siguiente control.

Para probar el funcionamiento implementaremos un formulario que contenga una matriz de tres
filas y tres columnas de elementos de tipo text. Haremos que el foco sea por columna, es decir primero
tomar foco el text de la primera fila y primer columna, luego del text de la segunda fila y primer
columna etc (si no definimos la propiedad tabindex la carga de datos se efectua por fila):

<head>
</head>
<body>
<input type="text" name="text1" size="5" tabindex="1">
<br>

Pgina 16 de 17
<br>
<br>
<input type="submit" value="enviar" tabindex="10">
</form>
</body>
</html>

Como podemos observar los valores definidos para la propiedad tabindex para la primera fila
de controles text es:


Podemos observar que la propiedad tabindex no tiene valores consecutivos. Pero si vemos los
text por columna podremos observar que si van en forma secuencial.

Todos los controles de formularios pueden definir la propiedad tabindex para indicar el orden
de activacin o foco del control.


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>
<br>
<br>
<br>
<input type="submit" value="enviar" tabindex="10">
</form>
</body>
</html>



Pgina 17 de 17
Definir una matriz de 4 filas y 4 columnas de elementos de tipo text. Luego hacer la carga de
todos los elementos del permetro y finalmente los cuatro elementos centrales.

Curso de HTML 5

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Curso de HTML 5

Încărcat de

Drepturi de autor:

Formate disponibile

APOYATURA EN PROGRAMACION II AO 2013 Prof.

S-ar putea să vă placă și