Guia de HTML 9no Formularios2

Gua del Trayecto IV, P1 (HTML)
Formularios
Formularios-II
Agrupamiento
de
Controles.
Controles con valores

inciales.
Orden de Foco de
Controles.
Inhabilitar
Controles.
text/password
maxlength
text/password/textar
ea y readonly
Label
Autor:
Ing. Aracelis Pastrana
Maracaibo, 05 de Julio
Jul de 2011
Gua del Trayecto IV, P1 (HTML) Formularios-II
2011
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.
Ejercicio: 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.
Cdigo:
<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>
Direccin:
<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>
Direccin:
<input type="text" name="direccionempresa" size="30"><br>
</fieldset>
<input type="submit" value="Enviar">
</form>
</body>
</html>
2011
Pantalla:
Podemos ver que cada grupo de controles est encerrado con el elemento fieldset:
<fieldset>
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>
2011
Direccin:
<input type="text" name="direccionpersona" size="30"><br>
</fieldset>
Luego el ttulo de cada fieldset lo disponemos con:
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.
2011
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>
Ejercicio: 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 261-) y por ltimo en un textarea solicitar que ingrese
comentarios.
Codigo:
<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="261-" name="telefono" size="15"><br>
<textarea
name="comentarios"
rows="5"
cols="40">Ingrese
comentarios</textarea><br>
</form>
</body>
</html>
aqui
sus
2011
Pantalla:
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 primer 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):
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)
2011
Cdigo:
<html>
<head>
</head>
<body>
<input type="text" name="text1" size="5" tabindex="1">
<br>
<br>
<br>
<input type="submit" value="enviar" tabindex="10">
</form>
</body>
</html>
Pantalla:
2011
Formulario - Inhabilitar Controles.
Todos los controles que hemos visto podemos hacer que aparezcan inhabilitados.
Supongamos que disponemos 3 controles de tipo radio para indicar que seccin del sitio
deseamos ingresar. Nosotros queremos mostrar que tiene 3 secciones pero una no est
disponible. Esto lo resolvemos deshabilitando un radio:
Ejercicio: Confeccionar un formulario que muestre tres controles de tipo radio. Mostrar los
textos Nios, Adolescentes y Mayores. Deshabilitar el el elemento radio que corresponde a
Nios.
Cdigo:
<html>
<head>
</head>
<body>
Seleccione la seccin donde desea ingresar:
<br>
<input type="radio" name="seccion" value="1" disabled>Nios<br>
<input type="radio" name="seccion" value="2">Adolescentes<br>
<input type="radio" name="seccion" value="3">Mayores<br>
</form>
</body>
</html>
Pantalla:
2011
Para deshabilitar el primer radio aadimos la propiedad disabled sin asignarle valor:
<input type="radio" name="seccion" value="1" disabled>Nios

Los siguientes elementos pueden inhabilitarse:
button, input, optgroup, option, select y textarea.
Esta propiedad tiene mucha aplicacin si se aplica javascript en la pgina. Mediante javascript
podemos luego de haber sido cargado el documento modificar el estado de los controles,
habilitando y deshabilitando de acuerdo a los datos que carga el visitante al sitio.
Formulario - Text/Password y Maxlength
Los controles de tipo text y password pueden limitar la cantidad de caracteres que puede
ingresar el usuario a partir de la propiedad maxlength.
Debemos asignarle un valor entero que indica hasta cuantos caracteres est permitido
ingresar.
No hay que confundir el objetivo de la propiedad size con maxlength. Con la propiedad size
solo indicamos la cantidad mxima de caracteres a mostrar dentro del control antes de hacer
scroll de los datos.
Ejercicio: 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.
Cdigo:
<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">
2011
</form>
</body>
</html>
Pantalla:
Formulario - Text/Password/Textarea y Readonly
Otra propiedad que podemos asignarle a los controles que creamos con el elemento input y
tambin el elemento textarea es readonly.
Si definimos la propiedad readonly a un control el mismo es de solo lectura y no podemos

modificar su contenido. Esta propiedad tiene uso cuando mediante un lenguaje de script
(generalmente javascript) modificamos el control cambiandolo de estado ante ciertos eventos.
Cuando un control tiene la propiedad readonly el control toma foco pero no se puede cambiar
su contenido. La diferencia con la propiedad disabled es que con esta no toma foco el control y
generalmente aparece con un color que indica que el control est deshabilitado.
10
2011
Ejercicio: Confeccionar un formulario que aparezca el nombre de una empresa en un text y el

texto de un contrato en un textarea, ambos de solo lectura.
Cdigo:
<html>
<head>
</head>
<body>
Ingrese su nombre:
<input type="text" name="nombre" size="30" value="Interpolacion" readonly><br>
Contrato:<br>
<textarea name="comentarios" rows="5" cols="60"
readonly>
Por la presente ..............................
</textarea>
<br>
</form>
</body>
</html>
Pantalla:
11
2011
Formulario - Envo de Datos mediante Mail.
Hasta ahora siempre configuramos la propiedad action de la marca <form> con el nombre de
un archivo que procesa los datos en el servidor:

Para poder resolver esto debemos conocer el lenguaje PHP o algn otro lenguaje de servidor.
Conociendo solo HTML la solucin es enviar los datos mediante el programa cliente de mail
que est configurado en la computadora. Para esto inicializamos la propiedad action de la
siguiente forma:
<form action="mailto:pizzasya@htmlya.com" method="post"

enctype="text/plain">
Es decir inicializamos la propiedad action con el texto mailto seguido de dos puntos y la
direccin de mail a la que queremos enviar los datos del formulario, recordemos siempre que
utilizamos mailto el emisor del mail depende como est configurado nuestro software de mail
en nuestra computadora.
Adems inicializamos la propiedad enctype con el valor "text/plain" con lo que le indicamos
que se trata de un archivo de texto plano. Tengamos en cuenta que no podemos enviar
archivos adjuntos.
Ejercicio: Confeccionar una pgina que permita hacer un reclamo de reparaciones y se enven
los datos a una direccin de correo. Se debe poder ingresar el nombre, direccin y un
comentario del problema.
Cdigo:
<html>
<head>
</head>
<body>
<h2>Reclamos</h2>
<form action="mailto:reclamos@gmail.com" method="post" enctype="text/plain">
Ingrese su nombre:
12
2011
<input type="text" name="nombre" size="20">

<br>
Ingrese su direccin:
<input type="text" name="direccin" size="30">
<br>
Informe del problema:
<br>
<textarea rows="5" cols="40" name="problema"></textarea>
<br>
<input type="submit" value="enviar">
</form>
</body>
</html>
Pantalla:
Formulario - Label
Una ltima etiqueta relacionada con los formularios es la label. Hasta este momento siempre
que queramos disponer un mensaje antes o despus de un control de formulario lo
escribiamos sin ms.
13
2011
Existe en HTML un elemento que permite asociar un texto con un control de formulario. Esto
ser muy til si se accede desde un navegador no grfico o una persona ciega que utiliza un
programa que lee en voz alta el contenido de la pgina.
Veamos como lo hacamos hasta ahora:

Ingrese su nombre:
<input type="text" name="nombre" size="20">
Utilizando el elemento label podemos hacer una referencia entre el texto y el control de
entrada de datos:
<label for="nombre">Ingrese su nombre:</label>
<input type="text" name="nombre" size="20" id="nombre">
Veamos que hemos agregado:
Hemos definido la propiedad id a la marca input.
El elemento label tiene su marca de comienzo y fin, entre medio se dispone el texto a
mostrar.
Para vincular esta label con el elemento input debemos inicializar la propiedad for
con el nombre asignado a la propiedad id del elemento input. Ms adelante veremos
que la propiedad id la pueden tener todos los elementos HTML y es de vital
importancia para CSS (Hojas de Estilo) y JavaScript
Ejercicio: Confeccionar un formulario que solicite el ingreso del nombre, mail y comentarios
de un visitante al sitio. Asociar cada control con un elemento label.
Cdigo:
<html>
<head>
</head>
<body>
<fieldset>
<legend>Formulario de comentarios.</legend>
<label for="nombre">Ingrese su nombre:</label>
14
2011
<input type="text" name="nombre" size="30" id="nombre"><br>

<label for="mail">Ingrese su mail:</label>
<input type="text" name="mail" size="50" id="mail"><br>
<label for="comentarios">Comentarios:</label><br>
<textarea name="comentarios" rows="5" cols="60"
id="comentarios"></textarea>
<br>
</fieldset>
</form>
</body>
</html>
Pantalla:
15
2011
Ejercicios Propuestos
1. Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar

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

los controles aquellos relacionados con el cliente y los referentes al pedido.
3. 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.
4. Confeccionar un formulario que muestre un control de cada tipo y los muestre

todos deshabilitados. (Cuando conozca JavaScript podemos habilitarlos por
ejemplo si el visitante ingresa una clave correcta, por ahora vea como queda
visualmente el formulario con los controles deshabilitados)
5. Confeccionar un formulario que solicite el ingreso del nombre y apellido de

una persona (hasta 40 caracteres), su edad (3 caracteres como mximo) y su
documento nacional de identidad (hasta 8 caracteres).
6. Crear un controles de tipo text,password y textarea. Disponerlos todos de solo

lectura.
7. Confeccionar un formulario que permita solicitar pizzas a domicilio. Enviar el

pedido a la direccin de correo pizzasya@gmail.com
8. Confeccionar una pgina que permita calificar un sitio. Se debe ingresar el

nombre y mediante un control de tipo select elegir un valor entre 1 y 10.
Asociar elementos de tipo label a cada control.
Cualquier duda saben como localizarme, correo, faces, twitter, blog de la aldea y foro de la
aldea.
Ing. Shelley Pastrana

Email: shelleypas@gmail.com
Sitio Web: http://aldeajmsisomartinez.wordpress.com/
Foro: http://www.sisomartinez.esforos.com/
16
2011
Twitter: @aldeasiso
Docente PNFI - Enlace Sistemas
Aldea "JM Siso Martinez"
NVTT: JM Siso Martinez "Saber y Talento humano, rumbo al Avance Tecnolgico de nuestra Ciudad
de Progreso" San Francisco - Edo. Zulia.
"Hay en el mundo un lenguaje que todos comprenden: es el lenguaje del entusiasmo, de las cosas
hechas con amor y con voluntad, en busca de aquello que se desea o en lo que se cree"
17

Guia de HTML 9no Formularios2

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Guia de HTML 9no Formularios2

Transféré par

Droits d'auteur :

Formats disponibles

Gua del Trayecto IV, P1 (HTML)

Controles con valores

Gua del Trayecto IV, P1 (HTML) Formularios-II

Formulario - Agrupamiento de Controles.

Gua del Trayecto IV, P1 (HTML) Formularios-II

<input type="text" name="nombre" size="30"><br>

<input type="text" name="dni" size="8"><br>

<input type="text" name="fechanacimiento" size="12"><br>

Gua del Trayecto IV, P1 (HTML) Formularios-II

<input type="text" value="aqui su nombre" name="nombre"

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

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

<input type="checkbox" name="java" checked>Opcion 1<br>

Gua del Trayecto IV, P1 (HTML) Formularios-II

<input type="radio" name="estudios" value="1"

Gua del Trayecto IV, P1 (HTML) Formularios-II

Formulario - Orden de Foco de Controles.

Para probar el funcionamiento implementaremos un formulario que contenga una matriz de

Gua del Trayecto IV, P1 (HTML) Formularios-II

Gua del Trayecto IV, P1 (HTML) Formularios-II

Formulario - Inhabilitar Controles.

Gua del Trayecto IV, P1 (HTML) Formularios-II

<input type="radio" name="seccion" value="1" disabled>Nios

Formulario - Text/Password y Maxlength

Ejercicio: Confeccionar un formulario que solicite el nombre de usuario y su clave, solo

Gua del Trayecto IV, P1 (HTML) Formularios-II

Formulario - Text/Password/Textarea y Readonly

Si definimos la propiedad readonly a un control el mismo es de solo lectura y no podemos

Gua del Trayecto IV, P1 (HTML) Formularios-II

Ejercicio: Confeccionar un formulario que aparezca el nombre de una empresa en un text y el

Gua del Trayecto IV, P1 (HTML) Formularios-II

Formulario - Envo de Datos mediante Mail.

<form action="/registrardatos.php" method="post">

<form action="mailto:pizzasya@htmlya.com" method="post"

Gua del Trayecto IV, P1 (HTML) Formularios-II

<input type="text" name="nombre" size="20">

Gua del Trayecto IV, P1 (HTML) Formularios-II

Veamos como lo hacamos hasta ahora:

<input type="text" name="nombre" size="20">

<label for="nombre">Ingrese su nombre:</label>

<input type="text" name="nombre" size="20" id="nombre">

Veamos que hemos agregado:

Hemos definido la propiedad id a la marca input.

Gua del Trayecto IV, P1 (HTML) Formularios-II

<input type="text" name="nombre" size="30" id="nombre"><br>

Gua del Trayecto IV, P1 (HTML) Formularios-II

1. Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar

2. Confeccionar un formulario que permita solicitar pizzas a domicilio. Agrupar

3. Definir una matriz de 4 filas y 4 columnas de elementos de tipo text. Luego

4. Confeccionar un formulario que muestre un control de cada tipo y los muestre

5. Confeccionar un formulario que solicite el ingreso del nombre y apellido de

6. Crear un controles de tipo text,password y textarea. Disponerlos todos de solo

7. Confeccionar un formulario que permita solicitar pizzas a domicilio. Enviar el

8. Confeccionar una pgina que permita calificar un sitio. Se debe ingresar el

Ing. Shelley Pastrana

Gua del Trayecto IV, P1 (HTML) Formularios-II

Vous aimerez peut-être aussi