Cómo hacer un formulario con html y css
Cómo hacer un formulario mediante el uso de html y css, además de colocar una validación con JavaScript
En este artículo vamos a ver cómo se va a construir un documento de html para dar una estructura con código, además de añadir un código css para darle formato a nuestro formulario, y además le vamos a añadir un documento de JavaScript para que haga la validación de los caracteres según se va rellenando el formulario y que nos indique que todo está correcto una vez lo finalizamos.
Voy a mostrar el contenido para el formulario y la estructura que va a tener este documento.
Código y estructura html
<form action="mailto:xxx@gmail.com" method="post" enctype="text/plain">
<fieldset>
<h2>Rellenar formulario completo:</h2>
<ul>
<li>
<label id="Nombre" for="Nombre">Nombre:</label>
<input class="input" id="Nombre" type="text"required width="300px">
</li>
<li>
<label id="primer" for="primer">Primer Apellido:</label>
<input class="input" id="primer" type="text"required width="300px">
</li>
<li>
<label id="Segundo" for="Segundo">Segundo Apellido:</label>
<input class="input" id="Segundo" type="text" required width="300px">
</li>
<li>
<label id="mail" for="mail">E-mail de contacto:</label>
<input class="input" id="mail" type="text" name="mail" placeholder="xxx@gmail.com" required
pattern="^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$">
</li>
<li>
<label id="Mensaje" for="Mensaje">Mensaje:<span>*describe tu consulta</span></label>
<textarea class="input" id="Mensaje" name="Mensaje" cols="30" rows="10" placeholder="Escribe tu mensaje..."></textarea>
</li>
<li>
<div class="checkbox">
<input id="check" type="checkbox" required >
<a href="#">He leido y acepto la politica de privacidad</a>
</div>
</li>
<li>
<label for="contactar"></label>
<button style="background-color: rgb(0, 225, 255) ;" type="submit">CONTACTAR</button>
</li>
<li>
<label for="reset"></label>
<button style="background-color: rgb(255, 0, 76) ;" type="submit">Reiniciar</button>
</li>
</ul>
</fieldset>
</form>
<script src="js/validacion_formulario.js"></script>
Definición del código
En el documento vemos que tenemos un <h1> «para el titulo principal del documento», y también un <h2> dentro del formulario específicamente dentro de la etiqueta <fieldset>. Al inicio del formulario, le he dado un <fieldset>, para poder juntar toda la información en un mismo bloque.
También se pueden colocar varios <fieldset> en caso de que quieras remarcar cada apartado del formulario, también he de decir que es optativo, en cada caso será distinto para lo que se requiera.
Para que todos los apartados en donde nos indica que introduzcamos información de contacto, lo he puesto en una lista desordenada <ol>, lo que hace es que en cada <label> e input estén dentro de un <li>, para que queden marcados dentro de la lista. Más adelante se le quitaran los puntos de la lista, para que el formulario quede mejor visualmente.
Como se puede ver todos los <inputs> que van desde el <input del nombre > hasta el <input del mensaje> todos tienen una misma <class="">, se ha hecho de esta forma para así juntarlos todos y ahorrarte hacer diferentes clases para añadirlos después al código css.
Implementación Input checkbox
En la siguiente lista vemos que he puesto un <div>, lo he puesto así para poder separarlo de los demás <input>. De esta manera puedo darle el valor que más se me adecue para ir colocándolo de otra manera en el css, y que así tenga una <class=""> diferente a los demás. Además de que lo acompaño con un <a href="#"> en el que pongo los términos y la política de privacidad, en este caso el link esta vacío, pero en el caso de que quieras utilizarlo para tu empresa, allí se pondrá el link que requieras para poder visualizar la política de privacidad.
En las dos siguientes listas, podemos ver el botón de contactar y el de reiniciar, en este caso se ha hecho de esta manera con un <label> y con un <button>, también se puede hacer de otra manera que es utilizar <input type=”submit”> o <input type=”reset”>, las dos formas son válidas, la segunda es más simple, pero en este caso utilizaremos la primera opción que está marcada.
Código CSS
/*FORMULARIO CON LA UL Y LAS LI*/
form, form ul{display: flex;
flex-direction: column;
justify-content: center;
align-items: center;padding: 25px 0px 0px;gap: 28px;}
form ul {display: flex;flex-direction: column;
justify-content: center;align-items: center;gap: 28px;}
form li {display: flex;flex-direction: column;justify-content: center;gap:12px}
/*CLASS INPUT*/
.input{width: 400px;background-color: rgb(199, 189, 189);}
/*CLASS CHECKBOX*/
.checkbox{display: flex;justify-content: start;gap: 12px;}
/*MENSAJE DEL TEXTAREA*/
textarea{width: 400px;height: 200px;background-color: rgb(199, 189, 189);}
/*FIELDSET Y EL SPAN*/
fieldset{border: 4px solid orangered;background: chartreuse;}
span{color: blueviolet;}
Por cada zona que queremos incluir parte del código le ponemos un /*comentario*/ y le pondremos las especificaciones para esa parte de código. Cada uno lo hará de su manera, es más fácil hacerlo de esta forma, porque a la hora de retocar el código, ya sabes por donde hay que ir y así te ahorras mirar todo el código para encontrar lo que quieras modificar o quieras poner algún extra o cambio.
Así quedaría el formulario completo desde la web:
El formulario no hace falta que este con fondo de color, depende de quién o para que lo necesite se le puede poner el color de fondo o también se le puede poner una imagen con transparencia para darle más vida al documento o sino dejarlo con el color predeterminado blanco.
Como se puede hacer la validación del formulario mediante el uso de JAVASCRIPT/JS?
Para poder hacer la validación de un formulario, usaremos funciones de JS, en los cuales indicaremos que es lo que queremos que verifique a la hora de rellenar el formulario.
Este es el código para hacer la validación:
function validar_formulario(){
if(document.getElementById('Nombre').value.length < 2 ){
todo_correcto = false;
if(document.getElementById('Primer Apellido').value.length < 3 ){
todo_correcto = false;
if(document.getElementById('Segundo Apellido').value.length < 3 ){
todo_correcto = false;
}
var expresion = [a-zA-Z0-9];
var mail = document.form.email.value;
if (!expresion.test(mail)){
todo_correcto = false;
}
var texto = document.getElementById('Mensaje').value;
if(texto==''){
alert("El textarea no puede estar vacío")
}
var checkbox = document.getElementById('check');
checkbox.addEventListener("change", validaCheckbox, false);
function validaCheckbox(){
var checked = checkbox.checked;
if(checked){
alert('checkbox esta seleccionado');
}
if(!document.getElementById('contactar').checked){
todo_correcto = false;
if(!todo_correcto){
alert('Algunos campos no están correctos, revisa los que te quedan');
}
return todo_correcto;
}}}}}
- LA FUNCTION VALIDAR_FORMULARIO: sirve para verificar («nombre, primer apellido y segundo apellido»),en el que le decimos que si se coloca menos de 2 y 3 caracteres, te saldrá un error de que no cumple con el requisito mínimo según en su ubicación.
- VAR EXPRESION: aquí le declaramos que va a aceptar cualquiera de los caracteres de la (a-z) en Minúsculas, (A-Z) en Mayúsculas y de los números del (0 al 9), es decir que acepta caracteres tipo STRING y NUMERICOS.
- VAR CHECKBOX + MANTENER A LA ESPERA: declaramos la variable , y además le añadimos que se mantenga a la espera hasta que se valide el checkbox.
- LA FUNCTION VALIDACHECKBOX: al ser un booleano, deberás hacer clic para que marque la casilla y quede seleccionada.
- RETURN: si todo esta correcto te saldrá el formulario completo.
Una vez tengamos todo el código html y css, en el documento html antes de cerrar el </body> le pondremos la etiqueta <script src="aquí poner la ruta donde se encuentra la validación del formulario"></script> para que haga efecto todas las validaciones. Una vez hecho todo ya podrás rellenar todo el formulario completo.
Para poder ver todo el contenido completo, deberás entrar en el siguiente enlace: Albert on CodePen