Anuncios
Anuncios

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&nbsp;
	<input type="checkbox" name="hobby" value="deportes">Deportes<br>
	<input type="checkbox" name="hobby" value="meditar">Meditar&nbsp;
	<input type="checkbox" name="hobby" value="cine">Cine<br>
	<input type="checkbox" name="hobby" value="leer">Leer&nbsp;
	<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&nbsp;
	<input type="radio" name="sexo" value="f">F&nbsp;
	<input type="radio" name="sexo" value="n">N&nbsp;
	</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>
Anuncios

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.
Anuncios

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

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 + ", ";
	}
Anuncios

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

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

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

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.

Anuncios

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

Anuncios

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.
Anuncios

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.

Anuncios

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.00