Diseo de Formulario con HTML CSS y JS
En este tutorial vamos a ver como es el diseo de un formulario de registro e inicio de sesion con HTML,
CSS y JS.
Lo primero que necesitamos es una idea de lo que queremos hacer, es por eso que he decidido comenzar
con el formulario para registro e inicio de sesion, ya que de aqui en adelante partiremos para realizar todo
el diseo de nuestra web.
Entonces sin mas preambulos comenzamos.
Pra
este
tutorial
usaremos
archivos,
un
archivo index.html,
un
archivo registro.html, un
archivo estilos.csspara los estilos visuales y un archivo scripts.js para las verificaciones de los campos
al comenzar asi debe quedar la estructura del index.html
1
2
3
4
5
6
7
8
9
<html>
<head>
<meta charset="UTF-8">
<title>Inicio de Sesion</title>
</head>
<body>
<form>
<input type="text" name="user" placeholder="Usuario" />
<input type="password" name="pass" placeholder="Contrasea" />
<button type="submit" >Iniciar Sesion</button>
</form>
10
11
12
13
</body>
</html>
es un html simple en el cual declaramos un formulario, dos input y un boton.
Pero de momento si ejecutamos eso en nuestro navegador se vera como algo asi
Entonces es aqui donde debemos primero darle estilos a esta pagina
para ello modificaremos el codigo del archivo estilos.css que creamos anteriormente, y debe quedar de
la
1
2
3
4
5
6
7
8
9
siguiente
html
{
background-color: #FFFFFF;
}
a
{
background: gray;
border-radius: 3px;
color: black;
padding: 4px;
manera
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
text-decoration: none;
}
a:hover
{
background: #FFFFFF;
color: #FF0000;
padding: 8px;
}
body
{
background-color: transparent;
color: #000000;
font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
}
input
{
border: 4px solid;
height: 25px;
}
.container
{
background-color: #008080;
border: 4px solid #000000;
height: 200px;
margin: 0 auto;
padding: 15px 0 2px 0;
text-align: center;
width: 250px;
}
.form-control
{
border-color: #cbd5dd;
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
border-radius: 24px;
}
.form-control,
.form-control:focus
{
-webkit-box-shadow: none;
-moz-box-shadow: none;
-ms-box-shadow: none;
-o-box-shadow: none;
box-shadow: none;
}
.form-control:focus
{
border-color: #177bbb;
}
.form-group
{
margin-bottom: 15px;
}
.input-s-sm {
width: 120px;
}
.input-s {
width: 200px;
}
.input-s-lg {
width: 250px;
}
70
71
72
73
74
75
76
77
78
79
80
81
con esto entonces el codigo de nuestro archivo index.html queda de la siguiente manera
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<meta charset="UTF-8">
<title>Inicio de Sesion</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="container">
<h2>Iniciar Sesion</h2>
<form>
<div class="form-group">
<input type="text" name="user" placeholder="Usuario" class="form-control input-s" required />
<span id="msj"></span>
</div>
<div class="form-group">
<input type="password" name="pass" placeholder="Contrasea" class="form-control input-s" required />
</div>
<div class="form-group">
<button type="submit" class="form-control" id="but" >Iniciar Sesion</button>
</div>
18
19
20
21
22
23
24
25
26
27
<div class="form-group">
<a href="registro.html">Registrarme...</a>
</div>
</form>
</div>
</body>
</html>
Puedes notar que ahora, hemos modificado varias cosas, entre ellas las clases de los input, aadimos
algunos div, para separar mejor todo y poder asignar estilos de una manera mas sencilla. ademas
colocamos requeridos los campos, con el atributo de HTML5 required. Por lo tanto ahora nuestro fomulario
de inicio de sesion se ve asi
Una recomendacion importante en este punto es que no tengas miedo
en intentar colocar cualquier cosa diferente a lo que vemos en este tutorial, recuerda que las mejores
cosas del mundo siempre surgieron por intentar a ver que sucedia a intentar cosas diferentes.
Ya en este punto, vamos a crear otro formulario, pero en este caso para el registro, siempre siguiendo la
misma metodologia, claro esta que puedes cambiar los estilos a tu gusto para cada formulario, solo tienes
que jugar con las clases en el archivo CSS.
El formulario de registro es el siguiente
El codigo se escribe asi
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
<head>
<meta charset="UTF-8">
<title>Registro</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="container">
<h2>Registro de Usuario</h2>
<form>
<div class="form-group">
<input type="text" name="nombre" id="nombre" placeholder="Nombre" class="form-control input-s" required />
<span id="msjnombre"></span>
</div>
<div class="form-group">
<input type="email" name="correo" id="correo" placeholder="Correo" class="form-control input-s" required />
<span id="msjcorreo"></span>
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
</div>
<div class="form-group">
<input type="number" name="telefono" id="telefono" placeholder="Telefono" class="form-control input-s" required />
<span id="msjtelefono"></span>
</div>
<div class="form-group">
<input type="text" name="user" id="user" placeholder="Usuario" class="form-control input-s" required />
<span id="msjuser"></span>
</div>
<div class="form-group">
<input type="password" name="pass" id="pass" placeholder="Contrasea" class="form-control input-s" required />
<span id="msjpass"></span>
</div>
<div class="form-group">
<button type="submit" class="form-control" id="but" >Registrarme</button>
</div>
<div class="form-group">
<a href="index.html">Iniciar Sesion</a>
</div>
</form>
</div>
</body>
</html>
En este apartado notaremos que aparte de colocar el atributo name, le colocamos el atributo id, esto con
la finalidad de hacer las verificaciones respectivas por medio de funciones javascript.
Para que las funciones javascript tengan efecto necesitamos la libreria jQuery, puedes decargarla de la
pagina oficial, de igual manera la dejare entre los archivos.
Ahora bien, aunque tenemos declarados los input en tipo text, number, email y pass, siempre se necesita
contralar toda la entrada entonces primero veremos la funcion para convertir la primera letra en
mayuscula y no permitir numeros en el input ideal para los campos de nombres y apellidos.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script>
function validarTM(e,solicitar){
// Admitir solo letras
tecla = (document.all) ? e.keyCode : e.which;
if (tecla==8) return true;
patron =/[\D\s]/;
te = String.fromCharCode(tecla);
if (!patron.test(te)) return false;
// No amitir espacios iniciales y convertir 1 letra a mayscula
txt = solicitar.value;
if(txt.length==0 && te==' ') return false;
if (txt.length==0 || txt.substr(txt.length-1,1)==' ') {
solicitar.value = txt+te.toUpperCase();
return false;
}
}
</script>
Luego de esto necesitamos campos que solo contengan numeros, para eso utilizamos la siguiente funcion,
ideal para campos de Cedula o Telefono.
1
2
3
4
5
6
<script>
function solonumeros(){
if ((event.keyCode < 48) || (event.keyCode > 57))
event.returnValue = false;
};
</script>
Entonces, luego de esto siempre necesitamos que el usuario sepa que no pueden ir miles de caracteres en
los campos, por lo tanto creamos una funcion que nos controlara esa parte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
function validar (g) {
var name = g.name;
var largo = $("#"+name).val().length;
if(largo == 0)
{
$("#msj"+name).html("Este Campo Es Requerido");
}
else {
$("#msj"+name).html("");
}
if(name == "nombre" || name == "user" || name == "pass")
{
if(largo <= 3)
{
$("#msj"+name).html("Este campo de contener mas de 3 caracteres");
document.getElementById('but').disabled = true;
}
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
else if(largo > 3 && largo < 10){
$("#msj"+name).html("");
document.getElementById('but').disabled = false;
}
}
else if (name == "correo") {
if(largo <= 6)
{
$("#msj"+name).html("Este campo de contener mas de 6 caracteres");
document.getElementById('but').disabled = true;
}
else {
$("#msj"+name).html("");
document.getElementById('but').disabled = false;
}
}
else if (name == "telefono") {
if(largo != 11)
{
$("#msj"+name).html("Este campo de contener 11 caracteres");
document.getElementById('but').disabled = true;
}
else {
$("#msj"+name).html("");
document.getElementById('but').disabled = false;
}
}
};
</script>
46
47
48
El formulario con los mensajes de validacion queda de la siguiente manera
y para que se muestren los mensajes y se tomen las funciones javascript
hay que tener el archivoregistro.html final de la siguiente manera
1
2
3
4
5
6
<html>
<head>
<meta charset="UTF-8">
<title>Registro</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div class="container">
7 <h2>Registro de Usuario</h2>
8 <form>
<div class="form-group">
9 <input type="text" name="nombre" id="nombre" placeholder="Nombre" class="form-control input-s" required onkeyup="validar(nombre)" o
1 <span id="msjnombre"></span>
0 </div>
11<div class="form-group">
<input type="email" name="correo" id="correo" placeholder="Correo" class="form-control input-s" required onkeyup="validar(correo)"
1 <span id="msjcorreo"></span>
2 </div>
1 <div class="form-group">
3 <input type="number" name="telefono" id="telefono" placeholder="Telefono" class="form-control input-s" required onkeyup="validar(t
1 <span id="msjtelefono"></span>
</div>
4 <div class="form-group">
1 <input type="text" name="user" id="user" placeholder="Usuario" class="form-control input-s" required onkeyup="validar(user)" />
5 <span id="msjuser"></span>
1 </div>
class="form-group">
6 <div
<input type="password" name="pass" id="pass" placeholder="Contrasea" class="form-control input-s" required onkeyup="validar(pass)
1 <span id="msjpass"></span>
7 </div>
1 <div class="form-group">
8 <button type="submit" class="form-control" id="but" >Registrarme</button>
</div>
1 <div class="form-group">
9 <a href="index.html">Iniciar Sesion</a>
2 </div>
0 </form>
2 </div>
1
<script src="jquery.min.js"></script>
2 <script src="scripts.js"></script>
2 </body>
2 </html>
3
2
4
2
5
2
6
2
7
2
8
2
9
3
0
3
1
3
2
3
3
3
4
3
5
3
6
3
7
3
8
3
9
4
0
4
1
4
2
4
3
De Esta Manera entonces terminamos este tutorial, con el cual aprendiste a creal tu formulario, con tus
propios estilos basicos y con validacion de campos por medio de javascript.
No dejes de seguirnos, que pronto tendremos mas tutoriales, al mismo tiempo en la proxima entrada te
traere los codigos comentados para que comprendas mejor los avances.
