Control PASSWORD
Esta marca es una variante de la de tipo "TEXT". La diferencia fundamental es que cuando se carga un texto en el campo de edición sólo muestra asteriscos en pantalla, es decir, es fundamental para el ingreso de claves y para que otros usuarios no vean los caracteres que tipeamos.
La mayoría de las veces este dato se procesa en el servidor. Pero podemos en el cliente (es decir en el navegador) verificar si ha ingresado una cantidad correcta de caracteres, por ejemplo.
Ejemplo:
Codificar una página que permita ingresar una password y luego muestre una ventana de alerta si tiene menos de 5 caracteres.
<html>
<head>
</head>
<body>
<script type="text/javascript">
function verificar()
{
var clave=document.getElementById('clave').value;
if(clave.lenght<5)
{
alert('La clave no puede tener menos de 5 cacteres');
}
else
{
alert('Largo de clave correcta');
}
}
</script>
<form>
Ingrese una clave:
<input type="text" id="clave"><br>
<input type="button" value="Confirmar" onClick="verificar()">
</form>
</body>
</html>
Control SELECT
Este otro objeto visual que podemos disponer en un FORM permite realizar la selección de un string de una lista y tener asociado al mismo un valor no visible. El objetivo fundamental en JavaScript es determinar qué elemento está seleccionado y qué valor tiene asociado. Esto lo hacemos cuando ocurre el evento onChange.
Para determinar la posición del índice seleccionado en la lista: document.getElementById('select1').selectedIndex; Considerando que el objeto SELECT se llama select1 accedemos a la propiedad selectedIndex (almacena la posición del string seleccionado de la lista, numerando a partir de cero).
Para determinar el string seleccionado:
document.getElementById('select1').options[document.getElementById('select1').selectedIndex].text;
EJEMPLO:
<html>
<head>
</head>
<body>
<script type="text/javascript">
function cambiarColor()
{
var seleccion=document.getElementById('select1');
document.getElementById('text1').value=seleccion.selectedIndex;
document.getElementById('text2').value=seleccion.options[seleccion.selectedIndex].text;
document.getElementById('text3').value=seleccion.options[seleccion.selectedIndex].value;
}
</script>
<form>
<select id="select1" onChange="cambiarColor()">
<option value="0xff0000">Rojo</option>
<option value="0x00ff00">Verde</option>
<option value="0x0000ff">Azul</option>
</select>
<br>
Número de índice seleccionado del objeto SELECT:<input type="text" id="text1"><br>
Texto seleccionado:<input type="text" id="text2"><br>
Valor asociado:<input type="text" id="text3"><br>
</form>
</body>
</html>
Control CHECKBOX
El control CHECKBOX es el cuadradito que puede tener dos estados (seleccionado o no seleccionado). Para conocer su funcionamiento y ver como podemos acceder a su estado desde Javascript haremos un pequeña página.
Ejemplo: Confeccionar una página que muestre 4 lenguajes de programación que el usuario puede seleccionar si los conoce. Luego mostrar un mensaje indicando la cantidad de lenguajes que ha seleccionado el operador.
<html>
<head>
</head>
<body>
<script type="text/javascript">
function contarSeleccionados()
{
var cant=0;
if(document.getElementById('checkbox1').checked)
{
cant++;
}
if(document.getElementById('checkbox2').checked)
{
cant++;
}
if(document.getElementById('checkbox3').checked)
{
cant++;
}
if(document.getElementById('checkbox4').checked)
{
cant++;
}
alert('Conoce'+cant+'lenguajes');
}
</script>
<form>
<input type="checkbox" id="checkbox1">JavaScript
<br>
<input type="checkbox" id='checkbox2'>PHP
<br>
<input type="checkbox" id='checkbox3'>C
<br>
<input type="checkbox" id='checkbox4'>JSP
<br>
<input type="button" value="Mostrar" onClick="contarSeleccionados()">
</form>
</body>
</html>
Control RADIO
Los objetos RADIO tienen sentido cuando disponemos varios elementos. Sólo uno puede estar seleccionado del conjunto.
Ejemplo:
Mostrar cuatro objetos de tipo RADIO que permitan seleccionar los estudios que tiene un usuario:
<head>
</head>
<body>
<script type="text/javascript">
function mostrarSeleccionado()
{
if (document.getElementById('radio1').checked)
{
alert('no tienes estudios');
}
if (document.getElementById('radio2').checked)
{
alert('tienes estudios primarios');
}
if (document.getElementById('radio3').checked)
{
alert('tienes estudios secundarios');
}
if (document.getElementById('radio4').checked)
{
alert('tienes estudios universitarios');
}
}
</script>
<form>
<input type="radio" id="radio1" name="estudios">Sin estudios
<br>
<input type="radio" id="radio2" name="estudios">Primarios
<br>
<input type="radio" id="radio3" name="estudios">Secundarios
<br>
<input type="radio" id="radio4" name="estudios">Universitarios
<br>
<input type="button" value="Mostrar" onClick="mostrarSeleccionado()">
</form>
</body>
</html>
Control TEXTAREA
Este control es similar al control TEXT, salvo que permite el ingreso de muchas líneas de texto.
La marca TEXTAREA en HTML tiene dos propiedades: rows y cols que nos permiten indicar la cantidad de filas y columnas a mostrar en pantalla.
Ejemplo:
Solicitar la carga del mail y el curriculum de una persona. Mostrar un mensaje si el curriculum supera los 2000 caracteres.
<head>
</head>
<body>
<script type="text/javascript">
function controlarCaracteres()
{
if (document.getElementById('curriculum').value.length>2000)
{
alert('curriculum muy largo');
}
else
{
alert('datos correctos');
}
}
</script>
<form>
<textarea id="curriculum" rows="10" cols="50" ></textarea>
<br>
<input type="button" value="Mostrar" onClick="controlarCaracteres()">
</form>
</body>
</html>
