5 formularios - javascript

FORMULARIOS HTML - JAVA SCRIPT 1
FORMULARIOS EN HTML
1.- FORMULARIOS
Para enviar información entre páginas web y el servidor, se usan los formularios. Los
formuarios son bloques HTML, los cuales,contienen información acerca de los datos que se van a
enviar, estos datos datos se encuentran estructurados en otros bloques llamados INPUT.
Sintaxis:
<form onsubmit="">
</form>
2.- INPUTS
Los inputs son bloques que permiten el registro de información por parte del usuario, esta
información es enviada cuando el formulario es enviado. Los bloques input cuentan con los
siguientes atributos:
type: Define el tipo de entrada que se visualizará. Tenemos los siguientes tipos:
• text: es un campo de texto de una sola línea.
• button: define un botón.
• checkbox: define un control checkbox.
• file: define un control para cargar archivos.
• hidden: oculta el input de la vista del usuario.
• image: muestra una imagen como input.
• password: oculta los caracteres que se digitan por un símbolo.
• radio: define un control radiobutton
• reset: define un botón que al ser pulsado vuelve los valores value a los predefinidos.
• submit: envia el formulario.
id: como cualquier otro bloque en HTML, se le puede asignar una id, en este caso es muy útil
cuando se usa para hacer validaciones desde Java Script.
name: Es el nombre que se le asigna al campo del formulario, este campo es usado por la
página web a la que va dirigido el action del formulario para obtener los valores registrados en el
formulario.
value: Este contiene el valor que se ha registrado en el formulario(desde javascript), también
se usa para predefinir un valor en el input.
disabled: desactiva el control para la edición cuando la página es cargada.
size: especifica el ancho.
2.1.- Atributos privados
Algunos atributos solo funcionan con determinados tipos(type) de input:
Docente Mazuelos Saavedra, Jean

accept: define los tipos de ficheros a ser aceptados, solo disponible para file.
alt: define un texto alternativo en caso de que la imagen no sea cargada, solo disponible
para image.
checked: define si el control está preseleccionado, solo disponible para radio y
checkbox.
maxlenght: define el tamaño límite, en caracteres, que se puede permitir, disponible
solo para text y password.
readonly: define que el texto en el input solo puede ser seleccionado mas no posible de
editar, disponible para text y password.
src: especifica la url por la cual se va a cargar la imagen, solo disponible para image.
2.2.- Ejemplos:
Aqui se le muestra algunos ejemplos:
Input de tipo texto:
<input type="text" id="txtNombres" name="txtNombres" />
Input de tipo checkbox, predefinido:
<input type="checkbox" checked="checked" id="chkPredefinido"
name="chkPredefinido" />
Input del tipo text, con límite de caracteres a 45:
<input type="text" id="txtNombres" name="txtNombres" maxlength="45" />
3.- LABEL
El bloque especial label se usa para definir un texto identificativo de un input. Sintaxis:
<label for="txtNombres">Nombres: </label>
El atributo especial for le permite identificar(por id) a un input, cuando se hace clic en el label
simplemente se da el foco a dicho input.
4.- USO DE JAVA SCRIPT
Los formularios tienen el evento onsubmit la cual es disparada cuando se presiona un input del
tipo submit dentro de un formulario. Este evento detecta el valor devuelto por la función javascript
que se ejecuta durante dicho evento, cuando la función devuelve un valor false el formulario no es
enviado.
Para poder usar validar o interactuar con los input de los formularios es necesario
identificarlos, o en su defecto, identificar el formulario y hacer uso de la estructura DOM para poder
acceder a los input mediante su nombre.
Cuando se usa la estructura DOM, se debe usar el name del bloque pra poder identificarlo
dentro del árbol. Teniendo el caso de un input con name=”texto” dentro de un formulario se podria

acceder al input de la siguiente manera:
form.texto
4.1.- Ejemplo de identificación por ID.
<html>
<head>
<script language="JavaScript">
function validar(){
var txt = document.getElementById('txtNombres');
alert('Su nombre es:' + txt.value);
return false;
}
</script>
</head>
<body>
<form onsubmit="javascript:validar();">
<input type="submit" value="Enviar" />
</form>
</body>
</html>
4.2.- Ejemplo de Identificación por navegación de árbol DOM:
<html>
<head>
<script language="JavaScript">
function validar(){
var form = document.getElementById('form');
alert('Su nombre es:' + form.txtNombres.value);
return false;
}
</script>
</head>
<body>
<form id="form" onsubmit="javascript:validar();">
<input type="submit" value="Enviar" />
</form>
</body>
</html>
4.3.- Funciones y Nodos útiles:
Aqui se les presenta una lista de funciones JavaScript útiles:
length: es un nodo presente en todo los textos, indica el tamaño de la cadena de
texto(en caracteres).
charAt(var index): es una función que solo devuelve el caracter que se encuentra
ubicado en el índice index, todos los tipos cadena contienenesta función

5.- EJERCICIOS
• Crear un formulario HTML en el cual se muestren los campos:código, nombres, apellidos,
sexo, dirección, telefono, email.
• Validar, medainte javascript, que todos los campos del formulario HTML no tengan campos
vacios.
• Crear una función llamada contiene en javascript con 2 parámetros(argumentos), el primer
parámetro contendrá un texto, el segundo parámetro contendrá el texto a verificar, la función
devolvera true cuando el texto a verificar contenga algún caracter del primer parámetro, en
caso contrario devolverá false.
• Validar que los campos nombres, apellidos contengan solo caracteres de texto, los campos
telefono y código solo tengan números y el campo dirección solo tenga números y texto, el
campo email debe ser validado para que se acerque lo más posible a un correo electrónico
verdadero.

5 formularios - javascript

Más contenido relacionado

Similar a 5 formularios - javascript (20)

5 formularios - javascript