Formulario en HTML5 bien Alineado
Quieres que tu formulario quede así como la siguiente imagen.
Creamos un proyecto y dentro de el las siguientes carpetas y archivos tal como lo muestra la siguiente imagen
En el Index
<!DOCTYPE html>
<!--
docs.jquery.com/Plugins/Validation
jQuery plugin Validation (para bajar plugis para hacer carruceles de imagenes)
-->
<html>
<head>
<title>Web con Formulario</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script> <!-- validar los dts usuario-->
<script type="text/javascript" src="js/jquery_validate.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="js/validar.js"></script>
<script type="text/javascript" src="js/fecha.js"></script>
<link rel="stylesheet" type="text/css" href="css/estilo.css">
<link rel="stylesheet" type="text/css" href="css/ui-lightness/jquery-ui-1.9.2.custom.css">
</head>
<body>
<form id="datosUsuario" name="datosUsuario" action="datos.jsp" method="POST">
<label >Nombre de Usuario: </label>
<input type="text" id="usuario" name="usuario" value="" /><br />
<label>Password: </label>
<input type="password" id="pass" name="pass" /><br />
<label>Confirma tu Password: </label>
<input type="password" id="pass2" name="pass2" /><br />
<label>Edad: </label>
<input type="text" id="edad" name="edad" /><br />
<label>Correo: </label>
<input type="text" id="correo" name="correo" /><br/>
<label>Telefono: </label>
<input type="text" id="telefono" name="telefono" /><br/>
<label>Numero de integrantes: </label>
<select id="integrantes" name="integrantes">
<option value="">Elige una opcion</option>
<option values="1">1</option>
<option values="2">2</option>
<option values="3">3</option>
<option values="4">4</option>
<option values="5">5</option>
</select><br/>
<label>Fecha de nacimiento</label>
<input type="text" id="fecha" name="fecha"/><br/>
<label>Sexo: </label>
<select id="sexo" name="sexo">
<option value="">Elige una opcion</option>
<option value="m">Mujer</option>
<option value="h">Hombre</option>
</select><br />
<fieldset>
<legend>Selecciona tu(s) pasatiempo(s)</legend>
<label id="nadarL">Programar</label><input type="checkbox" id="nadar" name="nadar" value="ON" /><br />
<label id="leerL">Leer</label><input type="checkbox" id="leer" name="leer" value="ON" /><br />
<label id="bailarL">Bailar</label><input type="checkbox" id="bailar" name="bailar" value="ON" />
</fieldset><br />
<input id="aceptar" type="submit" name="aceptar" value="Aceptar"/>
</form>
</body>
</html>
*En la fecha pueden declarar un input tipo date y da un calendario con buen diseño por default si ustedes quieren diseñar el calendario declaren su calendario tipo texto *
En fecha
$(function ()
{
$("#fecha").datepicker({
changeMonth:true,
changeYear:true
});
});
En validar
/*
* To change this template, choose Tools | Templates
* and open the template in the editor.
*/
$(function(){
$('#datosUsuario').validate({
rules:{
'usuario':{
required:true,
minlength:3
},
'pass':{
required:true,
rangelength:[5,30]
},
'pass2':{
required:true,
equalTo:'#pass'
},
'edad':{
required:true,
range:[18,90]
},
'correo':{
required:true,
email:true
},
'telefono':{
required:true,
rangelength:[10]
},
'integrantes':{
required:true
},
'fecha':{
required:true
},
'sexo':{
required:true
}
},
messages:{
'usuario':{
required:'Campo Obligatorio',
minlength:'Requiere por lo menos 3 caracteres'
},
'pass':{
required:'Campo Obligatorio',
rangelength:"Debe contener entre 5 y 30 caracteres"
},
'pass2':{
required:'Campo Obligatorio',
equalTo:'Debe coincidir con su contraseña anterior'
},
'edad':{
required:'Campo Obligatorio',
range:"Solo entre 18 y 90 años"
},
'correo':{
required:'Campo Obligatorio',
email:"Introduce una direccion valida"
},
'telefono':{
required:'Campo Obligatorio',
rangelength:"Numero con 10 digitos"
},
'integrantes':{
required:'Campo Obligatorio'
},
'fecha':{
required:'Campo Obligatorio'
},
'sexo':{
required:'Campo Obligatorio'
}
}
});
});
En estilo
*
{
margin:0px;
padding:0px;
list-style: none;
}
body
{
background-color: #0099ff;
margin-bottom: 10%;
margin-top: 10%;
}
form
{
clear: both;
width: 80%;
height: 900px;
margin: auto;
left: 10%;
border: solid #333333;
background-color: #33ccff;
padding-top: 70px;
}
form label
{
clear: both;
float: left;
text-align: right;
padding: 10px;
margin-left: 35%;
width: 150px;
}
form input
{
clear: both;
margin-top: 10px;
margin-bottom: 10px;
}
select
{
clear: both;
margin-top: 10px;
margin-bottom: 10px;
}
label.error
{
clear: both;
position: absolute;
color: #cd0a0a;
right: 21%;
width: 300px;
text-align: left;
}
fieldset
{
clear: both;
width: 60%;
margin-left: 20%;
height: 130px;
}
legend
{
text-align: center;
}
#bailar
{
clear: both;
position: absolute;
right: 66%;
top: 85%;
}
#bailarL
{
clear: both;
position: absolute;
right: 67%;
top: 85%;
width: 80px;
height: 5px;
text-align: right;
line-height: 12px;
}
#leer
{
clear: both;
position: absolute;
right: 66%;
top: 81%;
}
#leerL
{
clear: both;
position: absolute;
right: 67%;
top: 81%;
width: 80px;
height: 5px;
text-align: right;
line-height: 12px;
}
#nadar
{
clear: both;
position: absolute;
right: 66%;
top: 77%;
}
#nadarL
{
clear: both;
position: absolute;
right: 67%;
top: 77%;
width: 80px;
height: 5px;
text-align: right;
line-height: 12px;
}
#aceptar
{
clear: both;
position: absolute;
width: 80px;
text-align: center;
left: 48%;
}
