FORMULARIOS Ejemplos

Diseño y Creación de Páginas Web HTML
Especialidad: Computación e Informática
FORMULARIOS
REALIZACIÓN DE FORMULARIOS
El método para realizar un formulario es el siguiente:

<FORM ACTION=http://host/nombre_programa METHOD=”POST” ENCTYPE=”TEXT/PLAIN”>
Texto/Cuerpo del Formulario.
Elementos del Formulario.
</FORM>
El comando FORM lleva como argumentos lo siguiente(ACTION, METHOD y ENCTYPE):
 ACTION.- Se utiliza para indicar que programa del ordenador donde esté el servidor será el
encargado de manipular la información del formulario, bien almacenándola en una base de
datos o generando una nueva página.
También otra forma de utilizar ACTION puede ser una llamada a otro documento HTML
para por ejemplo, indicar que la operación es ha realizado con éxito.
Por ejemplo: ACTION=”http://URL/documento.html”.
Otra forma mas de ACTION es: ACTION= mailto:direccion_de_email, de este modo se

envía la información en forma de email.
 METHOD=”GET/POST”.- Permite indicar la forma de enviar la información. Existen 2

formas: GET y POST.
o GET.- La información se envía en forma de variable de entorno.
o POST.- Los datos serán enviados inmediatamente por correo a la dirección de
e-mail, con solo pulsar el botón de envío.
 ENCTYPE=”TEXT/PLAIN”.- Se utiliza para indicar la forma empleada para codificar

los contenidos del formulario.
Los Elementos del Formulario son ingresados mediante comandos como:

 <INPUT>
 <TEXTAREA> </TEXTAREA>
 <SELECT> </SELECT>
ELEMENTOS PARA INGRESAR LOS DATOS
1. Introducción por medio de texto.

2. Introducción por medio de menús.
3. Introducción por medio de botones.
El ingreso de datos se consigue con la siguiente etiqueta:

<INPUT TYPE=”xxx” NAME=”yyyy” VALUE=”zzz”>
donde:
xxx Es el tipo de introducción
yyy Nombre de la variable
zzz Palabra asociada al elemento.
Profesor: Johnny Díaz Pág. 1

INTRODUCCIÓN POR MEDIO DE TEXTO (una línea)
Ejemplo:
<HTML>
<HEAD><TITLE>Ejemplo de formulario 1</TITLE></HEAD>
<BODY>
<FORM>
Escriba su Nombre: <INPUT TYPE="TEXT" NAME="Nombre"> <P>
Escriba su contraseña: <INPUT TYPE="PASSWORD" NAME="Clave" SIZE=6>
</FORM>
</BODY>
</HTML>
INTRODUCCIÓN POR MEDIO DE TEXTO (Múltiples líneas)
Ejemplo:
<HTML>
<BODY>
Ingrese sus comentarios: <BR>

<FORM>
<TEXTAREA NAME="Comentarios" ROWS=5 COLS=40>
</TEXTAREA>
</FORM>
</BODY>
</HTML>

INTRODUCCIÓN POR MEDIO DE MENUS

Permite al usuario escoger entre una o varias opciones.
Ejemplo 1:
<HTML>
<BODY>
<FORM>
Seleccione un curso: <P>
<SELECT NAME="Cursos">
<OPTION>Visual Basic
<OPTION>Visual Age for Java
<OPTION>SQL - Server
<OPTION>Power Builder
<OPTION SELECTED>Base de Datos
</SELECT>
</FORM>
</BODY>
</HTML>
Ejemplo 2:
<HTML>
<BODY>
<FORM>
Cual es tu Hobbie?<P>
<SELECT NAME="Gustos" MULTIPLE SIZE=3>
<OPTION>Jugar Futbol
<OPTION>Escuchar Música
<OPTION>Leer
<OPTION>Coleccionar Fotos
<OPTION>Ir al Cine
</SELECT>
</FORM>
</BODY>
</HTML>

FORMULARIO DE CONFIRMACION (CHECKBOX).-
Ejemplo:
<HTML>
<BODY>
¿Que lee Usted:? <BR>
<FORM>
<INPUT TYPE="CHECKBOX" NAME="Literatatura">Literatura diversa <BR>
<INPUT TYPE="CHECKBOX" NAME="Relatos">Relatos Antiguos <BR>
<INPUT TYPE="CHECKBOX" NAME="Revistas">Revistas <BR>
<INPUT TYPE="CHECKBOX" NAME="Libros" CHECKED>Libros tecnicos <BR>
</FORM>
</BODY>
</HTML>
FORMULARIO DE CONFIRMACION (BOTONES DE RADIO).-
Ejemplo:
<HTML>
<BODY>
¿Cual es su diario favorito:? <BR>
<FORM>
<INPUT TYPE="RADIO" NAME="Diario" VALUE="Comerio">El Comercio <BR>
<INPUT TYPE="RADIO" NAME="Diario" VALUE="Expreso">El Expreso<BR>
<INPUT TYPE="RADIO" NAME="Diario" VALUE="Republica">La Republica <BR>
<INPUT TYPE="RADIO" NAME="Diario" VALUE="Peruano" CHECKED>El Peruano <BR>
</FORM>
</BODY>
</HTML>
NOTA:
Deben tener el mismo nombre, así formarán un grupo
y se podrá seleccionar únicamente una opción del grupo.

BOTONES DE ENVIO Y DE BORRADO:
<INPUT TYPE=”SUBMIT” VALUE=”xxx”> ----- Botón de envío

<INPUT TYPE=”RESET” VALUE=”xxx”> ----- Botón de borrado
donde: xxx es el texto que aparece en el botón.
Ejemplo:
<HTML>
<BODY>
<CENTER><H2>Libro de Visitas</h2>
<FORM>
Tu Nombre <BR>
<INPUT TYPE="TEXT" NAME="nombre"><P>
Ingrese sus comentarios: <BR>
<TEXTAREA NAME="Comentarios" ROWS=5 COLS=40>
</TEXTAREA>
<P>
<INPUT TYPE="SUBMIT" VALUE="Enviar datos">
<INPUT TYPE="RESET" VALUE="Borrar datos">
</center>
</FORM>
</BODY>
</HTML>

Ejercicio:

FORMULARIOS Ejemplos

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

FORMULARIOS Ejemplos

Cargado por

Copyright:

Formatos disponibles

Diseño y Creación de Páginas Web HTML

Especialidad: Computación e Informática

El método para realizar un formulario es el siguiente:

El comando FORM lleva como argumentos lo siguiente(ACTION, METHOD y ENCTYPE):

Otra forma mas de ACTION es: ACTION= mailto:direccion_de_email, de este modo se

 METHOD=”GET/POST”.- Permite indicar la forma de enviar la información. Existen 2

 ENCTYPE=”TEXT/PLAIN”.- Se utiliza para indicar la forma empleada para codificar

Los Elementos del Formulario son ingresados mediante comandos como:

ELEMENTOS PARA INGRESAR LOS DATOS

1. Introducción por medio de texto.

El ingreso de datos se consigue con la siguiente etiqueta:

Profesor: Johnny Díaz Pág. 1

INTRODUCCIÓN POR MEDIO DE TEXTO (una línea)

INTRODUCCIÓN POR MEDIO DE TEXTO (Múltiples líneas)

Ingrese sus comentarios: <BR>

Profesor: Johnny Díaz Pág. 2

INTRODUCCIÓN POR MEDIO DE MENUS

Profesor: Johnny Díaz Pág. 3

FORMULARIO DE CONFIRMACION (CHECKBOX).-

FORMULARIO DE CONFIRMACION (BOTONES DE RADIO).-

Profesor: Johnny Díaz Pág. 4

BOTONES DE ENVIO Y DE BORRADO:

<INPUT TYPE=”SUBMIT” VALUE=”xxx”> ----- Botón de envío

donde: xxx es el texto que aparece en el botón.

Profesor: Johnny Díaz Pág. 5

Profesor: Johnny Díaz Pág. 6

También podría gustarte