Вы находитесь на странице: 1из 25

INTRODUCCION A FORMULARIOS

LIC. GINA HUERTAS CAMACHO

Formularios

Formularios 2

FORMULARIO

  • Sección de un documento con elementos especiales denominados controles. Esta sección puede ser enviados a un agente para ser procesados.

  • Nace con el concepto de dar interacción al usuario con la página. Ejemplo, formulario de contacto.

  • En un formulario se pueden considerar elementos como:

    • TextField

    • TextArea

    • Select

    • Button( tipo button, submit, reset)

    • Radio.(Option y Check)

  • En algunos navegadores los elementos mencionados anteriormente solo son visibles si son parte de una formulario.

FORMULARIO  Sección de un documento con elementos especiales denominados controles. Esta sección puede ser enviados

¿Cómo se crea el formulario?

¿Cómo se crea el formulario? 4
¿Cómo se crea el formulario? 4

LA ETIQUETA <FORM>.

  • Empiezan con <form>.

  • Finaliza con </form>.

  • En <form>se indica:

Destino de los datos del formulario Forma de envío de los datos

Tag Form y Atributos

  • Tag Form

    • El comienzo de un formulario esta dado por <form> y el fin del formulario por </form>

  • Atributos del Tag Form

    • Name: nombre con el cual podrá ser accesido un formulario a través de código dinámico y javascript.

    • Action: define la URL del archivo encargado de procesar el requerimiento de envió del formulario.

    • Method: métodos de envió del formulario. Get o Post.

    • Target: en caso de que se este trabajando con frame se especifica el nombre de este.

Formularios

  • Estructura:

<HTML> <HEAD><TITLE>Formulario Simple</TITLE></HEAD> <BODY> <H2>El formulario más simple</H2> <FORM name="login" action=“datos.php" method="POST"> Introduzca su nombre:&nbsp;&nbsp; <INPUT
<HTML>
<HEAD><TITLE>Formulario Simple</TITLE></HEAD>
<BODY>
<H2>El formulario más simple</H2>
<FORM name="login" action=“datos.php" method="POST">
Introduzca su nombre:&nbsp;&nbsp;
<INPUT type="text" name="nombre" size="25"><BR><BR>
<INPUT type="submit" value="Enviar">&nbsp;&nbsp;&nbsp;
<INPUT type="reset" value="Borrar">
</FORM>
</BODY>
</HTML>
Elementos de un Formulario  TextField  <INPUT type=“text" name="" value="">  TextField Oculta  <INPUT

Elementos de un Formulario

  • TextField

    • <INPUT type=“text" name="" value="">

  • TextField Oculta

    • <INPUT type=“hidden" name="" value="">

  • TextField Password

    • <INPUT type=“password" name="" value="">

  • Buttón

    • <INPUT type=“button" name="" value="">

  • Buttón Submit

    • <INPUT type=“submit" name="" value="">

  • Buttón Reset(Limpia el formulario)

    • <INPUT type=“reset" name="" value="“>

EN CONCLUSION

El formulario Permite recoger datos introducidos por el usuario.

Un formulario está formado, entre otras cosas, por etiquetas,

campos de texto, menús desplegables, y botones

<form> y </form>

indican el inicio y fin de un formulario

El atributo action indica una dirección de correo electrónico o la dirección del programa que se encargará de procesar el contenido del formulario.

El atributo method indica el metodo mediante el que se transfieren las variables del formulario. Su valor puede ser get o post

Ejemplo de Formularios <HTML> <Head> <Title>Un cuadro de texto</Title> </Head> <Body> <H1>Ingreso de Datos de Libros</H1>e j 0 1 9 . h t m l " id="pdf-obj-9-2" src="pdf-obj-9-2.jpg">

Ejemplo de Formularios

Ejemplo de Formularios <HTML> <Head> <Title>Un cuadro de texto</Title> </Head> <Body> <H1>Ingreso de Datos de Libros</H1>e j 0 1 9 . h t m l " id="pdf-obj-9-6" src="pdf-obj-9-6.jpg">

<HTML> <Head> <Title>Un cuadro de texto</Title> </Head> <Body> <H1>Ingreso de Datos de Libros</H1>

<Form Name=Libros>

<P>Nombre del Libro: <Input Type=Text Name=NombreLibro

Size=40></P>

</Form>

</Body>

</HTML>

Formularios <HTML> <Head> <Title>Un cuadro de texto</Title> </Head> <Body> <H1>Ingreso de Datos de Libros</H1> <Form Name=Libros>

Formularios

Formularios <HTML> <Head> <Title>Un cuadro de texto</Title> </Head> <Body> <H1>Ingreso de Datos de Libros</H1> <Form Name=Libros>

<HTML> <Head> <Title>Un cuadro de texto</Title> </Head> <Body> <H1>Ingreso de Datos de Libros</H1>

<Form Name=Libros>
<Form Name=Libros>

<P>Nombre del Libro: <Input Type=Text Name=NombreLibro

Size=40></P> </Form> </Body>
Size=40></P>
</Form>
</Body>

</HTML>

Cuadro de Texto – Text Box <P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40></P>

Cuadro de Texto Text Box

Cuadro de Texto – Text Box <P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40></P>

<P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40></P>

Cuadro de Texto – Text Box <P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40></P>
Métodos de envío de un Formulario  Son dos métodos de envío soportados por HTTP. 

Métodos de envío de un Formulario

  • Son dos métodos de envío soportados por HTTP.

  • Método POST:

    • Es el más utilizado.

    • Es más seguro.

    • Los datos viajan ocultos una vez que se localiza la URL del action del formulario.

  • Método GET:

    • Es el más utilizado por buscadores.

    • Los datos se agregan a la URL del action del formulario y son visible.

    • Esta limitado en tamaño

  • Submit de un Formulario

    Submit de un Formulario  Para que el formulario sea enviado hacia el servidor o bien
    • Para que el formulario sea enviado hacia el servidor

    o bien ejecute el action, debe ser enviado.

    • El formulario tiene un método de envío que se llama submit. Este puede ser gatillado a través de un tipo

    de botón submit o bien a través de Javascript.

    Procesando Formulario

    Formularios

    Recepción de las variables de formulario

    $_GET[‘variable’]

    $_POST[‘variable’]

    • Estos arrays asociativos contienen las variables transferidas de una página a otra a través de un formulario. Dependiendo del método utilizado (get o post) en el formulario, las variables estarán en uno u otro