<!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>
Crear cuenta