O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Clase05

873 visualizações

Publicada em

Revisión del código HTML que se utiliza para crear formularios o diálogos, control por control. También se muestra cómo se organiza visualmente un formulario utilizando tablas.

Publicada em: Educação
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Clase05

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

×