SlideShare una empresa de Scribd logo
1 de 10
Descargar para leer sin conexión
FORMULARIOS EN HTML
El elemento <form></form>

•   Engloba siempre a un formulario web

•   Incluye los atributos:

     •   method - Especifica lo que ocurre con los datos
         cuando se completa el formulario.

     •   action - URL del script que va a recibir y procesar los
         datos enviados.
El elemento <input/>

•   Dependiendo del tipo, puede tomar muchas formas y adoptar
    diversas funcionalidades

        1. text
            Formularios

        2. password
        ******

        3. radio

        4. checkbox

        5. submit
             Enviar

        6. reset               Borrar
El elemento <input/>

 <input name="nombre" type="text" maxlength="50"/>

                 Formularios


<input name="pass" type="password" maxlength="15"/>
                 ******


       •   name - propósito del campo.

       •   maxlength - cantidad máxima
           de caracteres en el campo.
El elemento <input/>

<input type="radio" name="gen" value="h" /> Hombre
<input type="radio" name="gen" value="m" /> Mujer
               Hombre
               
               Mujer

<input type="checkbox" name="pref" value="1" /> Twitter
<input type="checkbox" name="pref" value="2" /> Facebook
                   Twitter
                   
                   Facebook
El elemento <input/>

<input name="enviar" type="submit" value="Enviar"/>
                      Enviar



<input name="borrar" type="reset" value="Borrar"/>

                      Borrar
El elemento <textarea></textarea>

    <textarea name="sugerencia"></textarea>

            Comentarios o sugerencias
El elemento <select></select>

<select name="autos">
   <option value="0">Selecciona un auto...</option>
   <option value="1">Volvo</option>
   <option value="2">Smart</option>
   <option value="3">Mini Cooper</option>
   <option value="4">Atos</option>
</select>
               Selecciona un auto...
                Volvo
                Smart
                Mini Cooper
                Atos
El elemento <label></label >

<label for="nombre">Nombre:</label>
<input name="nombre" type="text" maxlength="50"/>

Nombre:
    Carlos Montoya
El elemento <fieldset></fieldset >
<fieldset>
   <legend>Datos personales</legend>
   <label for="nombre">Nombre:</label>
   <input name="nombre" type="text" maxlength="50"/>
   <label for="apellidos">Apellidos:</label>
   <input name="apellidos" type="text" maxlength="50"/>
</fieldset>
             Datos personales
            Nombre:
             Carlos

             Apellidos:
             Montoya

Más contenido relacionado

La actualidad más candente

CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSSandhika Galih
 
Basic HTML
Basic HTMLBasic HTML
Basic HTMLSayan De
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Paradigma Digital
 
Form Handling using PHP
Form Handling using PHPForm Handling using PHP
Form Handling using PHPNisa Soomro
 
CSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-classCSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-classSandhika Galih
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)Clément Wehrung
 
CSS Dasar #6 : Background
CSS Dasar #6 : BackgroundCSS Dasar #6 : Background
CSS Dasar #6 : BackgroundSandhika Galih
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSSAnna Cook (she/her)
 
CSS Dasar #4 : Font Styling
CSS Dasar #4 : Font StylingCSS Dasar #4 : Font Styling
CSS Dasar #4 : Font StylingSandhika Galih
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en htmlDenisse C
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS Dave Kelly
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Aaron Gustafson
 

La actualidad más candente (20)

CSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSSCSS Dasar #3 : Penempatan CSS
CSS Dasar #3 : Penempatan CSS
 
Basic HTML
Basic HTMLBasic HTML
Basic HTML
 
Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3Introducción a HTML5 y CSS3
Introducción a HTML5 y CSS3
 
Form Handling using PHP
Form Handling using PHPForm Handling using PHP
Form Handling using PHP
 
Html forms
Html formsHtml forms
Html forms
 
JavaScript
JavaScriptJavaScript
JavaScript
 
CSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-classCSS Dasar #8 : Pseudo-class
CSS Dasar #8 : Pseudo-class
 
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
ePub 3, HTML 5 & CSS 3 (+ Fixed-Layout)
 
Html forms
Html formsHtml forms
Html forms
 
CSS Basics
CSS BasicsCSS Basics
CSS Basics
 
CSS Dasar #6 : Background
CSS Dasar #6 : BackgroundCSS Dasar #6 : Background
CSS Dasar #6 : Background
 
Build a Website Using HTML + CSS
Build a Website Using HTML + CSSBuild a Website Using HTML + CSS
Build a Website Using HTML + CSS
 
HTML - Form
HTML - FormHTML - Form
HTML - Form
 
CSS Dasar #4 : Font Styling
CSS Dasar #4 : Font StylingCSS Dasar #4 : Font Styling
CSS Dasar #4 : Font Styling
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 
(Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS (Fast) Introduction to HTML & CSS
(Fast) Introduction to HTML & CSS
 
Javascript Basic
Javascript BasicJavascript Basic
Javascript Basic
 
3. Java Script
3. Java Script3. Java Script
3. Java Script
 
Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]Fundamental JavaScript [UTC, March 2014]
Fundamental JavaScript [UTC, March 2014]
 
CSS Lists and Tables
CSS Lists and TablesCSS Lists and Tables
CSS Lists and Tables
 

Similar a Tema 6 - Formularios en html

Similar a Tema 6 - Formularios en html (20)

Html Tema 4 - Formularios
Html Tema 4 - FormulariosHtml Tema 4 - Formularios
Html Tema 4 - Formularios
 
Atributos autofocus-etc
Atributos autofocus-etcAtributos autofocus-etc
Atributos autofocus-etc
 
formularioshtml.pdf
formularioshtml.pdfformularioshtml.pdf
formularioshtml.pdf
 
Servlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTMLServlets que manejan datos de formularios HTML
Servlets que manejan datos de formularios HTML
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 
Nicolas castro sanchez
Nicolas castro sanchezNicolas castro sanchez
Nicolas castro sanchez
 
INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03INTRODUCCIÓN A HTML – XHTML – Clase 03
INTRODUCCIÓN A HTML – XHTML – Clase 03
 
Aprendiendo php 3
Aprendiendo php 3Aprendiendo php 3
Aprendiendo php 3
 
Ejemplo aplicacion web (estructura)
Ejemplo aplicacion web (estructura)Ejemplo aplicacion web (estructura)
Ejemplo aplicacion web (estructura)
 
Tema3[php]
Tema3[php]Tema3[php]
Tema3[php]
 
Clase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño WebClase 1 Plataforma introducción a Diseño Web
Clase 1 Plataforma introducción a Diseño Web
 
Semana 2 Etiquetas semánticas y HTML 5
Semana 2   Etiquetas semánticas y HTML 5Semana 2   Etiquetas semánticas y HTML 5
Semana 2 Etiquetas semánticas y HTML 5
 
Formularios html
Formularios htmlFormularios html
Formularios html
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formularios
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
Guia programacionwebdesarrollositiosweb
Guia programacionwebdesarrollositioswebGuia programacionwebdesarrollositiosweb
Guia programacionwebdesarrollositiosweb
 
Formularios en html
Formularios en htmlFormularios en html
Formularios en html
 
6
66
6
 
1
11
1
 
Guía Formulario
Guía FormularioGuía Formulario
Guía Formulario
 

Más de Pamela Rodriguez

Especificaciones del proyecto parcial
Especificaciones del proyecto parcialEspecificaciones del proyecto parcial
Especificaciones del proyecto parcialPamela Rodriguez
 
Tema 9 - Estructura con css
Tema 9 - Estructura con cssTema 9 - Estructura con css
Tema 9 - Estructura con cssPamela Rodriguez
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssPamela Rodriguez
 
Tema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en webTema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en webPamela Rodriguez
 
Tema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en htmlTema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en htmlPamela Rodriguez
 
Tema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos webTema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos webPamela Rodriguez
 
Tema 1 - Introducción a la materia
Tema 1 - Introducción a la materiaTema 1 - Introducción a la materia
Tema 1 - Introducción a la materiaPamela Rodriguez
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLPamela Rodriguez
 

Más de Pamela Rodriguez (9)

Especificaciones del proyecto parcial
Especificaciones del proyecto parcialEspecificaciones del proyecto parcial
Especificaciones del proyecto parcial
 
Tema 9 - Estructura con css
Tema 9 - Estructura con cssTema 9 - Estructura con css
Tema 9 - Estructura con css
 
Tema 7 - Introducción a html con css
Tema 7 - Introducción a html con cssTema 7 - Introducción a html con css
Tema 7 - Introducción a html con css
 
Tema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en webTema 8 - Uso de la tipografía en web
Tema 8 - Uso de la tipografía en web
 
Tema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en htmlTema 4 - Etiquetas y atributos en html
Tema 4 - Etiquetas y atributos en html
 
Tema 5 - Tablas en html
Tema 5 - Tablas en htmlTema 5 - Tablas en html
Tema 5 - Tablas en html
 
Tema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos webTema 2 - Introducción a los proyectos web
Tema 2 - Introducción a los proyectos web
 
Tema 1 - Introducción a la materia
Tema 1 - Introducción a la materiaTema 1 - Introducción a la materia
Tema 1 - Introducción a la materia
 
Tema 3 - Introducción a HTML
Tema 3 - Introducción a HTMLTema 3 - Introducción a HTML
Tema 3 - Introducción a HTML
 

Tema 6 - Formularios en html

  • 2. El elemento <form></form> • Engloba siempre a un formulario web • Incluye los atributos: • method - Especifica lo que ocurre con los datos cuando se completa el formulario. • action - URL del script que va a recibir y procesar los datos enviados.
  • 3. El elemento <input/> • Dependiendo del tipo, puede tomar muchas formas y adoptar diversas funcionalidades 1. text Formularios 2. password ****** 3. radio 4. checkbox 5. submit Enviar 6. reset Borrar
  • 4. El elemento <input/> <input name="nombre" type="text" maxlength="50"/> Formularios <input name="pass" type="password" maxlength="15"/> ****** • name - propósito del campo. • maxlength - cantidad máxima de caracteres en el campo.
  • 5. El elemento <input/> <input type="radio" name="gen" value="h" /> Hombre <input type="radio" name="gen" value="m" /> Mujer Hombre Mujer <input type="checkbox" name="pref" value="1" /> Twitter <input type="checkbox" name="pref" value="2" /> Facebook Twitter Facebook
  • 6. El elemento <input/> <input name="enviar" type="submit" value="Enviar"/> Enviar <input name="borrar" type="reset" value="Borrar"/> Borrar
  • 7. El elemento <textarea></textarea> <textarea name="sugerencia"></textarea> Comentarios o sugerencias
  • 8. El elemento <select></select> <select name="autos"> <option value="0">Selecciona un auto...</option> <option value="1">Volvo</option> <option value="2">Smart</option> <option value="3">Mini Cooper</option> <option value="4">Atos</option> </select> Selecciona un auto... Volvo Smart Mini Cooper Atos
  • 9. El elemento <label></label > <label for="nombre">Nombre:</label> <input name="nombre" type="text" maxlength="50"/> Nombre: Carlos Montoya
  • 10. El elemento <fieldset></fieldset > <fieldset> <legend>Datos personales</legend> <label for="nombre">Nombre:</label> <input name="nombre" type="text" maxlength="50"/> <label for="apellidos">Apellidos:</label> <input name="apellidos" type="text" maxlength="50"/> </fieldset> Datos personales Nombre: Carlos Apellidos: Montoya