Un Formulario Basado en una Lista de Definición

El código HTML es:

<html>
 <head>
 <link rel="stylesheet" media="screen" type="text/css" href="./Estilos.css" />
 </head>
<body>
 <form >
 <fieldset>
 <legend>Nueva Entrada</legend>
 <p>Los campos con * son obligatorios.</p>
 <dl>
 <dt>
 <label for="Perfil">Perfil *</label>
 </dt>
 <dd>
 <select name="Perfil" id="Perfil" tabindex="1">
 <option value="">--SELECCIONE--</option>
 <option value="Profesional">Estudiante</option>
 <option value="Profesional">Profesional</option>
 </select>
 </dd>
 <dt>
 <label for="Nombre">Nombre *</label>
 </dt>
 <dd>
 <input type="text" name="Nombre" id="Nombre" tabindex="2" />
 </dd>
 <dt>
 <label for="Apellidos">Apellidos *</label>
 </dt>
 <dd>
 <input type="text" name="Apellidos" id="Apellidos" tabindex="3" />
 </dd>
 <dt>
 <label for="Resumen">Resumen</label>
 </dt>
 <dd>
 <textarea name="Resumen" id="Resumen" rows="11" cols="30" tabindex="4">
 </textarea>
 </dd>
 <dt>
 <label for="Suscribirme">Suscribirme: </label>
 </dt>
 <dd>
 <input type="checkbox" name="Suscribirme" id="Suscribirme" value="s" tabindex="5"/>
 </dd>
 </dl>
 </fieldset>
 <input type="submit" value="Enviar" tabindex="6" />
 </form>
</body>
</html>

El codigo CSS es:

fieldset dl {
 padding-bottom:15px;
 border:1px solid #666;
 background:#DDDDDD;
 }
fieldset dt {
 float:left;
 width:150px;
 padding:5px;
 }
fieldset dd {
 width:450px;
 margin:0;
 padding:5px;
 }
form {
 margin:0;
 padding:0;
 }
fieldset {
 margin:0 0 10px 0;
 padding:5px;
 border:1px solid #333;
 font: normal 12px 'Lucida Grande',Verdana,sans-serif;
 }
fieldset p {
 padding:5px;
 border:1px solid #666;
 background:#DDDDDD;
 }
legend {
 background: #DDDDDD;
 margin: 0;
 padding:5px;
 border-style:solid;
 border-width:1px;
 border-color:#FFF #AAA #666 #FFF;
 font-weight:bold;
 }
label {
 font-weight:bold;
 }
#Perfil, #Nombre, #Apellidos, #Resumen {
 width:280px;
 }
input, textarea {
 border:3px double #333;
 }

Estoy aprendiendo CSS de a pocos,🙂

Etiquetas:

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: