SlideShare una empresa de Scribd logo
1 de 15
Descargar para leer sin conexión
Introducción a
Formularios con
    HTML
<DIV> … </DIV>
Se trata de un
contenedor que incluye
texto, imágenes, tablas,   <div align=”center” >
etc. Lo que se encuentre   Esto es una contenedor
entre las etiquetas        <br />
<DIV> y </DIV> se          <img src=”logo.png” />
considera una capa que     </div
puede colocarse en
cualquier parte de un
documento HTML.
<FORM> </FORM>
●   Indica al navegador      <form method="post"
    que empieza un           action="mailto:webmaster@i
    formulario.              gnside.net">
                             ............................
●   Especifica valores del   ............................
    formulario (nombre,       </form>
    método de envío get
    o post y acción)
<INPUT>
●   Permite al usuario
    introducir datos.     <input type="text"
                             name="remitente"
●   Podemos especificar      value="alberto"
    el tipo de entrada,      size="35"
                             maxlength="10" >
    nombre, valores,
    tamaño...
●   Hay diferentes
    valores para type
type = “text”
●   Especifica una caja
    de texto.              <input type="text"
●   Password es otro          name="remitente"
                              value=“escribe aquí"
    valor de type, en la      size="35"
    que no se ve lo que       maxlength="10" >
    se escribe.
type = “hidden”

●   Campo invisible para
    el usuario, pero con    <input type=“hidden"
                               name="remitente"
    información útil para      value=“alberto" >
    el programador.
type = “checkbox”

●   Las casillas de
    verificación envian    <input type=“checkbox"
                              name="moto" value="Si">
    su valor solo si son      Moto
    seleccionadas          <input type=“checkbox"
●   Son casillas de           name="coche" value="Si">
                              coche
    selección múltiple.
type = “radio”
●   Elegirá una única
                             <input type=“radio"
    opción entre varias.        name="tipoSexo"
●   El valor de name de         value="H">Hombre
    los distintos radio de   <input type=“radio"
                                name="tipoSexo"
    la misma familia será       value=“M">Mujer
    el mismo.
type = “submit”
●   Genera un botón que
    al ser pulsado           <input type="submit"
    ejecutará la acción         value="Enviar
                                consulta">
    indicada en <form>.
●   El texto que aparece
    en el botón es el
    especificado en value.
NO BORRA
                type = “reset”

●   Al ser pulsado           <input type=“reset"

    reinicializa el            value=“Borrar">

    contenido del
    formulario
●   El texto que aparece
    en el botón es el
    especificado en value.
<select> ..... </select>

●   Ofrecerá una lista con   <SELECT NAME="Colores"
                                MULTIPLE>
    los valores que puede
                             ..................
    elegir el usuario.
                             </SELECT>
●   Como atributos
    tenemos name, size o
    multiple.
<option>
●   Con esta etiqueta    <option value="r"> Rojo
    definimos las          </option> <option
                           value="v" selected>
    distintas opciones     Verde </option>
    elegibles por el
    usuario.
<Textarea>.... </Textarea>

●   Definimos un espacio con
    múltiples líneas donde el      <textarea cols=20 rows=10
    usuario podrá añadir un           name=“texto” >
    comentario.                       </textarea>
●   podemos darle un nombre y
    definir su tamaño con cols y
    rows.
EJEMPLO 1
EJERCICIO PARA ENTREGAR
                      Formulario de Contacto
Crear un formulario en HTML que corresponda a un formulario de
Contacto de una pagina web.

Debe incluir: Nombre, email, teléfono, sección de interés de la
Pagina web y comentario.

Debe agregarle 2 campos mas con información que Ud considere
Necesaria, utilizando los demás elementos de formularios.

Al pulsar el botón “Enviar”, mostrar una pagina con un mensaje de
Confirmación de envío del mensaje.

Puede incluir todos los elementos que desee incorporar (imágenes, links,
etc).

Más contenido relacionado

La actualidad más candente

Clase 3 Modelo Entidad Relacion
Clase 3   Modelo Entidad   RelacionClase 3   Modelo Entidad   Relacion
Clase 3 Modelo Entidad Relacion
oswchavez
 
Ejercicio sql tienda informatica (1)
Ejercicio sql tienda informatica (1)Ejercicio sql tienda informatica (1)
Ejercicio sql tienda informatica (1)
Jsrfs Montemayor
 
Formulario HTML-PHP dirigido a una Base de datos
Formulario HTML-PHP dirigido a una Base de datosFormulario HTML-PHP dirigido a una Base de datos
Formulario HTML-PHP dirigido a una Base de datos
Cursando Desarrollo Web
 
Ordenamiento con árbol binario
Ordenamiento con árbol binarioOrdenamiento con árbol binario
Ordenamiento con árbol binario
edwinosuna
 

La actualidad más candente (20)

Unidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UML
Unidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UMLUnidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UML
Unidad 4 a HERENCIA, CLASES ABSTRACTAS, INTERFACES Y POLIMORFISMO . UML
 
jQuery Ajax
jQuery AjaxjQuery Ajax
jQuery Ajax
 
Tipos de consultas de access
Tipos de consultas de accessTipos de consultas de access
Tipos de consultas de access
 
Comandos ddl
Comandos ddlComandos ddl
Comandos ddl
 
5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formularios5. Interacción con el usuario: eventos y formularios
5. Interacción con el usuario: eventos y formularios
 
Working with arrays in php
Working with arrays in phpWorking with arrays in php
Working with arrays in php
 
Clase 3 Modelo Entidad Relacion
Clase 3   Modelo Entidad   RelacionClase 3   Modelo Entidad   Relacion
Clase 3 Modelo Entidad Relacion
 
Ejercicio sql tienda informatica (1)
Ejercicio sql tienda informatica (1)Ejercicio sql tienda informatica (1)
Ejercicio sql tienda informatica (1)
 
2. Manejo de la sintaxis del lenguaje
2. Manejo de la sintaxis del lenguaje2. Manejo de la sintaxis del lenguaje
2. Manejo de la sintaxis del lenguaje
 
Form Handling using PHP
Form Handling using PHPForm Handling using PHP
Form Handling using PHP
 
Introducción a php
Introducción a phpIntroducción a php
Introducción a php
 
Bootstrap 5 ppt
Bootstrap 5 pptBootstrap 5 ppt
Bootstrap 5 ppt
 
Html introduction
Html introductionHtml introduction
Html introduction
 
Html form tag
Html form tagHtml form tag
Html form tag
 
Formulario HTML-PHP dirigido a una Base de datos
Formulario HTML-PHP dirigido a una Base de datosFormulario HTML-PHP dirigido a una Base de datos
Formulario HTML-PHP dirigido a una Base de datos
 
Diagramas uml
Diagramas umlDiagramas uml
Diagramas uml
 
Polimorfismo y herencia
Polimorfismo y herenciaPolimorfismo y herencia
Polimorfismo y herencia
 
Ruby on Rails Presentation
Ruby on Rails PresentationRuby on Rails Presentation
Ruby on Rails Presentation
 
JavaScript: Events Handling
JavaScript: Events HandlingJavaScript: Events Handling
JavaScript: Events Handling
 
Ordenamiento con árbol binario
Ordenamiento con árbol binarioOrdenamiento con árbol binario
Ordenamiento con árbol binario
 

Similar a Formularios html

Formularios html
Formularios htmlFormularios html
Formularios html
Erick Cruz
 
Formularios (Photoshop)
Formularios (Photoshop)Formularios (Photoshop)
Formularios (Photoshop)
Cat Lunac
 
Aprendiendo php 3
Aprendiendo php 3Aprendiendo php 3
Aprendiendo php 3
Erick Trejo
 
Frames y formularios en html
Frames y formularios en htmlFrames y formularios en html
Frames y formularios en html
bhylenia
 
Codigos programables
Codigos programablesCodigos programables
Codigos programables
mencr
 

Similar a Formularios html (20)

Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 
1
11
1
 
Formularios html
Formularios htmlFormularios html
Formularios html
 
Parámetros
ParámetrosParámetros
Parámetros
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 
ETIQUETAS
ETIQUETASETIQUETAS
ETIQUETAS
 
Formularios (Photoshop)
Formularios (Photoshop)Formularios (Photoshop)
Formularios (Photoshop)
 
Perez y sus cartas
Perez y sus cartasPerez y sus cartas
Perez y sus cartas
 
Frames-Formularios
Frames-FormulariosFrames-Formularios
Frames-Formularios
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 
Trabajo2015
Trabajo2015Trabajo2015
Trabajo2015
 
JAVA SERVER FACES - LECCION 04 - VALIDADORES Y CONVERTIDORES
JAVA SERVER FACES - LECCION 04 - VALIDADORES Y CONVERTIDORESJAVA SERVER FACES - LECCION 04 - VALIDADORES Y CONVERTIDORES
JAVA SERVER FACES - LECCION 04 - VALIDADORES Y CONVERTIDORES
 
formularioshtml.pdf
formularioshtml.pdfformularioshtml.pdf
formularioshtml.pdf
 
Aprendiendo php 3
Aprendiendo php 3Aprendiendo php 3
Aprendiendo php 3
 
Frames y formularios en html
Frames y formularios en htmlFrames y formularios en html
Frames y formularios en html
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 
Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4Curso HTML 5 & jQuery - Leccion 4
Curso HTML 5 & jQuery - Leccion 4
 
Codigos programables
Codigos programablesCodigos programables
Codigos programables
 
Formularios
FormulariosFormularios
Formularios
 

Más de Nury Farelo V

Introduccion al software libre
Introduccion al software libreIntroduccion al software libre
Introduccion al software libre
Nury Farelo V
 
Maquinas Virtuales SFD 2010
Maquinas Virtuales SFD 2010Maquinas Virtuales SFD 2010
Maquinas Virtuales SFD 2010
Nury Farelo V
 
Software libre-desarrollo-en-comunidad
Software libre-desarrollo-en-comunidadSoftware libre-desarrollo-en-comunidad
Software libre-desarrollo-en-comunidad
Nury Farelo V
 
Aspectos legales-software-libre-flisol-2010
Aspectos legales-software-libre-flisol-2010Aspectos legales-software-libre-flisol-2010
Aspectos legales-software-libre-flisol-2010
Nury Farelo V
 

Más de Nury Farelo V (8)

Introduccion html
Introduccion htmlIntroduccion html
Introduccion html
 
Conceptos internet
Conceptos internetConceptos internet
Conceptos internet
 
Conceptos internet
Conceptos internetConceptos internet
Conceptos internet
 
Sweb
SwebSweb
Sweb
 
Introduccion al software libre
Introduccion al software libreIntroduccion al software libre
Introduccion al software libre
 
Maquinas Virtuales SFD 2010
Maquinas Virtuales SFD 2010Maquinas Virtuales SFD 2010
Maquinas Virtuales SFD 2010
 
Software libre-desarrollo-en-comunidad
Software libre-desarrollo-en-comunidadSoftware libre-desarrollo-en-comunidad
Software libre-desarrollo-en-comunidad
 
Aspectos legales-software-libre-flisol-2010
Aspectos legales-software-libre-flisol-2010Aspectos legales-software-libre-flisol-2010
Aspectos legales-software-libre-flisol-2010
 

Formularios html

  • 2. <DIV> … </DIV> Se trata de un contenedor que incluye texto, imágenes, tablas, <div align=”center” > etc. Lo que se encuentre Esto es una contenedor entre las etiquetas <br /> <DIV> y </DIV> se <img src=”logo.png” /> considera una capa que </div puede colocarse en cualquier parte de un documento HTML.
  • 3. <FORM> </FORM> ● Indica al navegador <form method="post" que empieza un action="mailto:webmaster@i formulario. gnside.net"> ............................ ● Especifica valores del ............................ formulario (nombre, </form> método de envío get o post y acción)
  • 4. <INPUT> ● Permite al usuario introducir datos. <input type="text" name="remitente" ● Podemos especificar value="alberto" el tipo de entrada, size="35" maxlength="10" > nombre, valores, tamaño... ● Hay diferentes valores para type
  • 5. type = “text” ● Especifica una caja de texto. <input type="text" ● Password es otro name="remitente" value=“escribe aquí" valor de type, en la size="35" que no se ve lo que maxlength="10" > se escribe.
  • 6. type = “hidden” ● Campo invisible para el usuario, pero con <input type=“hidden" name="remitente" información útil para value=“alberto" > el programador.
  • 7. type = “checkbox” ● Las casillas de verificación envian <input type=“checkbox" name="moto" value="Si"> su valor solo si son Moto seleccionadas <input type=“checkbox" ● Son casillas de name="coche" value="Si"> coche selección múltiple.
  • 8. type = “radio” ● Elegirá una única <input type=“radio" opción entre varias. name="tipoSexo" ● El valor de name de value="H">Hombre los distintos radio de <input type=“radio" name="tipoSexo" la misma familia será value=“M">Mujer el mismo.
  • 9. type = “submit” ● Genera un botón que al ser pulsado <input type="submit" ejecutará la acción value="Enviar consulta"> indicada en <form>. ● El texto que aparece en el botón es el especificado en value.
  • 10. NO BORRA type = “reset” ● Al ser pulsado <input type=“reset" reinicializa el value=“Borrar"> contenido del formulario ● El texto que aparece en el botón es el especificado en value.
  • 11. <select> ..... </select> ● Ofrecerá una lista con <SELECT NAME="Colores" MULTIPLE> los valores que puede .................. elegir el usuario. </SELECT> ● Como atributos tenemos name, size o multiple.
  • 12. <option> ● Con esta etiqueta <option value="r"> Rojo definimos las </option> <option value="v" selected> distintas opciones Verde </option> elegibles por el usuario.
  • 13. <Textarea>.... </Textarea> ● Definimos un espacio con múltiples líneas donde el <textarea cols=20 rows=10 usuario podrá añadir un name=“texto” > comentario. </textarea> ● podemos darle un nombre y definir su tamaño con cols y rows.
  • 15. EJERCICIO PARA ENTREGAR Formulario de Contacto Crear un formulario en HTML que corresponda a un formulario de Contacto de una pagina web. Debe incluir: Nombre, email, teléfono, sección de interés de la Pagina web y comentario. Debe agregarle 2 campos mas con información que Ud considere Necesaria, utilizando los demás elementos de formularios. Al pulsar el botón “Enviar”, mostrar una pagina con un mensaje de Confirmación de envío del mensaje. Puede incluir todos los elementos que desee incorporar (imágenes, links, etc).