5 Formularios Javascript 130701114235 Phpapp01

FORMULARIOS HTML - JAVA SCRIPT
FORMULARIOS EN HTML
1.- FORMULARIOS
Para enviar informacin entre pginas web y el servidor, se usan los formularios. Los
formuarios son bloques HTML, los cuales,contienen informacin 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 informacin por parte del usuario, esta
informacin 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 lnea.
button: define un botn.
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 smbolo.
radio: define un control radiobutton
reset: define un botn 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
pgina 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), tambin
se usa para predefinir un valor en el input.
disabled: desactiva el control para la edicin cuando la pgina es cargada.
size: especifica el ancho.
2.1.- Atributos privados
Algunos atributos solo funcionan con determinados tipos(type) de input:
DocenteMazuelosSaavedra,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 tamao lmite, 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"
name="chkPredefinido" />
checked="checked"
id="chkPredefinido"
Input del tipo text, con lmite 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 funcin javascript
que se ejecuta durante dicho evento, cuando la funcin 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 identificacin 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 Identificacin por navegacin 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 tamao de la cadena de
texto(en caracteres).
charAt(var index): es una funcin que solo devuelve el caracter que se encuentra
ubicado en el ndice index, todos los tipos cadena contienenesta funcin
5.- EJERCICIOS
Crear un formulario HTML en el cual se muestren los campos:cdigo, nombres, apellidos,

sexo, direccin, telefono, email.
Validar, medainte javascript, que todos los campos del formulario HTML no tengan campos
vacios.
Crear una funcin llamada contiene en javascript con 2 parmetros(argumentos), el primer

parmetro contendr un texto, el segundo parmetro contendr el texto a verificar, la funcin
devolvera true cuando el texto a verificar contenga algn caracter del primer parmetro, en
caso contrario devolver false.
Validar que los campos nombres, apellidos contengan solo caracteres de texto, los campos
telefono y cdigo solo tengan nmeros y el campo direccin solo tenga nmeros y texto, el
campo email debe ser validado para que se acerque lo ms posible a un correo electrnico
verdadero.

5 Formularios Javascript 130701114235 Phpapp01

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

5 Formularios Javascript 130701114235 Phpapp01

Загружено:

Авторское право:

Доступные форматы

FORMULARIOS HTML - JAVA SCRIPT

text: es un campo de texto de una sola lnea.

button: define un botn.

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

radio: define un control radiobutton

submit: envia el formulario.

FORMULARIOS HTML - JAVA SCRIPT

Input de tipo checkbox, predefinido:

Input del tipo text, con lmite de caracteres a 45:

FORMULARIOS HTML - JAVA SCRIPT

acceder al input de la siguiente manera:

4.2.- Ejemplo de Identificacin por navegacin de rbol DOM:

4.3.- Funciones y Nodos tiles:

FORMULARIOS HTML - JAVA SCRIPT

Crear un formulario HTML en el cual se muestren los campos:cdigo, nombres, apellidos,

Crear una funcin llamada contiene en javascript con 2 parmetros(argumentos), el primer

Вам также может понравиться