PROGRAMACIÓN HTML II

SEMANA 1
Formularios I

Todos los derechos de autor son de la exclusiva propiedad de IACC o de los otorgantes de sus licencias. No está
permitido copiar, reproducir, reeditar, descargar, publicar, emitir, difundir, poner a disposición del público ni 1
ESTE DOCUMENTO
utilizar los contenidos paraCONTIENE LA de
fines comerciales SEMANA 1
ninguna clase.
 2
ESTE DOCUMENTO CONTIENE LA SEMANA 1
ÍNDICE

FORMULARIOS HTML I ........................................................................................................................ 4

OBJETIVOS ESPECÍFICOS ........................................................................................................................... 4
INTRODUCCIÓN ...................................................................................................................................... 4
1. ESTRUCTURA DE LOS FORMULARIOS.................................................................................................. 5
1.1. OBJETOS .......................................................................................................................... 9
1.1.1. CUADROS DE TEXTO ..................................................................................................... 11
1.1.2. CUADROS PARA CONTRASEÑAS ................................................................................... 14
1.1.3. ÁREAS DE TEXTO ......................................................................................................... 16
1.1.4. BOTONES DE RADIO ................................................................................................... 17
1.1.5. CASILLAS DE VERIFICACIÓN ......................................................................................... 19
1.1.6. MENÚS ........................................................................................................................ 20
COMENTARIO FINAL.......................................................................................................................... 23
REFERENCIAS........................................................................................................................................ 24

3
ESTE DOCUMENTO CONTIENE LA SEMANA 1
FORMULARIOS HTML I

OBJETIVOS ESPECÍFICOS
 Comprender la estructura de los formularios HTML (versión 4 o superior).

 Conocer los principales objetos que componen los formularios HTML (versión 4 o superior).

 Utilizar formularios HTML (versión 4 o superior) para obtener y recuperar información del
usuario.

INTRODUCCIÓN
Internet se constituyó desde sus inicios como un medio de comunicación bidireccional, permitiendo
no solo suministrar información a los usuarios, sino que además el recopilar información de los
usuarios para múltiples propósitos.

En tal sentido, HTML, visto como el lenguaje básico sobre el que se fundamenta internet, ofrece a
los diseñadores de páginas web un conjunto de elementos (etiquetas) que permiten no solo
mostrar información a los usuarios, sino además aceptar dichas entradas.

El mecanismo básico que utiliza HTML para permitir que el usuario suministre información a la
página web está basado en la utilización de formularios, los cuales sirven de contenedor para un
grupo de elementos de múltiples características diseñados para recibir diferentes tipos de datos
provenientes del usuario, que van desde un simple texto hasta archivos.

En consecuencia, los formularios HTML son uno de los elementos más importantes que un
profesional del desarrollo web debe conocer y manejar, ya que le permitirá obtener información
del usuario y adaptar la presentación y el contenido del sitio web en base a dicha información.

4
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 1. ESTRUCTURA DE LOS FORMULARIOS

Conectando
Pablo trabaja en el departamento de IT de una compañía de venta
de materias primas llamada MAPRI, la cual está desarrollando un
portal para sus clientes, por lo que se requiere incorporar en su
página web un formulario que permita registrar a los usuarios
interesados en sus productos para posteriormente contactarlos y
ofrecerles un servicio personalizado. El encargado de la página le
solicitó diseñar un formulario que será utilizado con dicho
propósito.

Por medio de la utilización de formularios, las páginas web pueden obtener información de los
usuarios, la que puede ser usada para tomar acciones locales utilizando scripts de lado cliente
basados en JAVASCRIPT o ser enviada al servidor para su procesamiento por medio de scripts del
lado servidor basados en PHP, RUBY, PHYTON, ASP, entre otros.

Cuando se requiera enviar la información al servidor, la página puede utilizar dos posibles métodos
(GET y POST), dependiendo de la sensibilidad de la información y volumen de los datos. Toda
comunicación HTTP se basa principalmente en la generación de una solicitud (REQUEST) desde el
cliente hacia el servidor, la cual dispara una respuesta (RESPOND) desde el servidor hacia el cliente
con la información solicitada.

Fuente: material elaborado para esta asignatura.

Dicho envío puede ser realizado de forma síncrona o asíncrona, dependiendo del mecanismo que
se utilice para hacerlo. Cuando se envía un formulario haciendo llamado a una página web (submit),
el browser trabaja de forma síncrona, es decir, no realiza otra operación hasta tener una respuesta
del servidor. Sin embargo, existen otros mecanismos como AJAX, que permiten enviar la
información de forma asíncrona, permitiendo que el browser atienda otras operaciones mientras el

5
ESTE DOCUMENTO CONTIENE LA SEMANA 1
servidor responde y tome las acciones que sean necesarias cuando la respuesta del servidor se
reciba.

Esta asignatura no contempla la utilización de AJAX, dado que se utilizará el mecanismo síncrono
para el envío de la información al servidor.

EL MÉTODO GET

Por defecto, los browsers utilizan el método GET para realizar las solicitudes al servidor, ya que en
la mayoría de los casos lo que se requiere es solicitar del servidor el envío de una página web. Sin
embargo, dicha solicitud puede venir acompañada de información del usuario, a fin de obtener una
respuesta personalizada, según los datos dados por el mismo.

Por ejemplo, cuando un usuario accede a Google, este le indica al usuario qué es lo que
desea buscar y la respuesta generada por el servidor cambiará dependiendo del valor
suministrado por el usuario.

Para enviar esta información del usuario, el método GET coloca los datos en la URL y el servidor
procesa la URL para extraer los datos suministrados por el usuario. Como los datos del usuario se
encuentran en la URL, será posible guardar y reutilizar el enlace (con la información agregada) para
poder obtener una respuesta similar del servidor. Esto convierte a GET en un método idóneo
cuando se requiere que el enlace (con la información agregada) pueda ser accedido de manera
simple. Un ejemplo de aplicación de este método se observa en Google, YouTube, entre otros.

Por ejemplo, el enlace https://www.google.com/search?q=video hace llamado a la

página search dentro del dominio de www.google.com utilizando el protocolo https y
haciendo uso del método GET adiciona la variable q con el valor video, lo cual permite
buscar los enlaces que están asociados a videos de manera rápida y sencilla.

La página de Google posee un campo donde el usuario puede colocar lo que desea buscar.
Dicho campo forma parte de un formulario, el cual define un grupo de atributos que indican
las acciones que debe tomar el browser para poder enviar la información al servidor.

<form action="/search" method="get">

<input type="text" name="q"/>
</form>

6
ESTE DOCUMENTO CONTIENE LA SEMANA 1
Cuando se utiliza el método GET, el browser agrega los datos del usuario al URL, utilizando pares
"nombre=valor" y separando cada par utilizando el símbolo &. Algunos símbolos especiales son
reemplazados antes de ser agregados al URL, debido a que son utilizados para la estructuración del
URL. El símbolo + es usado para sustituir el espacio y el & para separar los distintos valores, entre
otros símbolos que están reservados. En tal sentido, si el usuario agrega a los datos alguno de estos
símbolos (como el /, ?, &, etc.), el browser sustituirá el mismo por su valor ASCII en hexadecimal
usando la notación %2B (+).

Por ejemplo, si un formulario configurado para usar el método GET posee dos campos
denominados name y company, como se observa a continuación:

<form action="http://www.abc.com/next.php" method="get">

<input type="text" name="name"/>
<input type="text" name="company"/>
</form>

Si el usuario agregara los valores "Pedro Pérez" y "P&G", y realiza el envío de información,
la URL resultante será la siguiente, donde claramente se observa que ciertos símbolos son
modificados:

http://www.abc.com/next.php?name=Pedro+P%C3%A9rez&company=P%26G

Es importante destacar que el explorador no realiza distinción entre los tipos de datos (texto,
números, etc.) que van a ser enviados. Además, como los datos del usuario son enviados sobre la
URL, solo es posible enviar texto; en tal sentido, el método GET no podrá ser utilizado si se requiere
enviar archivos al servidor.

Por otro lado, la longitud de la URL no debe exceder los 2.000 caracteres, por lo que no se podrá
usar el método GET si el volumen de información que se desea enviar al servidor es muy grande.
Por último, y no por ello menos importante, todos los datos son colocados en la URL en texto plano,
por lo que si se requiere enviar información sensible como contraseñas no debe utilizarse el
método GET.

7
ESTE DOCUMENTO CONTIENE LA SEMANA 1
EL MÉTODO POST

Este método es utilizado principalmente cuando se requiere enviar volúmenes altos de información
al servidor, o archivos que no pueden ser enviados utilizando el método GET. Adicionalmente, es
bastante útil cuando se requiere enviar información del usuario que es muy sensible, como por
ejemplo contraseñas.

A diferencia del método GET, la información no es enviada en la URL, sino de forma independiente,
lo cual permite ocultar la información de los usuarios, ofreciendo un mayor nivel de seguridad y
escalabilidad.

Enlaces de interés

HTML form methods

http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html

http://www.w3schools.com/tags/ref_httpmethods.asp

http://www.w3schools.com/tags/att_form_method.asp

Conectando

La primera tarea que le asignaron a Pablo se trató de la definición

del método de envío de la información al servidor que deberá ser
utilizado considerando que se solicitarán los datos básicos como
nombre, teléfono, email, compañía, además de una foto y la
contraseña que requerirá para acceder al portal de clientes.

8
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 1.1. OBJETOS
La etiqueta form agrupa todos los elementos y controles que son utilizados para recibir la
información del usuario. Es importante destacar que una etiqueta form no puede ser colocada
dentro de otra etiqueta form. Como parte de esta etiqueta, se pueden incorporar muchos
atributos, sin embargo, los más importantes para definir el modo de operación del formulario son
los siguientes:

 action: indica cuál es la acción que debe tomar el formulario cuando se requiere enviar la
información al servidor (submit). Dicho campo contiene la dirección URL (absoluta o
relativa) de la página web a la que debe ser enviada la información.

 method: indica el método que debe utilizar para realizar el envío de la información del
usuario. Si este atributo no es especificado, el método por defecto que utilizará el
formulario es el GET.

Un formulario puede contener una gran variedad de elementos como campos de texto, botones,
menús, entre otros. En caso de que la cantidad de elementos sea muy numerosa, se pueden
agregar elementos de agrupación (fieldset). Estos elementos disponen de un componente
descriptivo que permitirá etiquetar el fieldset para ofrecer al usuario un campo descriptivo
(legend) del tipo de elementos o campos de información que está agrupando.

<form action="http://www.abc.com/next.php" method="post">

<fieldset>
<legend>Basic Information</legend>
<input type="text" name="user_name"/>
<input type="text" name="user_mail"/>
<input type="text" name="user_password"/>
</fieldset>
</form>

Sin embargo, como se observa en el ejemplo anterior, el usuario no tiene cómo saber para qué
sirven cada uno de los elementos de entrada de texto incluidos en el formulario. Para ofrecer
mayor sentido y hacer el formulario más entendible, se pueden adicionar etiquetas label, las
cuales no solo ofrecen una descripción del elemento de entrada al que hacen referencia, sino que
adicionalmente, cuando se hace clic sobre los mismos, estos transfieren el foco hacia el elemento
de texto asociado.

9
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 <form action="http://www.abc.com/next.php" method="post">
<fieldset>
<legend>Basic Information</legend>
<label for="username">Username</label>
<input type="text" id="username" name="user_name"/>
<label for="mail">Email</label>
<input type="text" id="mail" name="user_mail"/>
<label for="password">Password</label>
<input type="text" id="password"
name="user_password"/>
</fieldset>
</form>

Para indicarle al label a cuál elemento hace referencia se debe utilizar el atributo for,
asignándole el valor del id al cual hace referencia.

Enlaces de interés

Etiquetas HTML <form>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form

http://www.w3schools.com/html/html_forms.asp

Etiquetas HTML <fieldset>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

Etiquetas HTML <legend>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/legend

Etiquetas HTML <label>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

10
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 Conectando
Posteriormente, el encargado de la página le solicitó a Pablo
que diseñara la estructura del formulario que sería utilizado y
que generara un documento que mostrara los elementos que
deberían ser incluidos en el formulario, el cual servirá de guía
para la creación del formulario definitivo. El formulario debe
permitir solicitar al usuario su nombre, teléfono, email,
compañía, una imagen y la contraseña que será utilizada para el
acceso al portal de clientes, entre otros datos adicionales.

1.1.1. CUADROS DE TEXTO

Uno de los elementos básicos utilizados para la construcción de los formularios son los cuadros de
texto (textbox), los cuales ofrecen a los usuarios un área donde pueden colocar el texto que
posteriormente podrá ser utilizado por la página web.

Para la construcción de cuadros de texto, se utilizan los elementos o etiquetas input, los cuales
ofrecen el mecanismo básico para la construcción de formularios. Las etiquetas input son
autocerradas, es decir, no se requiere de una etiqueta de cerrar el bloque input como ocurre con
la etiqueta form.

Estas etiquetas input tienen la propiedad de presentarse de manera distinta dependiendo del
valor dado al atributo type. Existen más de 20 posibles valores del atributo type, y algunos de los
más usados se muestran a continuación:

11
ESTE DOCUMENTO CONTIENE LA SEMANA 1
El atributo name es utilizado por el formulario cuando la información va a ser enviada al servidor,
mientras que el atributo id es utilizado para referenciar el elemento en CSS o JAVASCRIPT.

<form action="http://www.abc.com/next.php" method="get">

<label for="_name">Username</label>
<input type="text" name="name" id="_name"/>
<label for="_pass">Password</label>
<input type="password" name="pass" id="_pass"/>
</form>

El elemento input type="text" no ofrece por defecto ningún tipo de validación al texto
agregado por el usuario. Sin embargo, con la aparición de HTML5, nuevos tipos (type) ofrecen la
misma interfaz, pero realizan la validación de los datos y/o personalizan el teclado que se muestra
cuando se utilizan dispositivos móviles. Algunos de estos nuevos tipos serían:

Sin embargo, la validación que realizan estos nuevos tipos es básica, por lo que en algunos casos se
requiere una validación más avanzada. Comúnmente, esto se realiza por medio de scripts del lado
cliente (JAVASCRIPT) o del lado servidor (PHP, ASP, PYTHON, entre otros). Adicionalmente, HTML5
incorporó el atributo pattern, que permite realizar validaciones en base a expresiones regulares
sin la necesidad de incorporar scripts. Aparte del atributo pattern disponible en HTML5, se puede
disponer del atributo maxlength para limitar la cantidad máxima de caracteres que el usuario
puede introducir en un cuadro de texto.

12
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 <form action="http://www.abc.com/next.php" method="get">
<label for="_name">Username</label>
<input type="text" name="name" id="_name"/>
<label for="_rut">Rut</label>
<input type="text" name="rut" id="_rut" maxlength="12"
pattern="[0-9]{2}.[0-9]{3}.[0-9]{3}-[0-9kK]"/>
</form>

Para ofrecer al usuario una guía de la estructura de los datos esperados, se acostumbra incorporar
el atributo title con una descripción del valor esperado o un valor provisional que se borre
cuando el usuario tome el foco sobre el cuadro de texto. Para realizar esto último, normalmente se
hacía necesario incorporar un script JAVASCRIPT que detectara los eventos y modificara el
contenido del cuadro de texto, sin embargo, HTML5 incorporó el atributo placeholder que
realiza esta tarea sin necesidad de ningún script.

<form action="http://www.abc.com/next.php" method="get">

<label for="_rut">Rut</label>
<input type="text" name="rut" id="_rut"
title="Favor type the RUT like 11.111.111-1"
placeholder="11.111.111-1"
pattern="[0-9]{2}.[0-9]{3}.[0-9]{3}-[0-9kK]"/>
</form>

Es importante destacar que muchos de los nuevos elementos y atributos incorporados por HTML5
no son soportados por todos los exploradores (Chrome, IE, Firefox, Safari, Opera, etc.) y/o en todas
sus versiones, por lo que es necesario incorporar herramientas de detección de exploradores como
modernizr, en caso de que se requiera que su página web funcione correctamente en todos los
exploradores. Únicamente en aquellos casos en los que la funcionalidad no se soporte, se pueden
incorporar scripts que se ejecuten de la manera tradicional.

13
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 Enlaces de interés

Etiquetas HTML <input>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

http://www.w3schools.com/html/html_form_input_types.asp

Atributos Etiquetas HTML <input>

http://html5doctor.com/html5-forms-introduction-and-new-attributes/

http://www.w3schools.com/html/html_form_attributes.asp

Detector de Exploradores

http://modernizr.com/

Conectando
Luego, el encargado de la página le solicitó a Pablo definir el
tipo de elementos que deberán ser utilizados para recibir los
datos básicos del usuario (nombre, teléfono, email y
compañía). Además, le solicitó que definiera un mecanismo
para validar que los datos suministrados por los usuarios
tuvieran al menos un formato válido. Para hacer el
formulario más amigable a los usuarios, le solicitó que
incluyera algún tipo de ayuda que indicase qué formato de
datos se espera.

1.1.2. CUADROS PARA CONTRASEÑAS

Los cuadros para contraseñas son un tipo de elemento input (password) que presenta al usuario
una interfaz muy similar a la ofrecida por los cuadros de texto, con la salvedad de que el texto
ingresado por el usuario se presenta oculto. Al igual que los otros tipos de elementos input, se
pueden utilizar los atributos de validación (pattern y maxlength) y ayuda (title y
placeholder).

14
ESTE DOCUMENTO CONTIENE LA SEMANA 1
Es importante destacar que el valor almacenado por este elemento no se encuentra cifrado por lo
que se deben tomar precauciones al momento de enviar dicha información al servidor, ya sea
utilizando alguna función de cifrado en JAVASCRIPT o enviando la misma vía método POST.

<form action="http://www.abc.com/next.php" method="get">

<label for="_pass">Password</label>
<input type="password" name="pass" id="_pass"
placeholder="Enter your Password"
pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"/>
</form>

Enlaces de interés

Etiquetas HTML <input type="password">

http://www.w3.org/TR/html-markup/input.password.html

Funciones JAVASCRIPT para cifrado y validación

https://code.google.com/p/crypto-js/

http://www.the-art-of-web.com/javascript/validate-password/

Conectando

Para que los usuarios puedan acceder al portal de clientes, el

formulario de registro debe poseer un primer campo para solicitar la
contraseña y un segundo campo de verificación de la misma. En tal
sentido, se deben incorporar dichos campos en el formulario y
validar la contraseña otorgada para asegurarse que la misma sea
segura.

15
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 1.1.3. ÁREAS DE TEXTO

Cuando se requiere que el usuario coloque una gran cantidad de información en un solo campo de
texto, los cuadros de textos no ofrecen una interfaz muy agradable al usuario, ya que todo el texto
es colocado en una sola línea, lo cual en algunos casos es inapropiado, como por ejemplo sucede
cuando se requiere de una descripción o un mensaje del usuario.

Para estos casos, los elementos textarea ofrecen mayor flexibilidad. Estos elementos aceptan
múltiples líneas de texto, y por defecto permiten que el usuario redimensione el tamaño del
elemento. Es importante destacar que, a diferencia de los elementos input, las etiquetas
textarea requieren de una etiqueta de cierre.

Al igual que los elementos input, se pueden utilizar los atributos de validación (pattern y
maxlength) y ayuda (title y placeholder); sin embargo, los elementos textarea disponen
de atributos adicionales que permitirán dimensionar los elementos, como los atributos cols y
rows que establecen el número de columnas y líneas que tiene inicialmente el elemento.

<form action="http://www.abc.com/next.php" method="get">

<label for="_desc">Descripción</label>
<textarea name="desc" id="_desc" maxlength="200"
rows="5">
Summary description about the company
</textarea>
</form>

Al igual que ocurre con los elementos input, algunos atributos incorporados por HTML5 no son
soportados por todos los exploradores (Chrome, IE, Firefox, Safari, Opera, etc.) y/o en todas sus
versiones.

16
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 Conectando
Entre la información solicitada a los usuarios se encuentra el
nombre de la compañía a la que pertenecen. Para disponer de una
descripción de la compañía y poder ofrecer a los clientes un servicio
mejor enfocado a sus necesidades, se requiere que Pablo genere un
formulario que disponga de un campo donde el usuario pueda
colocar una breve descripción de no más de 200 caracteres sobre la
compañía a la cual pertenece.

Enlace de interés

Etiquetas HTML <textarea>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea

1.1.4. BOTONES DE RADIO

Otro medio para obtener información de los usuarios es la utilización de botones de radio, los
cuales ofrecen un mecanismo para una opción entre un grupo de posibles valores preestablecidos.
Los botones de radio solo permiten elegir una única opción, lo cual los hace idóneos para aquellos
casos donde se requiera que el usuario haga una selección simple, como por ejemplo elegir el
género. Se recomienda utilizarlos cuando la cantidad de opciones disponibles es reducida, en caso
contrario es mejor utilizar los menús.

Para crear botones de radio se debe incorporar un grupo de elementos input type="radio",
cada uno de los cuales debe poseer el atributo value asociado a la selección que representa. Es
importante destacar que para que los botones de radio funcionen correctamente, todos los
elementos pertenecientes al mismo grupo deben tener asignados el mismo atributo name. Solo un
botón de radio con el mismo atributo name podrá ser seleccionado a la vez.

17
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 <form action="http://www.abc.com/next.php" method="get">
<label>Genero:</label>
<input type="radio" id="g_m" value="male" name="gender"
checked>
<label for="g_m">Hombre</label>
<input type="radio" id="g_f" value="female"
name="gender">
<label for="g_f">Mujer</label>
</form>

El atributo checked puede ser utilizado para definir qué botón de radio se encuentra seleccionado.

Enlaces de interés

Etiquetas HTML <input type="radio">

https://www.w3.org/wiki/HTML/Elements/input/radio

http://www.w3.org/TR/html-markup/input.checkbox.html

http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_RADIO.html

Conectando
La compañía MAPRI, en la que trabaja Pablo, tiene presencia en 4
diferentes países (Chile, Colombia, Perú y Brasil) y su portal estará
disponible para todas sus operaciones, por lo que se requiere que el
usuario especifique en qué país reside, de tal forma que se le pueda
atender con el personal local. En tal sentido, se requiere que se
incorpore en el formulario a generar un campo que sirva para que el
usuario indique el país donde se encuentra ubicado.

18
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 1.1.5. CASILLAS DE VERIFICACIÓN

En algunos casos se requiere que el usuario elija entre un grupo de opciones preestablecidas. En
estos casos, los botones de radio no pueden ser utilizados, ya que solo permiten que una sola
opción sea elegida. Si se da esta circunstancia, se pueden utilizar las casillas de verificación, las
cuales permiten que múltiples opciones sean seleccionadas simultáneamente. Al igual que los
botones de radio, se recomienda utilizar las casillas de verificación cuando la cantidad de opciones
disponibles sea reducida, en caso contrario es mejor utilizar los menús.

Para crear casillas de verificación se debe incorporar un grupo de elementos input

type="checkbox", cada uno de los cuales debe de poseer el atributo value asociado a la
selección que representa. Es importante destacar que para que las casillas de verificación funcionen
correctamente, todos los elementos pertenecientes al mismo grupo deben tener asignado el
mismo atributo name.

<form action="http://www.abc.com/next.php" method="get">

<label>Intereses:</label>
<input type="checkbox" id="music" value="music"
name="hobby">
<label for="music">Musica</label>
<input type="checkbox" id="games" value="games"
name="hobby">
<label for="games">Juegos</label>
<input type="checkbox" id="movies" value="movies"
name="hobby">
<label for="movies">Peliculas</label>
<input type="checkbox" id="travel" value="travel"
name="hobby">
<label for="travel">Viajes</label>
</form>

El atributo checked puede ser utilizado para definir qué botón de radio se encuentra seleccionado.

19
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 Enlaces de interés

Etiquetas HTML <input type="checkbox">

https://www.w3.org/wiki/HTML/Elements/input/checkbox

http://www.w3.org/TR/html-markup/input.checkbox.html

http://www.htmlcodetutorial.com/forms/_INPUT_TYPE_CHECKBOX.html

Conectando
La compañía MAPRI ofrece entre sus productos telas, maderas, hilos y
pinturas; por lo que se requiere que sus usuarios indiquen en qué
productos están interesados. En tal sentido, es preciso que Pablo
incorpore en el formulario un campo que sirva para que el usuario
indique los productos en los que está interesado, dejando la posibilidad
de que pueda seleccionar múltiples productos.

1.1.6. MENÚS

Cuando se requiere que el usuario elija entre un grupo extenso de opciones preestablecidas, los
botones de radio y las casillas de verificación no son recomendables. En estos casos, los menús son
la mejor opción. Por defecto, estos solo permiten elegir una opción, sin embargo, es posible
modificar este modo de operación agregando el atributo multiple, el cual permitirá que múltiples
opciones puedan ser seleccionadas simultáneamente.

Los elementos select despliegan un menú que contiene opciones seleccionables. Cada una de
estas opciones es definida utilizando elementos option, los cuales deben estar anidados dentro
del bloque select. Adicionalmente, si el listado incluido dentro del menú es muy extenso, se
pueden hacer agrupaciones utilizando elementos optgroup, los cuales no son seleccionables pero
igual sirven para tener un mejor orden dentro del menú.

20
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 <form action="http://www.abc.com/next.php" method="get">
<label for="_lang">Lenguajes</label>
<select id="_lang" name="code">
<optgroup label="Lenguajes de Cliente">
<option value="js">Javascript</option>
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Lenguajes del Servidor">
<option value="php">PHP</option>
<option value="asp">ASP</option>
<option value="python">Python</option>
<option value="ruby">Ruby</option>
</optgroup>
</select>
</form>

Cuando se utiliza el atributo multiple, la presentación del elemento select varía levemente y,
en vez de desplegar un menú, presenta una lista como la que se muestra a continuación.

21
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 Enlaces de interés

Etiquetas HTML <select>

http://www.w3schools.com/tags/tag_select.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select

Etiquetas HTML <option>

http://www.w3schools.com/tags/tag_option.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option

Etiquetas HTML <optgroup>

http://www.w3schools.com/tags/tag_optgroup.asp

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/optgroup

Conectando
Finalmente, la información que se requiere que Pablo incluya en el
formulario deberá disponer de un campo donde se pueda especificar
el rubro de la compañía a la que pertenece el cliente. Para ello, el
formulario deberá incluir un campo que permita que el usuario elija
entre un listado de rubros posibles.

22
ESTE DOCUMENTO CONTIENE LA SEMANA 1
COMENTARIO FINAL
Hasta el momento usted ha tenido la oportunidad de conocer y manejar los elementos básicos de
un formulario HTML, gracias a lo cual se equipó con las herramientas mínimas requeridas para
construir formularios bien estructurados y adaptados a los requerimientos de múltiples ambientes.

Las herramientas adquiridas no permiten crear formularios totalmente operativos, pero sí que
servirán de base para el manejo del resto de las funcionalidades disponibles y requeridas para la
construcción de formularios HTML totalmente operativos.

Conectando
El formulario resultante cumple con los
requerimientos iniciales de la compañía MAPRI,
permitiendo recopilar la información de registro
de sus clientes, lo cual posibilita a su vez
emprender nuevos negocios y atender de manera
más personalizada a todos los interesados en sus
productos.

23
ESTE DOCUMENTO CONTIENE LA SEMANA 1
REFERENCIAS
Mozilla Developer Network-MDN (s. f.). HTML Forms Guide. Recuperado de:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms

World Wide Web Corporation-W3C (s. f.). HTML Elements Form. Recuperado de:

https://www.w3.org/wiki/HTML/Elements/form

World Wide Web School-W3Schools (s. f.). HTML Forms. Recuperado de:

http://www.w3schools.com/html/html_forms.asp

PARA REFERENCIAR ESTE DOCUMENTO, CONSIDERE:

IACC (2015). Formularios I. Programación HTML II. Semana 1.

24
ESTE DOCUMENTO CONTIENE LA SEMANA 1
 25
ESTE DOCUMENTO CONTIENE LA SEMANA 1