2010

[FORMULARIOS HTML]
[Visita: http://marleo.cjb.NET
[Este pequeo manual lo he preparado para mis alumnos, amigos y todas aquellas personas con ganas de aprender ms. Es un tutorial bastante sencillo en el cual se explica cmo crear formularios HTML a un nivel intermedio avanzado, dando realce a las propiedades ms importantes]

Atte. FRANCIA MINAYA Jhon Edward

Docente Jhon Edward Francia Minaya [Seleccione la fecha]

Jhon Edward Francia Minaya 1 Formularios HTML

FORMULARIOS HTML
Para crear formularios en HTML debemos realizar lo siguiente:

1.

Abrir un nuevo archivo de texto plano, por ejemplo BLOC DE NOTAS y escribir las etiquetas indispensables para la creacin de una pgina WEB:

Para dejar un comentario se utilizan las siguientes etiquetas: <!-- Escribe aqu tu comentario --> NOTA.- Es importante documentar lo que estamos haciendo para poder realizar el mantenimiento a nuestro cdigo fuente o simplemente esto nos puede servir como un recordatorio de lo que estamos haciendo.

2. ETIQUETA: <FORM>
Esta etiqueta sirve para crear formularios HTML (dentro crearemos los controles: buttons, text, option, checkbox, etc.). Adems esta etiqueta tiene propiedades que son de suma importancia tales como: NAME ACTION METHOD = Nombre del formulario = Script a ejecutar del lado del servidor (asp, jsp, php) = La forma como se enviarn los datos (POST GET)

Ejemplo de creacin de un formulario HTML

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 2 Formularios HTML

OBSERVACIONES: Podemos utilizar las propiedades (NAME, ACTION y METHOD) en cualquier orden no importando las maysculas o minsculas. Pero recomiendo hacerlo tal y como se muestra en la imagen de la parte superior.

Debemos tener en claro que el proceso de grabacin se realiza escribiendo el nombre entre comillas y colocando la extensin HTM. Vea la siguiente imagen para una mayor descripcin:

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 3 Formularios HTML El archivo que estamos construyendo se llama Formularios.htm, en el explorador de Windows ubicaremos nuestro archivo con el icono que representa a Internet Explorer (o Nuestro navegador preestablecido).

Si ejecutamos este archivo (Formulario.htm) nos damos cuenta que no contiene nada, NO SE PREOCUPE, que los formularios HTML solo sirve para contener los controles con los que el usuario trabajar y enviar los datos al SCRIPT del SERVIDOR (Por ejemplo: con PHP).

Trabajo realizado hasta el momento sin controles :)

3. DISEO DE CONTROLES
Los controles ms utilizados son los botones y las cajas de textos, empezar a detallar este ltimo y continuar con los ms complicados posteriormente:

ETIQUETA INPUT Esta etiqueta es MULTIFACTICA, ya que nos permite crear una gran cantidad de controles tan solo variando la propiedad TYPE de la misma. La sintaxis ms bsica la encontramos de la siguiente manera: <input type= tipo_control name= nombre_Control> DONDE: tipo_control : los valores de esta propiedad son variados y cada uno de ellos nos dar como resultado un control diferente: TEXT = Cajas de texto PASSWORD = Cajas de texto para contraseas CHECKBOX = casilla de verificacin RADIO = Opciones

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 4 Formularios HTML

SUBMIT RESET FILE HIDDEN IMAGE BUTTON

= Botn de envo
= Botn de reinicio (Limpia el contenido del formulario)

= Carga un archivo desde el cliente = Crea una caja de texto invisible para el cliente = Inserta un control con imagen = Crea un botn de comando.

nombre_control : es una propiedad sper importante ya que har nico al control dentro del formulario. RECUERDE que un formulario puede contener muchos controles y esta propiedad sera la nica forma de identificarlo. CREANDO UNA CAJA DE TEXTO. Utilizaremos las siguientes instrucciones (modo bsico). <input type="text" name="nombre_tu_Control"> Vamos a crear un campo para que el cliente escriba sus apellidos:

El texto Apellidos se coloca sin etiquetas ya que se mostrar acompaando a la caja de textos

OTRAS PROPIEDADES DISABLED MAXLENGTH READONLY SIZE VALUE STYLE = Para deshabilitar el control = Cantidad mxima de caracteres soportados = Propiedad de solo lectura = Tamao del control = Valor predefinido = entre sus valores ms importantes tenemos:

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 5 Formularios HTML

o background-color o color

Color de fondo del control Color de fuente del control

Estos valores son asignados con dos puntos y separados por ;, por ejemplo: style= background-color:Green; color: white

Comentario: esto crea una caja de texto llamada txtApellidos, con una capacidad mxima de 30 caracteres y 20 pixeles. de ancho, estableciendo un color de fondo AZUL con el color de letra AMARILLO. El resultado sera el siguiente:

Vamos a crear dos cajas de texto ms, una para los NOMBRES y otra para el DNI:

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 6 Formularios HTML

El resultado para la caja de texto sera el siguiente:

Estoy utilizando varios colores para demostrar la facilidad con la que la propiedad STYLE puede trabajar aunque se ve un poco disparatado el diseo ;) continuamos con la tercera caja para el DNI

El resultado:

CREANDO CAJAS PARA CONTRASEAS. En el diseo del formulario anterior vamos a incluir tres de cajas de texto, una para el nombre de usuario y 2 donde se solicite al usuario ingresar su

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 7 Formularios HTML

contrasea. Las propiedades son las mismas que para el caso anterior (cajas de texto simples).

Esta caja de texto es igual a las anteriores. No utilizo la propiedad STYLE para acortar la explicacin del cdigo pero si desea puede hacerlo por su cuenta. Ahora las instrucciones para crear las cajas de contraseas:

El resultado

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 8 Formularios HTML

CREANDO CAJAS DE TEXTO MULTI LNEAS Este tipo de contenedor especial permite capturar datos escritos por el usuario abarcando una capacidad mucho mayor que la de las cajas de texto simples. Son muy tiles cuando queremos solicitar Direccin, comentarios, referencias, etc, adems trabajan en mltiples lneas. Sintaxis bsica: <textarea name=>Contenido por defecto</texarea> Propiedades: NAME COLS ROWS

= Nombre del control = Columnas (Parecido al ancho) = Filas (Parecido al alto)

El resultado

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 9 Formularios HTML

CREANDO OPCIONES Estos controles sirven para mostrar opciones donde solo es permitida una opcin, por ejemplo cuando preguntamos el sexo. La sintaxis bsica es:
<input type=radio name= value = >Etiqueta

PROPIEDADES NAME = Nombre del control VALUE = Valor de variable de cada opcin CHECKED = Opcin por defecto DISABLED = Opcin desactivada La etiqueta no es una propiedad, pero es necesaria escribirla para que el usuario sepa cul es la opcin que est marcando. Continuamos agregando controles a nuestro formulario anterior. Esta vez daremos la posibilidad de seleccionar el sexo (masculino y femenino):

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 10 Formularios HTML

Observaciones: ambos controles deben tener el mismo nombre (propiedad NAME) porque pertenecen al MISMO GRUPO, el valor (propiedad VALUE) funcionar cuando los datos sean enviados al servidor a travs de un lenguaje de programacin como PHP o ASP.NET pero no sern visibles al usuario, por eso es necesario escribir la etiqueta externa. El resultado es el siguiente:

Por defecto el sexo Masculino est marcado porque tiene la propiedad CHECKED Para que este tema quede mejor explicado vamos a crear algunas opciones que sugieran el estado del trabajar en una empresa:

El resultado:

La segunda opcin es la predeterminada y la ltima est desactivada CREANDO CUADROS COMBINADOS COMBOS Este control es uno de los ms populares ya que renen una gran cantidad de opciones en una lista. La sintaxis bsica es esta: <select name= > <option value = >Opcion 1</option> <option value = >Opcion 2</option> <option value = >Opcion n</option> </select>
Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 11 Formularios HTML

PROPIEDADES SELECTED TITLE VALUE

= Opcin predeterminada = Ttulo de cada OPTION = Valor de variable de cada opcin

Sigamos agregando ms controles al formulario Crearemos una lista donde se incluyan los diversos estados civiles de la persona, observe atentamente la forma en que se escribe el script.

Es necesario escribir el valor (propiedad VALUE), de lo contrario cuando trabajemos el formulario con aplicaciones cliente servidor (PHP) no tendr nada que enviar. El resultado es el siguiente

Agregaremos la propiedad TITLE a cada opcin

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 12 Formularios HTML

El resultado es el siguiente

CREANDO LISTAS Aadimos la propiedad SIZE a la etiqueta <SELECT>. Por ejemplo, en el caso anterior tenemos 4 elementos, si solo queremos que se muestre dos de ellos aadimos lo siguiente:

Resultado obtenido

Los mismos elementos son mostrados pero en una lista, puede dar clic en el botn de desplazamiento vertical para ver el resto de opciones CASILLAS DE VERIFICACIN

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 13 Formularios HTML

Brindan alternativas mltiples a los usuarios. A diferencia de los objeto radio, donde solo se activa una opcin a la vez, en estos controles es posible la seleccin de mltiples opciones. Sintaxis: <input type="checkbox" name="" value=""> Observacin: Posee las mismas propiedades que RADIO Vamos a crear una lista de casillas de verificacin donde el usuario podr marcar de acuerdo al programa que es capaz de manejar:

La propiedad NAME cambiar para cada elemento, lo que lo hace INDEPENDIENTE El resultado

ENVO DE DATOS - SUBMIT Este tipo de control crea un botn que permite enviar los datos a procesar por el script ubicado en el servidor (PHP). Dicho en otras palabras, este botn desencadena o ejecuta a la propiedad ACTION y METHOD del formulario, sintaxis:
<input type= submit name= value= >

OBSERVACIONES.- la propiedad VALUE hace referencia al nombre que mostrar el botn

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 14 Formularios HTML

El resultado

REINICIO DE FORMULARIO LIMPIAR/REINICIAR CONTROLES

Un botn declarado como reset es capaz de reiniciar todos los objetos contenidos en un formulario. Sintaxis: <input type= reset name= value= >

Y el resultado

Powered: http://marleo.cjb.net

Jhon Edward Francia Minaya 15 Formularios HTML

Prximamente la segunda parte de este manual

Gracias!

Powered: http://marleo.cjb.net