Formularios HTML




Copyright 2008 by Leonel Morales Díaz – Ingeniería Simple.
                  Derechos reservados                        Disponible en: http://www.ingenieriasimple.com/introprogra
Diálogo HTML
Formularios

<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>
                                               ej019.html
Formularios

<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>
Cuadro de Texto – Text Box

<P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40></P>
Area de Texto - TextArea

<Form Name=Libros>
<P>Nombre del Libro: <Input Type=Text Name=NombreLibro
   Size=40><BR>
Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un
   pequeño resumen del libro, puede ser la descripción de la
   contraportada.</Textarea>
</P>
</Form>




                                               ej020.html
Area de Texto - TextArea

<Form Name=Libros>
<P>Nombre del Libro: <Input Type=Text Name=NombreLibro
   Size=40><BR>
Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un
   pequeño resumen del libro, puede ser la descripción de la
   contraportada.</Textarea><BR>
Descriptores: <Textarea Rows=2 Cols=40
   Name=Descriptores></Textarea>
</P>
</Form>


                                                 ej021.html
Palabra Clave - Password

<Form Name=Libros>
<P>Nombre del Libro: <Input Type=Text Name=NombreLibro
   Size=40><BR>
Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un
   pequeño resumen del libro, puede ser la descripción de la
   contraportada.</Textarea><BR>
Descriptores: <Textarea Rows=2 Cols=40
   Name=Descriptores></Textarea><BR>
Su Contraseña: <Input Type=Password Name=Contrasena
   Size=10>
</P>
</Form>

                                                 ej022.html
Valores Iniciales

<Form Name=Libros>
<P>Nombre del Libro: <Input Type=Text Name=NombreLibro
   Size=40 Value=“Leyendas de Guatemala”><BR>
Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un
   pequeño resumen del libro, puede ser la descripción de la
   contraportada.</Textarea><BR>
Descriptores: <Textarea Rows=2 Cols=40
   Name=Descriptores></Textarea><BR>
Su Contraseña: <Input Type=Password Name=Contrasena Size=10
   Value=“nada”>
</P>
</Form>

                                               ej023.html
Valores Iniciales

<Form Name=Libros>
<P>Nombre del Libro: <Input Type=Text Name=NombreLibro
   Size=40 Value=“Leyendas de Guatemala”><BR>
Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un
   pequeño resumen del libro, puede ser la descripción de la
   contraportada.</Textarea><BR>
Descriptores: <Textarea Rows=2 Cols=40
   Name=Descriptores></Textarea><BR>
Su Contraseña: <Input Type=Password Name=Contrasena Size=10
   Value=“nada”>
</P>                      “hardcode a password”, incluír una
</Form>                          contraseña en código.
                                 Mala Práctica
Checkboxes

<Form Name=Libros>
<P>...
<Input Type=CheckBox Checked=1>Habilitado
</P>
</Form>




                                     ej024.html
Botones de Radio

<Form Name=Libros>
<P>...
<Input Type=CheckBox Name=Habilitado
   Checked=1>Habilitado<BR>
Tipo de Pasta:
<Input Type=Radio Name=Pasta Checked=1>Suave
<Input Type=Radio Name=Pasta>Dura
<Input Type=Radio Name=Pasta>Empastado
</P>
</Form>

                                           ej025.html
Botones de Radio

<Form Name=Libros>
<P>...
<Input Type=CheckBox Name=Habilitado Checked=1>Habilitado<BR>
Tipo de Pasta:
<Input Type=Radio Name=Pasta Checked=1>Suave
<Input Type=Radio Name=Pasta>Dura
<Input Type=Radio Name=Pasta>Empastado<BR>
Procedencia:
<Input Type=Radio Name=Procedencia>Donación
<Input Type=Radio Name=Procedencia Checked=1>Remesa
<Input Type=Radio Name=Procedencia>Préstamo
</P>
</Form>
                                                   ej026.html
Botones de Acción

<Form Name=Libros>
<P>...
<Input Type=Button Name=Guardar Value=Guardar>
<Input Type=Button Name=Salir Value=Salir>
</P>
</Form>




                                            ej027.html
Otros Botones de Acción

<Form Name=Libros>
<P>...
<Input Type=Button Name=Guardar Value=Guardar>
<Input Type=Button Name=Salir Value=Salir><BR>
<Input Type=Submit Name=GuardaSale Value=“Guardar y Salir”>
<Input Type=Reset Name=Cancelar Value=“Cancelar”>
</P>
</Form>




                                               ej028.html
Otros Botones de Acción

<Form Name=Libros>
<P>...
<Button AccessKey=y Type=Button>Guardar <U>y</U>
   Nuevo</Button>
</P>
</Form>




                                           ej029.html
Otros Inputs

 Hidden – escondido
<Input Type=Hidden Name=Usuario Value=“r méndez”>



 File – archivo
<Input Type=File Name=Portada Size=30>




                                              ej030.html
Tablas y Formularios




                  ej031.html

Furmularios

  • 1.
    Formularios HTML Copyright 2008by Leonel Morales Díaz – Ingeniería Simple. Derechos reservados Disponible en: http://www.ingenieriasimple.com/introprogra
  • 2.
  • 3.
    Formularios <HTML> <Head> <Title>Un cuadro detexto</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> ej019.html
  • 4.
    Formularios <HTML> <Head> <Title>Un cuadro detexto</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>
  • 5.
    Cuadro de Texto– Text Box <P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40></P>
  • 6.
    Area de Texto- TextArea <Form Name=Libros> <P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40><BR> Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un pequeño resumen del libro, puede ser la descripción de la contraportada.</Textarea> </P> </Form> ej020.html
  • 7.
    Area de Texto- TextArea <Form Name=Libros> <P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40><BR> Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un pequeño resumen del libro, puede ser la descripción de la contraportada.</Textarea><BR> Descriptores: <Textarea Rows=2 Cols=40 Name=Descriptores></Textarea> </P> </Form> ej021.html
  • 8.
    Palabra Clave -Password <Form Name=Libros> <P>Nombre del Libro: <Input Type=Text Name=NombreLibro Size=40><BR> Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un pequeño resumen del libro, puede ser la descripción de la contraportada.</Textarea><BR> Descriptores: <Textarea Rows=2 Cols=40 Name=Descriptores></Textarea><BR> Su Contraseña: <Input Type=Password Name=Contrasena Size=10> </P> </Form> ej022.html
  • 9.
    Valores Iniciales <Form Name=Libros> <P>Nombredel Libro: <Input Type=Text Name=NombreLibro Size=40 Value=“Leyendas de Guatemala”><BR> Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un pequeño resumen del libro, puede ser la descripción de la contraportada.</Textarea><BR> Descriptores: <Textarea Rows=2 Cols=40 Name=Descriptores></Textarea><BR> Su Contraseña: <Input Type=Password Name=Contrasena Size=10 Value=“nada”> </P> </Form> ej023.html
  • 10.
    Valores Iniciales <Form Name=Libros> <P>Nombredel Libro: <Input Type=Text Name=NombreLibro Size=40 Value=“Leyendas de Guatemala”><BR> Abstract: <Textarea Rows=5 Cols=40 Name=Abstract>Ingrese un pequeño resumen del libro, puede ser la descripción de la contraportada.</Textarea><BR> Descriptores: <Textarea Rows=2 Cols=40 Name=Descriptores></Textarea><BR> Su Contraseña: <Input Type=Password Name=Contrasena Size=10 Value=“nada”> </P> “hardcode a password”, incluír una </Form> contraseña en código. Mala Práctica
  • 11.
    Checkboxes <Form Name=Libros> <P>... <Input Type=CheckBoxChecked=1>Habilitado </P> </Form> ej024.html
  • 12.
    Botones de Radio <FormName=Libros> <P>... <Input Type=CheckBox Name=Habilitado Checked=1>Habilitado<BR> Tipo de Pasta: <Input Type=Radio Name=Pasta Checked=1>Suave <Input Type=Radio Name=Pasta>Dura <Input Type=Radio Name=Pasta>Empastado </P> </Form> ej025.html
  • 13.
    Botones de Radio <FormName=Libros> <P>... <Input Type=CheckBox Name=Habilitado Checked=1>Habilitado<BR> Tipo de Pasta: <Input Type=Radio Name=Pasta Checked=1>Suave <Input Type=Radio Name=Pasta>Dura <Input Type=Radio Name=Pasta>Empastado<BR> Procedencia: <Input Type=Radio Name=Procedencia>Donación <Input Type=Radio Name=Procedencia Checked=1>Remesa <Input Type=Radio Name=Procedencia>Préstamo </P> </Form> ej026.html
  • 14.
    Botones de Acción <FormName=Libros> <P>... <Input Type=Button Name=Guardar Value=Guardar> <Input Type=Button Name=Salir Value=Salir> </P> </Form> ej027.html
  • 15.
    Otros Botones deAcción <Form Name=Libros> <P>... <Input Type=Button Name=Guardar Value=Guardar> <Input Type=Button Name=Salir Value=Salir><BR> <Input Type=Submit Name=GuardaSale Value=“Guardar y Salir”> <Input Type=Reset Name=Cancelar Value=“Cancelar”> </P> </Form> ej028.html
  • 16.
    Otros Botones deAcción <Form Name=Libros> <P>... <Button AccessKey=y Type=Button>Guardar <U>y</U> Nuevo</Button> </P> </Form> ej029.html
  • 17.
    Otros Inputs  Hidden– escondido <Input Type=Hidden Name=Usuario Value=“r méndez”>  File – archivo <Input Type=File Name=Portada Size=30> ej030.html
  • 18.