Centro Regional Universitario de Veraguas

Facultad de Informática, Electrónica y Comunicación

INF302 – Programación Web

Laboratorio #1
Práctica de CSS y uso de Formulario

Objetivos
• Identificar funcionamiento de declaraciones CSS.
• Analizar los efectos de cambios en declaraciones.
• Identificar los componentes de un formulario HTML.

Descripción
Se trata de una asignación individual donde cada item se valora con tres
puntos(3). El desarrollo de este laboratorio debe entregarse impreso el 12 de abril.

Después de leer el artículo que aparece en http://www.baluart.net/articulo.php?id_art=90%20,

utilice el modelo de formulario que se presenta para hacer el siguiente ejercicio:

1. Copie en su pc los códigos html y css correspondientes. Pruebe el despliegue del

formulario y compare con la presentación que se hace en el artículo. Si los
campos del formulario no quedan debidamente alineados, analice el porqué y
haga las correcciones. ¿Qué declaración css debe modificarse para hacer
correctivos?
2. Cambie el color del fondo del div al color blanco y despliegue el documento
html. Luego elimine el padding del div y comente la diferencia, asegúrese de
que entiende lo que ocurrió.
3. Cambie el color de fondo del fieldset a #ccddaa. ¿Qué área cambio de color el
div o el fieldset? Explique. ¿Su explicación tiene algo que ver con las capas de
css?
4. Lea sobre las propiedades float y clear en http://www.ignside.net/man/css/float.php ,
elimine la declaración #registro p br {clear: left;} y describa fundamentado en
la lectura los efectos que observó.
5. Si la propiedad clear anula el float ¿es necesario mantener el label flotante?
Elimine la propiedad float del label y la declaración #registro p br {clear:
left;}. Explique lo que ocurre.
6. ¿Es necesario mantener <p> flotante? Explique.
7. ¿Cómo debe interpretarse el padding de legend?
8. ¿Cómo debe interpretarse el atributo action del elemento form de HTML?
Referencias: http://www.netmechanic.com/news/vol3/form_no4.htm
http://www.webestilo.com/html/cap7a.phtml
http://www.htmlquick.com/es/tutorials/forms.html

Anexo
Presentamos los códigos del artículo que deben ser utilizados.
<div id="registro">
<fieldset>
<form>
<legend>Registro de Nuevo Usuario</legend>
<p>
<label for="user">Usuario:</label>
<input name="username " type="text" size="20" />
<br />
<label for="pass">Contraseña:</label>

Prof. Diego Santimateo G. 1

Centro Regional Universitario de Veraguas
Facultad de Informática, Electrónica y Comunicación
INF302 – Programación Web

<input name="password" type="password" size="20" />

<br />
<label for="pass">E-mail:</label>
<input name="email " type="text" size="20" />
<br />
<label for="pass">Nombres:</label>
<input name="firstname" type="text" size="20" />
<br />
<label for="pass">Apellidos:</label>
<input name="lastname " type="text" size="20" />
<br />
<label for="pass">Dirección:</label>
<textarea name="address" cols="26" rows="3">
</textarea>
<br />
<input name=" insert" type="submit" value="Aceptar" class="enviar"/>
</p>
</form>
</fieldset>
</div>

<style type="text/css">
#registro {width:360px; padding:10px; margin:15px; border: 2px dashed #D7AAEC;background-
color:#D7AAEC;}
#registro fieldset {border:0;background-color: #E4C6F2; padding:10px 20px;}
#registro legend{font: bold 16px Arial, sans-serif;color:#9C2DD2; padding:0 5px;}
#registro p label {font:bold 12px Geneva, Arial, Helvetica, sans-serif; float: left;width: 22%; text-
align:right;padding:5px; color: #000000;}
#registro p br {clear: left;}
.enviar{margin:3px 0 0 83px;}
</style>

Prof. Diego Santimateo G. 2