Bienvenidos sean a este post, siguiendo la tematica del post anterior hoy haremos un formulario de ejemplo para implementar varios objetos, el formulario sobre una simple confeccion para creacion de usuario e implementaremos un par de soluciones para el mismo, los objetos que usaremos son:
- form
- text
- password
- checkbox
- radio
- select
- button
Y las siguientes funciones:
- for
- if
Para este caso implementaremos un formulario muy basico para la creacion de un usuario de una pagina web pasemos al codigo:
<html>
<head>
<title>Pagina 02</title>
<script language="javascript">
<!--
function Subir()
{
var formulario="";
var usuario=document.form1.usuario.value;
var nombre=document.form1.nombre.value;
var apellido=document.form1.apellido.value;
var email=document.form1.email.value;
var clave1=document.form1.clave1.value;
var clave2=document.form1.clave2.value;
var hobbies="";
var b=document.form1.hobby.length;
for(a=0;a<b;a++)
{
if (document.form1.hobby[a].checked)
hobbies+=document.form1.hobby[a].value + ", ";
}
var pais=document.form1.pais.value;
var sexo=document.form1.sexo.value;
if (usuario=="" || nombre=="" || apellido=="" || pais=="" )
{
alert("Los campos con asterisco son obligatorios!!!");
return false;
}
if (hobbies.length==0)
{
alert("Debes seleccionar al menos un hobby!!");
return false;
}
if ((clave1!=clave2) || (clave1==""))
{
alert("Las claves deben ser iguales y no pueden ser en blanco!!!");
return false;
}
if (email=="") email="No informado";
if (sexo=="") sexo="No informado";
formulario="Usuario: " + usuario + "\nNombre: " + nombre + "\nApellido: " + apellido + "\n"
+ "E-mail: " + email + "\nClave: " + clave1 + "\nHobbies: " + hobbies + "\nPais: "
+ pais + "\nSexo: " + sexo;
alert(formulario);
}
//-->
</script>
</head>
<body>
<form name="form1" method="POST" action="">
<table border="0" cellpadding="0" cellspacing="0" width="400">
<tr>
<td width="50%">Ingresa el usuario: (*)</td>
<td width="50%"><input type="text" name="usuario" id="usuario" value=""></td>
</tr>
<tr>
<td width="50%">Ingresa el nombre: (*)</td>
<td><input type="text" name="nombre" id="nombre" value=""></td>
</tr>
<tr>
<td width="50%">Ingresa el apellido: (*)</td>
<td><input type="text" name="apellido" id="apellido" value=""></td>
</tr>
<tr>
<td width="50%">Ingresa el correo electronico:</td>
<td width="50%"><input type="text" name="email" id="email" value=""></td>
</tr>
<tr>
<td width="50%">Ingresa una password: (*)</td>
<td width="50%"><input type="password" name="clave1" id="clave1" value=""></td>
</tr>
<tr>
<td width="50%">Repite la password: (*)</td>
<td width="50%"><input type="password" name="clave2" id="clave2" value=""></td>
</tr>
<tr>
<td width="50%" align="left" valign="top">Seleccione sus hobbies: (*)</td>
<td width="50%">
<input type="checkbox" name="hobby" value="programar">Programar
<input type="checkbox" name="hobby" value="deportes">Deportes<br>
<input type="checkbox" name="hobby" value="meditar">Meditar
<input type="checkbox" name="hobby" value="cine">Cine<br>
<input type="checkbox" name="hobby" value="leer">Leer
<input type="checkbox" name="hobby" value="videojuegos">Video Juegos<br>
</td>
</tr>
<tr>
<td width="50%">Pais: (*)</td>
<td width="50%">
<select name="pais" id="pais">
<option value="">--</option>
<option value="argentina">Argentina</option>
<option value="brasil">Brasil</option>
<option value="chile">Chile</option>
<option value="colombia">Colombia</option>
<option value="ecuador">Ecuador</option>
</select>
</td>
</tr>
<tr>
<td width="50%">Sexo:</td>
<td width="50%">
<input type="radio" name="sexo" value="m">M
<input type="radio" name="sexo" value="f">F
<input type="radio" name="sexo" value="n">N
</td>
</tr>
<tr>
<td width="50%" align="center">
<button type="button" name="boton" onClick="Subir()">Crear usuario</button>
</td>
<td width="50%" align="center">
<button type="reset" name="botonR">Cancelar</button>
</td>
</tr>
</table>
Los campos con asteriscos(*) son obligatorios.
</form>
</body>
</html>Este codigo se ve largo pero no lo es tanto, hablemos primero del codigo HTML, utilizamos un FORM, y en este formulario utilizaremos un TABLE el cual nos permitira tener ordenadas los elementos donde ingresaremos los datos, los primeros cuatro datos se usa un elemento de tipo text para almacenar el usuario, nombre, apellido y correo electronico, luego vendran dos campos de password para ingresar dos veces la clave de este usuario, nuestro siguiente paso es un conjunto de elementos de tipo select para elegir el o los hobbies de los usuarios, nuestro siguiente dato sera el pais de origen de la persona, para finalizar el sexo del usuario pudiendo elegir entre Masculino (M), Femenino (F) y No informarlo (N) pero tambien podemos dejarlo en blanco, por ultimo tendremos dos botones, uno para cargar nuestro formulario y otro para resetearlo, con esto comentamos el formulario en HTML, el boton que carga el formulario llama una funcion llamada Subir.
Nota: Para este formulario utilizamos el metodo POST pero tambien se puede usar GET, en general es mas optimo el uso de POST pero queda a criterio del programador, en action podemos asignar una pagina distinta a donde enviar la informacion pero en general queda en blanco y se usa la pagina del formulario.
La funcion Subir, primero creara una variable llamada formulario la cual iniciaremos vacia, despues crearemos una variable por cada campo a la cual le asignaremos el valor del mismo, veamos uno de ejemplo:
var usuario=document.form1.usuario.value;
En este caso creamos la variable y despues por medio de toda la jerarquia de objetos llegamos al elemento asignado y usamos la propiedad value para asignarle el valor almacenado, esto mismo lo haremos con el usuario, el nombre, el apellido, el correo electronico y las dos contraseñas, veamos el bloque para determinar los hobbies:
var hobbies="";
var b=document.form1.hobby.length;
for(a=0;a<b;a++)
{
if (document.form1.hobby[a].checked)
hobbies+=document.form1.hobby[a].value + ", ";
}Primero crearemos una variable llamada hobbies y la crearemos vacia, despues crearemos otra variable llamada b donde le asignaremos la cantidad de elementos del array hobby, si observan en el codigo HTML veran como cada uno de los elementos checkbox tienen el mismo nombre para crear el array, en b tendremos la cantidad de elementos (chequeados o no) del array, luego usaremos un bucle for donde usaremos a b como limite y pasaremos por cada uno de las posiciones de hobby y chequearemos si el mismo esta chequeado (checked) y en caso de ser cierto agregaremos el valor de esa posicion a hobbies, por ultimo tomaremos los valores asignados a pais y sexo, pasemos a hablar de los bloques de seguridad:
if (usuario=="" || nombre=="" || apellido=="" || pais=="" )
{
alert("Los campos con asterisco son obligatorios!!!");
return false;
}Este bloque chequea si usuario, nombre, apellido o pais estan vacios, si alguna de estas variables no tiene ningun valor nos muestra un mensaje en pantalla y devuelta un return false interrumpiendo la ejecucion de la funcion, en caso de no cumplirse ninguna de esas condiciones pasa al siguiente bloque:
if (hobbies.length==0)
{
alert("Debes seleccionar al menos un hobby!!");
return false;
}
En este bloque verifica si el tamaño de hobbies es igual a 0, en caso de ser cierto el programa considera que no se selecciono ningun hobby, nos notifica que debemos seleccionar uno y sale de la funcion, en caso de ser falso sigue al siguiente bloque:
if ((clave1!=clave2) || (clave1==""))
{
alert("Las claves deben ser iguales y no pueden ser en blanco!!!");
return false;
}
En este caso primero verificara si clave1 es distinta a clave2 o si clave1 esta vacia, si cumple algunos de los dos casos nos mostrara una notificacion y saldra de la funcion, esto es ideal para evitar que se ingrese una clave en blanco o que pongan dos claves distintas, si no se cumple ninguna de las dos condiciones pasa de este bloque y continua con la funcion.
Despues del bloque verificaremos si email y sexo tiene un valor por medio de un if, en caso de no tenerlo le asignamos el valor «no informado», ahora procederemos a agregar todos estos valores a la variable formulario, observen que para hacer el salto de linea usamos el modificador \n, de esto hablamos en el post anterior, una vez completado nuestra variable formulario por medio de un alert lo mostramos en pantalla, procedamos a probarlo como se ve en el siguiente video
En este caso podemos ver todos los mensajes de errores, como los solucionamos, tambien pudimos ver las dos posibles salidas de este programas, tengan en cuenta que esto en general va a un servidor y este se encarga de adminstrar los datos pero esto es una forma muy basica de ver como trabaja y envia la informacion.
Nota: Si utilizan una funcion para verificar estos datos y luego enviarlos en general en lugar de usar el alert deberian usar document.form1.submit() para subir todos los datos a la pagina y/o servidor.
En resumen, en este caso hemos implementado algunos elementos tipicos de formulario, hemos obtenido los valores almacenados en el mismo, hemos hecho algunas verificaciones basicas para evitar que el formulario sea subido con errores, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.
Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.
Tambien podes donar
Es para mantenimiento del sitio, gracias!
$1.50
El blog de Tinchicus 
Tinchicus, gracias por sus aportes.
Estoy aprendiendo por estos días a conocer del lenguaje JS, la verdad de todo lo que he visto este post es el mejor, claro, preciso y lleva al entendimiento total.
Me gustaMe gusta
Siempre es la idea, tratar de que el articulo publicadi le sea de utildad tanto para el que no sabe como el que posee conocimiento, muchisimas gracias por la visita y el comentario, tambien me alegra que te haya sido de utilidad!
Me gustaMe gusta
amigo Tinchicus estoy empezando con el tema de los formularios.. podrias ayudarme a realizar uno simple para mi pagina web ? tupromotora.com – quisiera hacer una lista de registros de afiliados, pero no se como hacer los formularios, salgo raspado en el envio…. no se como programar el envia a mi correo, por medio de foprmulario.. mi correo es radamesmichelena@gmail.com gracias
Me gustaMe gusta
Es complicado, un consejo anda a mi seccion de PHP y ahi no vemos formulario en particular pero si algo muy similar a lo que comentas, especialmente con el tema de enviar por correo y formularios, abrazo!
Me gustaMe gusta