Diseño De Formulario Con Html Css Y Js 4p543

ed by: Kevin Amaya Solis
0
0

June 2022
PDF

This document was ed by and they confirmed that they have the permission to share it. If you are author or own the copyright of this book, please report to us by using this report form. Report 3i3n4

Overview 26281t

& View Diseño De Formulario Con Html Css Y Js as PDF for free.

More details 6y5l6z

Words: 1,524
Pages: 17

Diseño de Formulario con HTML CSS y JS En este tutorial vamos a ver como es el diseño 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 diseño de nuestra web. Entonces sin mas preambulos comenzamos. Pra

este

tutorial

usaremos

4

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

<meta charset="UTF-8"> Inicio de Sesion 6v3u6e

10 11 12 13

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

<meta charset="UTF-8"> Inicio de Sesion 6v3u6e

Iniciar Sesion 3n2g6x

Puedes notar que ahora, hemos modificado varias cosas, entre ellas las clases de los input, añadimos 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

<meta charset="UTF-8"> Registro 501r40

Registro de 5hi5p

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 , 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){ // itir 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 mayúscula 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; } }

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; };

Entonces, luego de esto siempre necesitamos que el 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 == "" || name == "") { 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; } } };

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

<meta charset="UTF-8"> Registro 501r40

Registro de 5hi5p

8 2

1 <script src="jquery.min.js"> 2 <script src="scripts.js"> 2 2 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.

Diseño De Formulario Con Html Css Y Js 4p543

Overview 26281t

More details 6y5l6z

Iniciar Sesion 3n2g6x

Registro de 5hi5p

Registro de 5hi5p

Related Documents 3h463d

Comenzando Con Html + Css x3b30

Html Y Css 6x5k30

Livro Css + Html - Maujor 6m2m5d

Html E Css Fundamentos 4i4v25

Html Css Javascript Php 67662g

More Documents from "Kevin Amaya Solis" 4zk3p

4p345f

Calculo-ii - 14 4h61l

Crucigramas - Las Tiendas 1k5x20

Gestalt Theory Of Visual Perception 485ka

Oca Ch 43s4l

Lik Trophy Brief 2018-19 _nasa_brief739 qa69