
Formulario con estilos
CSS
Publicado el 26 de Julio del 2007 por Administrador (718 códigos)
39.603 visualizaciones desde el 26 de Julio del 2007
Ejemplo de un formulario con el contenido alineado y centrado utilizando únicamente estilos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- http://www.lawebdelprogramador.com -->
<html>
<head>
<title>Ejemplo de formulario con estilos</title>
<style type="text/css">
BODY {
font-family: Arial;
font-size: 0.8em;
}
/* Estable el formato para todos los div's */
div {
clear: both;
}
/* Determina los div's que el contenido es centrado. Hereda "clear: both;" */
.form_center {
text-align:center;
}
/* Para los input's alineados */
.form_input_align {
float:left;
border:1px solid;
margin-left:0.2em;
}
/* Para los input's centrados */
.form_input_center {
border:1px solid;
}
/* Para los label's alineados */
.form_label_align {
float:left;
width:50%;
text-align:right;
}
/* indicamos una pequeña separación en cada label, input, select y textarea */
label, input, select, textarea {
margin-bottom:0.3em;
}
/* Unicamente funciona con Firefox
Determina el formato cuando se selecciona un cuadro de texto */
input:focus, select:focus, textarea:focus {
background-color: #c6d3ff;
}
/* Determina el formato de los comentarios */
.form_comment {
color: #808080;
}
/* Determina el formato de los comentarios centrados */
.form_comment_center {
text-align:center;
color: #808080;
}
/* Determina el formato de los botones */
.button {
padding: 0em 0.5em 0em 0.5em;
}
/* Determina el formato del marco */
fieldset {
border: 1px solid #808080;
padding: 0.5em 0.5em 0.5em 0.5em;
}
/* Determina el formato del titulo del marco */
legend {
color: #808080;
}
</style>
</head>
<body>
<h1 style="font-size:1em">Ejemplo de formulario con estilos</h1>
<form action="" method="post">
<!-- generamos un recuadro -->
<fieldset>
<!-- titulo del recuadro -->
<legend>Title</legend>
<!-- desde aqui se muestra el contenido alineado -->
<!-- Mostremos un comentario o descripción -->
<div class='form_comment'>Contenido alineado</div>
<!-- Mostramos un cuadro de texto para soliciar el nombre -->
<div><label for='idname' class='form_label_align'>Name :</label> <input type="text" id='idname' name='name' class='form_input_align' title="Introduce tu nombre aqui" /></div>
<!-- Mostramos un cuadro de texto para soliciar el email -->
<div><label for='idmail' class='form_label_align'>Mail :</label> <input type="text" id='idmail' name='mail' class='form_input_align' size='30' title="Introduce tu direccion de email" /></div>
<!-- Mostramos un cuadro de texto desplegable -->
<div><label for='iddesplegable' class='form_label_align'>Desplegable :</label>
<select id='iddesplegable' name='desplegable' class='form_input_align' title='Selecciona una opción'>
<option value=''>Seleccionar ...</option>
<optgroup label="Primera selección">
<option value='A'>Desplegable A</option>
<option value='B'>Desplegable B</option>
</optgroup>
<optgroup label="Segunda selección">
<option value='C'>Desplegable C</option>
</optgroup>
</select>
</div>
<!-- Mostramos un check -->
<div><label class='form_label_align'>Check :</label><input type='checkbox' id='idcheck1' name='check' title="Selecciona" /></div>
<!-- Mostramos un radio siguiendo la linea de posicion -->
<div><label class='form_label_align'>Radio :</label><input type='radio' name='radio1' Value='1' checked />Si <input type='radio' name='radio1' Value='2' />No</div>
<!-- desde aqui se muestra el contenido centrado -->
<!-- Mostremos un comentario o descripción -->
<br /><div class='form_comment_center'>Contenido centrado</div>
<!-- Mostramos un cuadro de texto para soliciar el nombre -->
<div class='form_center'><label for='idname2'>Name :</label> <input type="text" id='idname2' name='name2' class='form_input_center' title="Introduce tu nombre aqui" /></div>
<!-- Mostramos un cuadro de texto para soliciar el email -->
<div class='form_center'><label for='idmail2'>Mail :</label> <input type="text" id='idmail2' name='mail2' class='form_input_center' size='30' title="Introduce tu direccion de email" /></div>
<!-- Mostramos un cuadro de texto desplegable -->
<div class='form_center'><label for='iddesplegable2'>Desplegable :</label>
<select id='iddesplegable2' name='desplegable2' class='form_input_center' title='Selecciona una opción'>
<option value=''>Seleccionar ...</option>
<optgroup label="Primera selección">
<option value='A'>Desplegable A</option>
<option value='B'>Desplegable B</option>
</optgroup>
<optgroup label="Segunda selección">
<option value='C'>Desplegable C</option>
</optgroup>
</select>
</div>
<!-- Mostramos un check -->
<div class='form_center'><label>Check :</label><input type='checkbox' name='check2' title="Selecciona" /></div>
<!-- Mostramos un radio siguiendo la linea de posicion -->
<div class='form_center'><label>Radio :</label><input type='radio' name='radio2' Value='1' checked />Si <input type='radio' name='radio2' Value='2' />No</div>
<!-- textarea -->
<div class='form_center'><span>Comentarios...</span><br /><textarea name='text2' rows='10' cols='50' class='form_input_center'></textarea></div>
<!-- boton de enviar los datos -->
<div class='form_center'><input type="submit" value="enviar" class='button' title="Pulsa aqui para enviar" /> <input type="reset" value="restaurar" class='button' title="Pulsa aqui para restaurar" /></div>
</fieldset>
</form>
<br /><p style='clear:both;text-align:center'><a href="http://www.lawebdelprogramador.com">http://www.lawebdelprogramador.com</a></p>
</body>
</html>