F o r m u l a r i os

Introducción.
Los formularios permiten a los usuarios interaccionar con programas que se encuentran en los servidores remotos. En
otras palabras los formularios proveen un medio por el cual se puede solicitar información, así como la manera de
llevar a cabo el procesamiento de datos enviados por el usuario.

En los sistemas informáticos basados en la Web es muy común encontrar formularios para recopilar información.

HTML provee etiquetas para generar todos los objetos de formulario, a continuación se muestra la lista de los
elementos de formulario que podemos generar con HTML.

1. Campos de texto
2. Campos de contraseña
3. Botones
4. Botones de opción
5. Casillas de verificación.
6. Combos
7. Etiquetas
 Generando formularios.
Para crear un formulario, en HTML, se utiliza la etiqueta <form> para delimitar inicio y fin del formulario.

Sintaxis.

<form>
Elementos del formulario.

</form>

Atributos.

Atributo Operación Valores.

action Indica la URL del script * Documento web, script

relacionado con este formulario dinamico, operación
protocolo-aplicacion
method Determina como deben ser * get, post
procesados los formularios.

* En el curso no se enfatiza en estos atributos, pues en cursos posteriores se hace una

revisión muy exhaustiva.
 Agregar Elementos al formulario
Para agregar elementos a un formulario se utiliza la etiqueta <input>, esta etiqueta determina que tipo de elemento
será agregado al formulario, mediante el valor de un atributo.

Sintaxis.

<form>
<input> El tipo de elemento es determinado por el atributo type

</form>

Notas:
Por cada elemento que se desee agregar al formulario debemos agreagr una etiqueta <input>.
 Atributos de la etiqueta <input>
Atributo Operación Valores
type Determina el tipo de elemento text, textarea, password,
radio,checkbox
value Indica el valor inicial de los elementos del formulario Según elemento

Name Identifica valores recolectados por un formulario Según elemento

(variable)
id Identificador del elemento Identificador

size Indica la longitud grafica de un campo de texto o Tamaño en caracteres

password
maxlength Determina la longitud maxima de caracteres en un Numero entero que denota el
campo de texto o password numero de caracteres
src Indica la URL de una imagen Ruta

checked Indica si un radio o checkbox esta seleccionado Si e indica este atributo el elemento
esta seleccionado, su ausencia
implica no seleccionado
disabled Determina si el elemento esta deshabilitado. Similar a checked.

readonly Elementos de solo lectura Similar a checked.

evento Indica que se lanzara un evento. Evento Javascript

 Agregando campos de texto
Para agregar un campo de texto se configuran los atributos de la etiqueta <input> de la siguiente manera.

sintaxis
< input type=“text” [size=“NN”] name=“nombre” >

Indica que el elemento

es un campo de texto. Variable en la que se
Longitud del campo de texto, por almacenan los datos del
default es de 20 campo texto
 Campos de texto. Ejemplo

Inserción de un campo de texto en un formulario.

Campo de texto de tamaño 15

 Agregando Campo de Contraseña.
Para agregar un campos de contraseña se configuran los atributos de la etiqueta <input> de la siguiente manera.

Sintaxis.
<input type=“password” [size=“NN”] name=“nombre” >

Indica que el elemento

es un campo de Variable en la que se
Contraseña. Longitud del campo de Contraseña, almacenan los datos del
por default es de 20 campo Contraseña
Campos de Contraseña. Ejemplo
 Agregando Botones.
Para agregar un BOTON se configuran los atributos de la etiqueta <input> de la siguiente manera.

Sintaxis.
<input type=“button” value=“valor_objeto” name=“nombre” >

Indica que el elemento

es un Boton Variable en la que se
Valor inicial del boton almacenan los datos del
campo Contraseña

Importante:
Los botones creados con el valor “button” del atributo type,
generalmente son utilizados para ejecutar eventos JavaScript.
 Botones en formularios. Ejemplos
Para los botones mediante la etiqueta <input>, aplican los
siguientes atributos:
type, value, name, disabled, evento.

En el caso de los botones, el valor del atributo value, indica el

texto sobre el boton al mismo tiempo que el valor de la
variable del boton.
 Agregar optionButton
Para agregar un OptionButton se configuran los atributos de la etiqueta <input> de la siguiente manera.

Sintaxis.
<input type=“radio” value=“valor” name=“nom_obj” [checked]>

Indica que el elemento Valor inicial del boton

es un boton de opción Nombre del Opcional, indica si
objeto esta seleccionado
por default
 optionButton. Ejemplo.
La regla en los optionbutton, es que solo uno de un
conjunto se pueda seleccionar.

Para logra un conjunto cada uno de los optionbutton

deben tener el mismo nombre (atributo name)

Conjunto de optionbutton
 Botones “submit” y “reset”
Para enviar datos se requiere de un botón Submit en el formulario. La sintaxis de dicho botón es la siguiente:

<input type=“submit” [value=“texto sobre el botón”] >

El atributo value fija el texto sobre el botón, por omisión el texto es “Submit”.

Otro botón útil es Reset, el cual limpia el formulario por completo. La sintaxis de dicho botón es la siguiente:

<input type=“reset” [value=“texto sobre el botón”] >

El atributo value fija el texto sobre el botón, por omisión el texto es “Reset”.
Botones “submit” y “reset” (Ejemplo)
 Agregar checkBotton
Para agregar un CheckBox se configuran los atributos de la etiqueta <input> de la siguiente manera.

Sintaxis.
<input type=“checkbox” value=“valor” name=“nom_obj” [checked]>

Indica que el elemento Valor inicial del objeto

es un Casilla de Nombre del Opcional, indica si
verificación objeto esta seleccionado
(checkbox) por default
 CheckBotton. Ejemplo
A diferencia de los optionbutton, las casillas de
verificación no están restringidas a un solo elemento
seleccionado.

Casilla de verificación deshabilitada.

 Agregar Combos
La etiqueta <SELECT> permite agregar combos en un formulario. Cada alternativa del combo es representada por la
etiqueta <OPTION>. La sintaxis general de esta etiqueta es la siguiente:

Sintaxis.
<SELECT NAME=“Nombre del elemento” SIZE=“NN” [MULTIPLE]>
<OPTION [SELECTED] [VALUE=“valor1”]> Etiqueta1
<OPTION [SELECTED] [VALUE=“valor1”]> Etiqueta2
...
<OPTION [SELECTED] [VALUE=“valor1”]> EtiquetaN
</SELECT>
Combos. Ejemplo

El combo muestra solo un

elemento de la lista.

Por default el elemento

“Mexico”, esta
seleccionado
 Combos. Ejemplo

Mostrando 2 elementos del combo

Mostrando 1 solo elemento del combo

 Agregar Área de texto.
Las áreas permiten al usuario poner más de una línea de texto en un solo elemento. La sintaxis general de la
etiqueta es la siguiente:

Sintaxis.

<textarea cols=“Número de columnas” rows=“Number de renglones” name=“Nombre del elemento”>

TEXTO INICIAL

</textarea>

Nota.
Los atributos COLS y ROWS indican el número de columnas y renglones del TEXTAREA respectivamente
Área de texto. Ejemplo