SlideShare una empresa de Scribd logo
1 de 39
Descargar para leer sin conexión
Hyper Text Markup Language
Tema 4: Formularios
© Abril, 2015
Prof. Renny Batista
Los formularios en HTML
 Los formularios en HTML se utilizan para recolectar
información del usuario.
 El elemento <form> define un formulario en HTML.
 Los elementos de un formulario son de diferentes tipos:
cajas de texto, casillas de verificación, botones de
opción, botones de envío, y más..
<form>
.
form elements
.
</form>
Abril, 2015 2
Los formularios: atributo action
 El atributo action define la acción que se realiza cuando
se envía el formulario.
 La forma más común enviar los datos de un formulario a
un servidor, es mediante el uso de un botón de envío
(submit).
 Normalmente, el formulario se envía los datos a una
página web en un servidor web.
 En este el ejemplo, se especifica un script del lado del
servidor para manejar el formulario enviado:
<form action="action_page.php">
 Si se omite el atributo de acción, la acción se establece
en la página actual.
Abril, 2015 3
Los formularios: atributo method
 El atributo method especifica el método HTTP (GET o
POST) para ser utilizado al presentar los formularios:
<form action="action_page.php" method="GET">
<form action="action_page.php" method="POST">
Abril, 2015 4
Los formularios: ¿Cuándo utilizar GET?
 Puede usar GET (el método por defecto):
– Si el envío del formulario es pasivo (como una consulta
al motor de búsqueda), y sin información sensible.
– Al utilizar GET, los datos del formulario serán visibles en
la dirección de la página:
action_page.php?firstname=Mickey&lastname=Mouse
– GET es el más adecuado para cortos períodos de
datos. Las limitaciones de tamaño son establecidas
por el navegador en uso.
Abril, 2015 5
Los formularios: ¿Cuándo utilizar POST?
 Debe utilizar POST:
– Si la formulario es de actualización de los datos, o
incluye información confidencial (contraseñas).
– Post ofrece una mayor seguridad ya que los datos
presentados no está visible en la dirección de la
página.
Abril, 2015 6
Los formularios: otros atributos
 Un <form> con todos sus atributos posibles, se verá así :
<form action="action_page.php" method="GET"
target="_blank" accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
form elements
.
</form>
Abril, 2015 7
Los formularios: otros atributos
Abril, 2015 8
Atributo Descripción
accept-charset Especifica el charset utilizado en el formulario enviado
(por defecto: el charset de la pagina).
action Especifica una dirección(url) a la cual se envían los datos
autocomplete Especifica si el navegador debe autocompletar el
formulario (por defecto: on).
enctype Especifica la codificación de los datos presentados (por
defecto es url-encoded).
method Especifica el método HTTP utilizado para el envío de los
datos (por defecto: GET).
name Especifica un nombre para identificar el formulario (El uso
en DOM : document.forms.name).
novalidate Especifica que el navegador no debe validar el formulario
target Específica el destino de la dirección en el atributo de
acción (por defecto: _self).
Los formularios: Input Types
 <input type="text"> define un campo de entrada de una
línea para la entrada de texto::
<form>
Nombres:<br>
<input type="text" name="nombre">
<br>
Apellidos:<br>
<input type="text" name="apellido">
</form>
Abril, 2015 9
Los formularios: Input Types
 <input type="password"> define un campo de contraseña:
<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>
Abril, 2015 10
Los formularios: Input Types
 <input type="submit"> define un botón para la presentación
del formulario de entrada para un form-handler.
 El form-handler es típicamente una página del servidor con
una secuencia de comandos para el procesamiento de los
datos de entrada.
 El form-handler se especifica en el atributo action del
formulario:
<form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>
Abril, 2015 11
Los formularios: Input Types
 <input type="radio"> define un botón de radio.
 Los botones de opción permiten al usuario seleccionar sólo
una de un número limitado de opciones:
<form>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</form>
Abril, 2015 12
Los formularios: Input Types
 <input type="checkbox"> define una casilla de verificación.
 Las casillas de verificación permite que un usuario
seleccione cero o más opciones de un número limitado de
opciones..
<form>
<input type="checkbox" name="vehicle" value="Bike">I have
a bike
<br>
<input type="checkbox" name="vehicle" value="Car">I have a
car
</form>
Abril, 2015 13
Los formularios: Input Types
 <input type="button"> define un botón:
<input type="button" onclick="alert('Hello
World!')" value="Click Me!">
Abril, 2015 14
Los formularios: Elemento <select>
 El elemento <select> define una lista desplegable.
 Los elementos <option> definen las opciones de la lista para
seleccionar.
 La lista mostrará normalmente el primer elemento como
seleccionado.
 Usted puede agregar un atributo selected para establecer
una opción predefinida.
<select name=“carros">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
Abril, 2015 15
Los formularios: Elemento <select>
 El <optgroup> se utiliza para opciones relacionadas con el
grupo en una lista desplegable.
 Si usted tiene una larga lista de opciones, un grupo de
opciones relacionadas son más fáciles de manipular para
un usuario.
<select>
<optgroup label="Carros Suecos">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="Carros Alemanes">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
Abril, 2015 16
Los formularios: Elemento < textarea >
 El elemento <textarea> define un campo de entrada
multilínea (un área de texto):
<textarea name="message" rows="10" cols="30">
San Felipe en un hermoso estado ubicado en el centro
occidente de Venezuela
</textarea>
Abril, 2015 17
Los formularios: Elemento <fieldset>
 La etiqueta <fieldset> se utiliza para agrupar elementos
relacionados en un formulario.
 La etiqueta <fieldset> dibuja un cuadro alrededor de los
elementos relacionados
 La etiqueta <legend> define un título para el elemento
<fieldset>.
<form>
<fieldset>
<legend>Datos personales:</legend>
Nombre: <input type="text"><br>
Email: <input type="text"><br>
Fecha de Nacimiento: <input type="text">
</fieldset>
</form>
Abril, 2015 18
Los formularios: Atributos
 El atributo value especifica el valor inicial de un campo de
entrada:
<form action="">
Nombre:<br>
<input type="text" name="firstname" value="Tony">
<br>
Apellido:<br>
<input type="text" name="lastname" value="Stark">
</form>
Abril, 2015 19
Los formularios: Atributos
 El atributo readonly especifica que el campo de entrada es
de sólo lectura (no se puede cambiar):
 El atributo readonly no necesita un valor. Es lo mismo que
escribir readonly = "readonly".
<form action="">
Nombre:<br>
<input type="text" name="firstname" value="Tony"
readonly>
<br>
Apellido:<br>
<input type="text" name="lastname" value="Stark">
</form>
Abril, 2015 20
Los formularios: Atributos
 El atributo disabled especifica que el campo de entrada está
desactivado.
 En un elemento con atributo disabled no surten efectos los
cambios y tampoco hacer clic.
 Los datos de un elemento con atributo disabled no pueden ser
enviados.
 La etiqueta atributo disabled no necesita un valor. Es lo mismo
que escribir disabled = "disabled".
<form action="">
Nombre:<br>
<input type="text" name="firstname" value="Tony"
disabled>
<br>
Apellido:<br>
<input type="text" name="lastname" value="Stark">
</form>
Abril, 2015 21
Los formularios: Atributos
 El atributo size especifica el tamaño (en caracteres) para el
campo de entrada:
<form action="">
Nombre:<br>
<input type="text" name="firstname" value="Tony"
size="40">
<br>
Apellido:<br>
<input type="text" name="lastname" value="Stark">
</form>
Abril, 2015 22
Los formularios: Atributos
 El atributo maxlength especifica la longitud máxima
permitida para el campo de entrada
 Con un atributo maxlength, el control de entrada no
aceptará más que el número de caracteres permitidos.
 El atributo no proporciona ninguna retroalimentación. Si
desea alertar al usuario, debe escribir código JavaScript.
<form action="">
Nombre:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Apellido:<br>
<input type="text" name="lastname">
</form>
Abril, 2015 23
Los formularios: input types en
 La etiqueta <input type = "number"> se utiliza para campos
de entrada que deben contener un valor numérico.
 Se puede establecer restricciones sobre los números.
 Dependiendo de la compatibilidad del navegador, se
pueden aplicar restricciones al campo de entrada.
<form>
Cantidad (entre 1 y 5):
<input type="number" name="cantidad" min="1" max="5">
</form>
Abril, 2015 24
Los formularios: input types en
Abril, 2015 25
Atributo Descripción
disabled Especifica que un campo de entrada está desactivado
max Especifica el máximo valor para un campo de entrada
maxlength Especifica el numero máximo de caracteres permitidos
min Especifica el mínimo valor para un campo de entrada
pattern Especifica una expresión regular para comprobar el valor de
entrada
readonly Especifica que un campo es de sólo lectura
required Especifica que un campo de entrada es requerido (obligatorio)
size Especifica el ancho en caracteres de un campo de entrada
step Especifica el numero de intervalos para un campo de entrada
value Especifica el valor por defecto del campo de entrada
Los formularios: input types en
Abril, 2015 26
 El <input type=“date"> se utiliza para campos de entrada
que deben contener una fecha.
 Dependiendo de la compatibilidad del navegador, un
selector de fechas puede aparecer en el campo de
entrada.
<form>
Fecha:
<input type="date" name="bday">
</form>
Los formularios: input types en
Abril, 2015 27
 Se puede establecer restricciones a la entrada de una
fecha:
<form>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
</form>
Los formularios: input types en
Abril, 2015 28
 El <input type="color"> se utiliza para campos de entrada
que deben contener un color.
<form>
Select your favorite color:
<input type="color" name="favcolor">
</form>
Los formularios: input types en
Abril, 2015 29
 El <input type = “range"> se utiliza para campos de entrada
que deben contener un valor dentro de un rango.
<form>
<input type="range" name="points" min="0" max="10">
</form>
Los formularios: input types en
Abril, 2015 30
 El <input type = “month"> permite al usuario seleccionar un
mes y el año.
<form>
Birthday (month and year):
<input type="month" name="bdaymonth">
</form>
Los formularios: input types en
Abril, 2015 31
 El <input type = “week"> permite al usuario seleccionar una
semana y año.
<form>
Select a week:
<input type="week" name="week_year">
</form>
Los formularios: input types en
Abril, 2015 32
 El <input type = "email"> se utiliza para campos de entrada
que deben contener una dirección de correo electrónico.
<form>
E-mail:
<input type="email" name="email">
</form>
Los formularios: input types en
Abril, 2015 33
 El <input type = "email"> se utiliza para campos de entrada
que deben contener una dirección de correo electrónico.
 Dependiendo de la compatibilidad del navegador, la
dirección de correo electrónico se puede validar de forma
automática cuando se presente.
 Algunos teléfonos inteligentes reconocen el tipo de correo
electrónico, y agrega ".com" al teclado para que coincida
con la entrada de correo electrónico.
<form>
E-mail:
<input type="email" name="email">
</form>
Los formularios: input types en
Abril, 2015 34
 El <input type="buscar"> se utiliza para campos de
búsqueda (un campo de búsqueda se comporta como un
campo de texto normal).
<form>
Search Google:
<input type="search" name="googlesearch">
</form>
Los formularios: input types en
Abril, 2015 35
 El <input type = "url"> se utiliza para campos de entrada
que deben contener una dirección URL.
 Dependiendo de la compatibilidad del navegador, el
campo URL se puede validar de forma automática cuando
se presente
 Algunos teléfonos inteligentes reconocen el tipo de url, y
añade ".com" al teclado para que coincida con la entrada
url.
<form>
Add your homepage:
<input type="url" name="homepage">
</form>
Los formularios: elementos en
Abril, 2015 36
 El <datalist> especifica una lista de opciones predefinidas
para un elemento <input>. Los usuarios verán una lista
desplegable de opciones predefinidas.
 El atributo de lista del elemento <input>, debe hacer
referencia al atributo id del elemento <datalist>.
<form action="action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Los formularios: elementos en
Abril, 2015 37
 El propósito del elemento <keygen> es proporcionar una
forma segura para autenticar usuarios.
 El <keygen> especifica un campo generador de par de
claves en un formulario. Cuando se envía el formulario, dos
claves se generan, una privada y una pública.
 La clave privada se almacena localmente, y la clave
pública se envía al servidor. La clave pública se podría
utilizar para generar un certificado de cliente para
autenticar al usuario en el futuro.
<form action="action_page.php">
Username: <input type="text" name="user">
Encryption: <keygen name="security">
<input type="submit">
</form>
Los formularios: elementos en
Abril, 2015 38
 El elemento <output> representa el resultado de un cálculo
(como uno realizado por un script).
<form action="action_page.asp"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
Bibliografías
Abril, 2015 39
Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es
2008. Creative Commons reconocimiento no comercial -
sin obra derivada 3.0
W3Schools a web developers site. http://www.w3schools.com

Más contenido relacionado

La actualidad más candente

UDA-Componentes RUP. Autocomplete
UDA-Componentes RUP. AutocompleteUDA-Componentes RUP. Autocomplete
UDA-Componentes RUP. AutocompleteAnder Martinez
 
RESTful API 설계
RESTful API 설계RESTful API 설계
RESTful API 설계Jinho Yoo
 
UDA-Componentes RUP. Fecha (v2.1.0 deprecado)
UDA-Componentes RUP. Fecha  (v2.1.0 deprecado)UDA-Componentes RUP. Fecha  (v2.1.0 deprecado)
UDA-Componentes RUP. Fecha (v2.1.0 deprecado)Ander Martinez
 
The effective use of Django ORM
The effective use of Django ORMThe effective use of Django ORM
The effective use of Django ORMYaroslav Muravskyi
 
An Introduction to ReactJS
An Introduction to ReactJSAn Introduction to ReactJS
An Introduction to ReactJSAll Things Open
 
8 introduction to_java_script
8 introduction to_java_script8 introduction to_java_script
8 introduction to_java_scriptVijay Kalyan
 
Hacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sitesHacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sitesMikhail Egorov
 
Diseño y validacion GUI con java usando Netbeans
Diseño y validacion GUI con java usando NetbeansDiseño y validacion GUI con java usando Netbeans
Diseño y validacion GUI con java usando NetbeansEmerson Garay
 
Introduction To Django
Introduction To DjangoIntroduction To Django
Introduction To DjangoJay Graves
 
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 formulariosLaura Folgado Galache
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & videoHamza Zahid
 
Web Technology Lab files with practical
Web Technology Lab  files with practicalWeb Technology Lab  files with practical
Web Technology Lab files with practicalNitesh Dubey
 
스프링 시큐리티 구조 이해
스프링 시큐리티 구조 이해스프링 시큐리티 구조 이해
스프링 시큐리티 구조 이해beom kyun choi
 

La actualidad más candente (20)

UDA-Componentes RUP. Autocomplete
UDA-Componentes RUP. AutocompleteUDA-Componentes RUP. Autocomplete
UDA-Componentes RUP. Autocomplete
 
Html5 SVG
Html5 SVGHtml5 SVG
Html5 SVG
 
RESTful API 설계
RESTful API 설계RESTful API 설계
RESTful API 설계
 
UDA-Componentes RUP. Fecha (v2.1.0 deprecado)
UDA-Componentes RUP. Fecha  (v2.1.0 deprecado)UDA-Componentes RUP. Fecha  (v2.1.0 deprecado)
UDA-Componentes RUP. Fecha (v2.1.0 deprecado)
 
The effective use of Django ORM
The effective use of Django ORMThe effective use of Django ORM
The effective use of Django ORM
 
An Introduction to ReactJS
An Introduction to ReactJSAn Introduction to ReactJS
An Introduction to ReactJS
 
PHP MVC
PHP MVCPHP MVC
PHP MVC
 
8 introduction to_java_script
8 introduction to_java_script8 introduction to_java_script
8 introduction to_java_script
 
Hacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sitesHacking Adobe Experience Manager sites
Hacking Adobe Experience Manager sites
 
Diseño y validacion GUI con java usando Netbeans
Diseño y validacion GUI con java usando NetbeansDiseño y validacion GUI con java usando Netbeans
Diseño y validacion GUI con java usando Netbeans
 
Introduction To Django
Introduction To DjangoIntroduction To Django
Introduction To Django
 
Django
DjangoDjango
Django
 
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
 
HTML Forms
HTML FormsHTML Forms
HTML Forms
 
HTML5 audio & video
HTML5 audio & videoHTML5 audio & video
HTML5 audio & video
 
Html5
Html5Html5
Html5
 
Web Technology Lab files with practical
Web Technology Lab  files with practicalWeb Technology Lab  files with practical
Web Technology Lab files with practical
 
스프링 시큐리티 구조 이해
스프링 시큐리티 구조 이해스프링 시큐리티 구조 이해
스프링 시큐리티 구조 이해
 
Selenium-Locators
Selenium-LocatorsSelenium-Locators
Selenium-Locators
 
Table and Form HTML&CSS
Table and Form HTML&CSSTable and Form HTML&CSS
Table and Form HTML&CSS
 

Destacado

Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsiveRenny Batista
 
Html - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasHtml - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasRenny Batista
 
Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Renny Batista
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIRenny Batista
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java scriptRenny Batista
 
Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Jorge Llanten
 
Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4Ozzy Bull
 
Macros Visual Basic Para Excel
Macros Visual Basic Para ExcelMacros Visual Basic Para Excel
Macros Visual Basic Para ExcelBerthamazon
 
Ejercicios de visual basic 2012
Ejercicios de visual basic 2012Ejercicios de visual basic 2012
Ejercicios de visual basic 2012iestp huari
 
EXCEL Visual basic
EXCEL Visual basicEXCEL Visual basic
EXCEL Visual basicLuis Pacheco
 
Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Renny Batista
 

Destacado (20)

Diseño adaptativo y responsive
Diseño adaptativo y responsiveDiseño adaptativo y responsive
Diseño adaptativo y responsive
 
Css - Tema 2
Css -  Tema 2Css -  Tema 2
Css - Tema 2
 
Html - Tema 3
Html - Tema 3Html - Tema 3
Html - Tema 3
 
Html - Tema 1
Html - Tema 1Html - Tema 1
Html - Tema 1
 
Html - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y ListasHtml - Tema 2: Enlaces, Imágenes y Listas
Html - Tema 2: Enlaces, Imágenes y Listas
 
JQuery-Tema 1
JQuery-Tema 1JQuery-Tema 1
JQuery-Tema 1
 
Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015Programación Orientada a Objetos en Java - Parte I 2015
Programación Orientada a Objetos en Java - Parte I 2015
 
Fundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema IIFundamentos de Sistema- >Tema II
Fundamentos de Sistema- >Tema II
 
05 java excepciones
05 java excepciones05 java excepciones
05 java excepciones
 
Introduccion al java script
Introduccion al java scriptIntroduccion al java script
Introduccion al java script
 
Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1Curso HTML y CSS, parte 1
Curso HTML y CSS, parte 1
 
Elementos de formulario y atributos
Elementos de formulario y atributosElementos de formulario y atributos
Elementos de formulario y atributos
 
Introducción a CSS Parte - 1
Introducción a CSS Parte - 1Introducción a CSS Parte - 1
Introducción a CSS Parte - 1
 
Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4Uso de-patrones-de-arquitectura-capitulo-4
Uso de-patrones-de-arquitectura-capitulo-4
 
Mac
MacMac
Mac
 
Curso visual basic
Curso visual basicCurso visual basic
Curso visual basic
 
Macros Visual Basic Para Excel
Macros Visual Basic Para ExcelMacros Visual Basic Para Excel
Macros Visual Basic Para Excel
 
Ejercicios de visual basic 2012
Ejercicios de visual basic 2012Ejercicios de visual basic 2012
Ejercicios de visual basic 2012
 
EXCEL Visual basic
EXCEL Visual basicEXCEL Visual basic
EXCEL Visual basic
 
Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015Java - Sintaxis Básica 2015
Java - Sintaxis Básica 2015
 

Similar a Formularios HTML

Similar a Formularios HTML (20)

formularioshtml.pdf
formularioshtml.pdfformularioshtml.pdf
formularioshtml.pdf
 
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
 
Html 5: formularios
Html 5: formulariosHtml 5: formularios
Html 5: formularios
 
Formularios HTML
Formularios HTMLFormularios HTML
Formularios HTML
 
Formularios y Validaciones
Formularios y ValidacionesFormularios y Validaciones
Formularios y Validaciones
 
Formularios html
Formularios htmlFormularios html
Formularios html
 
Formularios en HTML5
Formularios en HTML5Formularios en HTML5
Formularios en HTML5
 
Formularios 1
Formularios 1Formularios 1
Formularios 1
 
Formularios 1
Formularios 1      Formularios 1
Formularios 1
 
Introducción a Javascript: Formularios
Introducción a Javascript: FormulariosIntroducción a Javascript: Formularios
Introducción a Javascript: Formularios
 
Tema 6 - Formularios en html
Tema 6 - Formularios en htmlTema 6 - Formularios en html
Tema 6 - Formularios en html
 
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
 
0x04-HTML_FORMS.pdf
0x04-HTML_FORMS.pdf0x04-HTML_FORMS.pdf
0x04-HTML_FORMS.pdf
 
Formularios html5
Formularios html5Formularios html5
Formularios html5
 
Guía Formulario
Guía FormularioGuía Formulario
Guía Formulario
 
Formulario
FormularioFormulario
Formulario
 
Frames y formularios en html
Frames y formularios en htmlFrames y formularios en html
Frames y formularios en html
 
Frames-Formularios
Frames-FormulariosFrames-Formularios
Frames-Formularios
 
Js api formularios
Js api formulariosJs api formularios
Js api formularios
 
Atributos autofocus-etc
Atributos autofocus-etcAtributos autofocus-etc
Atributos autofocus-etc
 

Más de Renny Batista

Modelos de desarrollo del software
Modelos de desarrollo del softwareModelos de desarrollo del software
Modelos de desarrollo del softwareRenny Batista
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de DatosRenny Batista
 
Introducción a la programación orientada objetos
Introducción a la programación orientada objetosIntroducción a la programación orientada objetos
Introducción a la programación orientada objetosRenny Batista
 

Más de Renny Batista (7)

03 java poo_parte_2
03 java poo_parte_203 java poo_parte_2
03 java poo_parte_2
 
Java colecciones
Java coleccionesJava colecciones
Java colecciones
 
Css - Tema 1
Css - Tema 1Css - Tema 1
Css - Tema 1
 
Modelos de desarrollo del software
Modelos de desarrollo del softwareModelos de desarrollo del software
Modelos de desarrollo del software
 
Diagramas de Flujos de Datos
Diagramas de Flujos de DatosDiagramas de Flujos de Datos
Diagramas de Flujos de Datos
 
Introducción a la programación orientada objetos
Introducción a la programación orientada objetosIntroducción a la programación orientada objetos
Introducción a la programación orientada objetos
 
Sistemas Operativos
Sistemas OperativosSistemas Operativos
Sistemas Operativos
 

Último

FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdfFLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdfYuriFuentesMartinez2
 
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULDGRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULDLeslie Villar
 
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11THALIAEUGENIOMAIZ
 
Guía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdfGuía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdfJohn Muñoz
 
Medios Digitales Teorías y Metodologías de Análisis.pptx
Medios Digitales Teorías y Metodologías de Análisis.pptxMedios Digitales Teorías y Metodologías de Análisis.pptx
Medios Digitales Teorías y Metodologías de Análisis.pptxUniversidad de Bielefeld
 
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAMLA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAMalejandroortizm
 
TALLER DE ANALISIS SOLUCION DE TECNOLOGIA
TALLER DE ANALISIS SOLUCION DE TECNOLOGIATALLER DE ANALISIS SOLUCION DE TECNOLOGIA
TALLER DE ANALISIS SOLUCION DE TECNOLOGIAobandopaula444
 
Software y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdfSoftware y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdfDanielaEspitiaHerrer
 
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdfDS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdfKAREN553987
 
que es Planimetría definición importancia en topografia.pptx
que es Planimetría definición importancia en topografia.pptxque es Planimetría definición importancia en topografia.pptx
que es Planimetría definición importancia en topografia.pptxmrzreyes12
 
Cultura digital diferentes tipos de fraudes ciberneticos.
Cultura digital diferentes tipos de fraudes ciberneticos.Cultura digital diferentes tipos de fraudes ciberneticos.
Cultura digital diferentes tipos de fraudes ciberneticos.JOSE69482
 
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdfElegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdfanthonyramos422819
 
Módulo 3 escuela activa presentacion.pptx
Módulo 3 escuela activa presentacion.pptxMódulo 3 escuela activa presentacion.pptx
Módulo 3 escuela activa presentacion.pptxMiguelAngelCifuentes10
 
CamposGarcia_MariaMagdalena_M1S3AI6.pptx
CamposGarcia_MariaMagdalena_M1S3AI6.pptxCamposGarcia_MariaMagdalena_M1S3AI6.pptx
CamposGarcia_MariaMagdalena_M1S3AI6.pptx241518192
 
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...#LatamDigital
 
El uso de las tic en la vida continúa , ambiente positivo y negativo.
El uso de las tic  en la vida continúa , ambiente positivo y negativo.El uso de las tic  en la vida continúa , ambiente positivo y negativo.
El uso de las tic en la vida continúa , ambiente positivo y negativo.ayalayenifer617
 
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...ulisesochoa5
 
GRUPO 5 Software en el campo de la salud.pptx
GRUPO 5 Software en el campo de la salud.pptxGRUPO 5 Software en el campo de la salud.pptx
GRUPO 5 Software en el campo de la salud.pptxNicolas Villarroel
 
PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...delvalleelizabeth400
 

Último (19)

FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdfFLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
FLUIDEZ-Teatro-Leido-4to-Grado-El-leon-y-el-raton- (1).pdf
 
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULDGRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
GRUPO 10 SOFTWARE DE EL CAMPO DE LA SAULD
 
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
PLANIFICACIÓN 2°SEC-PUERTO RICO. 2024 .04.11
 
Guía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdfGuía para registrarse en slideshare..pdf
Guía para registrarse en slideshare..pdf
 
Medios Digitales Teorías y Metodologías de Análisis.pptx
Medios Digitales Teorías y Metodologías de Análisis.pptxMedios Digitales Teorías y Metodologías de Análisis.pptx
Medios Digitales Teorías y Metodologías de Análisis.pptx
 
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAMLA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
LA ETICA DEL UTILITARISMO DE JEREMY BENTHAM
 
TALLER DE ANALISIS SOLUCION DE TECNOLOGIA
TALLER DE ANALISIS SOLUCION DE TECNOLOGIATALLER DE ANALISIS SOLUCION DE TECNOLOGIA
TALLER DE ANALISIS SOLUCION DE TECNOLOGIA
 
Software y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdfSoftware y servicios de internet mapa conceptual.pdf
Software y servicios de internet mapa conceptual.pdf
 
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdfDS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
DS 011-2023-MTC.pdf DISTANCIAS DE CARRETERAS.pdf
 
que es Planimetría definición importancia en topografia.pptx
que es Planimetría definición importancia en topografia.pptxque es Planimetría definición importancia en topografia.pptx
que es Planimetría definición importancia en topografia.pptx
 
Cultura digital diferentes tipos de fraudes ciberneticos.
Cultura digital diferentes tipos de fraudes ciberneticos.Cultura digital diferentes tipos de fraudes ciberneticos.
Cultura digital diferentes tipos de fraudes ciberneticos.
 
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdfElegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
Elegant_and_Professional_Company_Business_Proposal_Presentation (1).pdf
 
Módulo 3 escuela activa presentacion.pptx
Módulo 3 escuela activa presentacion.pptxMódulo 3 escuela activa presentacion.pptx
Módulo 3 escuela activa presentacion.pptx
 
CamposGarcia_MariaMagdalena_M1S3AI6.pptx
CamposGarcia_MariaMagdalena_M1S3AI6.pptxCamposGarcia_MariaMagdalena_M1S3AI6.pptx
CamposGarcia_MariaMagdalena_M1S3AI6.pptx
 
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat  Vers...
11º Anuncio Nominados Finalistas Premios #LatamDigital 2024 by Interlat Vers...
 
El uso de las tic en la vida continúa , ambiente positivo y negativo.
El uso de las tic  en la vida continúa , ambiente positivo y negativo.El uso de las tic  en la vida continúa , ambiente positivo y negativo.
El uso de las tic en la vida continúa , ambiente positivo y negativo.
 
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
triptico de redes sociales ejemplo para que te puedas bazar en la realizacion...
 
GRUPO 5 Software en el campo de la salud.pptx
GRUPO 5 Software en el campo de la salud.pptxGRUPO 5 Software en el campo de la salud.pptx
GRUPO 5 Software en el campo de la salud.pptx
 
PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...PowerPoint y sus partes más contenidos...
PowerPoint y sus partes más contenidos...
 

Formularios HTML

  • 1. Hyper Text Markup Language Tema 4: Formularios © Abril, 2015 Prof. Renny Batista
  • 2. Los formularios en HTML  Los formularios en HTML se utilizan para recolectar información del usuario.  El elemento <form> define un formulario en HTML.  Los elementos de un formulario son de diferentes tipos: cajas de texto, casillas de verificación, botones de opción, botones de envío, y más.. <form> . form elements . </form> Abril, 2015 2
  • 3. Los formularios: atributo action  El atributo action define la acción que se realiza cuando se envía el formulario.  La forma más común enviar los datos de un formulario a un servidor, es mediante el uso de un botón de envío (submit).  Normalmente, el formulario se envía los datos a una página web en un servidor web.  En este el ejemplo, se especifica un script del lado del servidor para manejar el formulario enviado: <form action="action_page.php">  Si se omite el atributo de acción, la acción se establece en la página actual. Abril, 2015 3
  • 4. Los formularios: atributo method  El atributo method especifica el método HTTP (GET o POST) para ser utilizado al presentar los formularios: <form action="action_page.php" method="GET"> <form action="action_page.php" method="POST"> Abril, 2015 4
  • 5. Los formularios: ¿Cuándo utilizar GET?  Puede usar GET (el método por defecto): – Si el envío del formulario es pasivo (como una consulta al motor de búsqueda), y sin información sensible. – Al utilizar GET, los datos del formulario serán visibles en la dirección de la página: action_page.php?firstname=Mickey&lastname=Mouse – GET es el más adecuado para cortos períodos de datos. Las limitaciones de tamaño son establecidas por el navegador en uso. Abril, 2015 5
  • 6. Los formularios: ¿Cuándo utilizar POST?  Debe utilizar POST: – Si la formulario es de actualización de los datos, o incluye información confidencial (contraseñas). – Post ofrece una mayor seguridad ya que los datos presentados no está visible en la dirección de la página. Abril, 2015 6
  • 7. Los formularios: otros atributos  Un <form> con todos sus atributos posibles, se verá así : <form action="action_page.php" method="GET" target="_blank" accept-charset="UTF-8" enctype="application/x-www-form-urlencoded" autocomplete="off" novalidate> . form elements . </form> Abril, 2015 7
  • 8. Los formularios: otros atributos Abril, 2015 8 Atributo Descripción accept-charset Especifica el charset utilizado en el formulario enviado (por defecto: el charset de la pagina). action Especifica una dirección(url) a la cual se envían los datos autocomplete Especifica si el navegador debe autocompletar el formulario (por defecto: on). enctype Especifica la codificación de los datos presentados (por defecto es url-encoded). method Especifica el método HTTP utilizado para el envío de los datos (por defecto: GET). name Especifica un nombre para identificar el formulario (El uso en DOM : document.forms.name). novalidate Especifica que el navegador no debe validar el formulario target Específica el destino de la dirección en el atributo de acción (por defecto: _self).
  • 9. Los formularios: Input Types  <input type="text"> define un campo de entrada de una línea para la entrada de texto:: <form> Nombres:<br> <input type="text" name="nombre"> <br> Apellidos:<br> <input type="text" name="apellido"> </form> Abril, 2015 9
  • 10. Los formularios: Input Types  <input type="password"> define un campo de contraseña: <form> User name:<br> <input type="text" name="username"> <br> User password:<br> <input type="password" name="psw"> </form> Abril, 2015 10
  • 11. Los formularios: Input Types  <input type="submit"> define un botón para la presentación del formulario de entrada para un form-handler.  El form-handler es típicamente una página del servidor con una secuencia de comandos para el procesamiento de los datos de entrada.  El form-handler se especifica en el atributo action del formulario: <form action="action_page.php"> First name:<br> <input type="text" name="firstname" value="Mickey"> <br> Last name:<br> <input type="text" name="lastname" value="Mouse"> <br><br> <input type="submit" value="Submit"> </form> Abril, 2015 11
  • 12. Los formularios: Input Types  <input type="radio"> define un botón de radio.  Los botones de opción permiten al usuario seleccionar sólo una de un número limitado de opciones: <form> <input type="radio" name="sex" value="male" checked>Male <br> <input type="radio" name="sex" value="female">Female </form> Abril, 2015 12
  • 13. Los formularios: Input Types  <input type="checkbox"> define una casilla de verificación.  Las casillas de verificación permite que un usuario seleccione cero o más opciones de un número limitado de opciones.. <form> <input type="checkbox" name="vehicle" value="Bike">I have a bike <br> <input type="checkbox" name="vehicle" value="Car">I have a car </form> Abril, 2015 13
  • 14. Los formularios: Input Types  <input type="button"> define un botón: <input type="button" onclick="alert('Hello World!')" value="Click Me!"> Abril, 2015 14
  • 15. Los formularios: Elemento <select>  El elemento <select> define una lista desplegable.  Los elementos <option> definen las opciones de la lista para seleccionar.  La lista mostrará normalmente el primer elemento como seleccionado.  Usted puede agregar un atributo selected para establecer una opción predefinida. <select name=“carros"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat" selected>Fiat</option> <option value="audi">Audi</option> </select> Abril, 2015 15
  • 16. Los formularios: Elemento <select>  El <optgroup> se utiliza para opciones relacionadas con el grupo en una lista desplegable.  Si usted tiene una larga lista de opciones, un grupo de opciones relacionadas son más fáciles de manipular para un usuario. <select> <optgroup label="Carros Suecos"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> </optgroup> <optgroup label="Carros Alemanes"> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option> </optgroup> </select> Abril, 2015 16
  • 17. Los formularios: Elemento < textarea >  El elemento <textarea> define un campo de entrada multilínea (un área de texto): <textarea name="message" rows="10" cols="30"> San Felipe en un hermoso estado ubicado en el centro occidente de Venezuela </textarea> Abril, 2015 17
  • 18. Los formularios: Elemento <fieldset>  La etiqueta <fieldset> se utiliza para agrupar elementos relacionados en un formulario.  La etiqueta <fieldset> dibuja un cuadro alrededor de los elementos relacionados  La etiqueta <legend> define un título para el elemento <fieldset>. <form> <fieldset> <legend>Datos personales:</legend> Nombre: <input type="text"><br> Email: <input type="text"><br> Fecha de Nacimiento: <input type="text"> </fieldset> </form> Abril, 2015 18
  • 19. Los formularios: Atributos  El atributo value especifica el valor inicial de un campo de entrada: <form action=""> Nombre:<br> <input type="text" name="firstname" value="Tony"> <br> Apellido:<br> <input type="text" name="lastname" value="Stark"> </form> Abril, 2015 19
  • 20. Los formularios: Atributos  El atributo readonly especifica que el campo de entrada es de sólo lectura (no se puede cambiar):  El atributo readonly no necesita un valor. Es lo mismo que escribir readonly = "readonly". <form action=""> Nombre:<br> <input type="text" name="firstname" value="Tony" readonly> <br> Apellido:<br> <input type="text" name="lastname" value="Stark"> </form> Abril, 2015 20
  • 21. Los formularios: Atributos  El atributo disabled especifica que el campo de entrada está desactivado.  En un elemento con atributo disabled no surten efectos los cambios y tampoco hacer clic.  Los datos de un elemento con atributo disabled no pueden ser enviados.  La etiqueta atributo disabled no necesita un valor. Es lo mismo que escribir disabled = "disabled". <form action=""> Nombre:<br> <input type="text" name="firstname" value="Tony" disabled> <br> Apellido:<br> <input type="text" name="lastname" value="Stark"> </form> Abril, 2015 21
  • 22. Los formularios: Atributos  El atributo size especifica el tamaño (en caracteres) para el campo de entrada: <form action=""> Nombre:<br> <input type="text" name="firstname" value="Tony" size="40"> <br> Apellido:<br> <input type="text" name="lastname" value="Stark"> </form> Abril, 2015 22
  • 23. Los formularios: Atributos  El atributo maxlength especifica la longitud máxima permitida para el campo de entrada  Con un atributo maxlength, el control de entrada no aceptará más que el número de caracteres permitidos.  El atributo no proporciona ninguna retroalimentación. Si desea alertar al usuario, debe escribir código JavaScript. <form action=""> Nombre:<br> <input type="text" name="firstname" maxlength="10"> <br> Apellido:<br> <input type="text" name="lastname"> </form> Abril, 2015 23
  • 24. Los formularios: input types en  La etiqueta <input type = "number"> se utiliza para campos de entrada que deben contener un valor numérico.  Se puede establecer restricciones sobre los números.  Dependiendo de la compatibilidad del navegador, se pueden aplicar restricciones al campo de entrada. <form> Cantidad (entre 1 y 5): <input type="number" name="cantidad" min="1" max="5"> </form> Abril, 2015 24
  • 25. Los formularios: input types en Abril, 2015 25 Atributo Descripción disabled Especifica que un campo de entrada está desactivado max Especifica el máximo valor para un campo de entrada maxlength Especifica el numero máximo de caracteres permitidos min Especifica el mínimo valor para un campo de entrada pattern Especifica una expresión regular para comprobar el valor de entrada readonly Especifica que un campo es de sólo lectura required Especifica que un campo de entrada es requerido (obligatorio) size Especifica el ancho en caracteres de un campo de entrada step Especifica el numero de intervalos para un campo de entrada value Especifica el valor por defecto del campo de entrada
  • 26. Los formularios: input types en Abril, 2015 26  El <input type=“date"> se utiliza para campos de entrada que deben contener una fecha.  Dependiendo de la compatibilidad del navegador, un selector de fechas puede aparecer en el campo de entrada. <form> Fecha: <input type="date" name="bday"> </form>
  • 27. Los formularios: input types en Abril, 2015 27  Se puede establecer restricciones a la entrada de una fecha: <form> Enter a date before 1980-01-01: <input type="date" name="bday" max="1979-12-31"><br> Enter a date after 2000-01-01: <input type="date" name="bday" min="2000-01-02"><br> </form>
  • 28. Los formularios: input types en Abril, 2015 28  El <input type="color"> se utiliza para campos de entrada que deben contener un color. <form> Select your favorite color: <input type="color" name="favcolor"> </form>
  • 29. Los formularios: input types en Abril, 2015 29  El <input type = “range"> se utiliza para campos de entrada que deben contener un valor dentro de un rango. <form> <input type="range" name="points" min="0" max="10"> </form>
  • 30. Los formularios: input types en Abril, 2015 30  El <input type = “month"> permite al usuario seleccionar un mes y el año. <form> Birthday (month and year): <input type="month" name="bdaymonth"> </form>
  • 31. Los formularios: input types en Abril, 2015 31  El <input type = “week"> permite al usuario seleccionar una semana y año. <form> Select a week: <input type="week" name="week_year"> </form>
  • 32. Los formularios: input types en Abril, 2015 32  El <input type = "email"> se utiliza para campos de entrada que deben contener una dirección de correo electrónico. <form> E-mail: <input type="email" name="email"> </form>
  • 33. Los formularios: input types en Abril, 2015 33  El <input type = "email"> se utiliza para campos de entrada que deben contener una dirección de correo electrónico.  Dependiendo de la compatibilidad del navegador, la dirección de correo electrónico se puede validar de forma automática cuando se presente.  Algunos teléfonos inteligentes reconocen el tipo de correo electrónico, y agrega ".com" al teclado para que coincida con la entrada de correo electrónico. <form> E-mail: <input type="email" name="email"> </form>
  • 34. Los formularios: input types en Abril, 2015 34  El <input type="buscar"> se utiliza para campos de búsqueda (un campo de búsqueda se comporta como un campo de texto normal). <form> Search Google: <input type="search" name="googlesearch"> </form>
  • 35. Los formularios: input types en Abril, 2015 35  El <input type = "url"> se utiliza para campos de entrada que deben contener una dirección URL.  Dependiendo de la compatibilidad del navegador, el campo URL se puede validar de forma automática cuando se presente  Algunos teléfonos inteligentes reconocen el tipo de url, y añade ".com" al teclado para que coincida con la entrada url. <form> Add your homepage: <input type="url" name="homepage"> </form>
  • 36. Los formularios: elementos en Abril, 2015 36  El <datalist> especifica una lista de opciones predefinidas para un elemento <input>. Los usuarios verán una lista desplegable de opciones predefinidas.  El atributo de lista del elemento <input>, debe hacer referencia al atributo id del elemento <datalist>. <form action="action_page.php"> <input list="browsers"> <datalist id="browsers"> <option value="Internet Explorer"> <option value="Firefox"> <option value="Chrome"> <option value="Opera"> <option value="Safari"> </datalist> </form>
  • 37. Los formularios: elementos en Abril, 2015 37  El propósito del elemento <keygen> es proporcionar una forma segura para autenticar usuarios.  El <keygen> especifica un campo generador de par de claves en un formulario. Cuando se envía el formulario, dos claves se generan, una privada y una pública.  La clave privada se almacena localmente, y la clave pública se envía al servidor. La clave pública se podría utilizar para generar un certificado de cliente para autenticar al usuario en el futuro. <form action="action_page.php"> Username: <input type="text" name="user"> Encryption: <keygen name="security"> <input type="submit"> </form>
  • 38. Los formularios: elementos en Abril, 2015 38  El elemento <output> representa el resultado de un cálculo (como uno realizado por un script). <form action="action_page.asp" oninput="x.value=parseInt(a.value)+parseInt(b.value)"> 0 <input type="range" id="a" name="a" value="50"> 100 + <input type="number" id="b" name="b" value="50"> = <output name="x" for="a b"></output> <br><br> <input type="submit"> </form>
  • 39. Bibliografías Abril, 2015 39 Eguíluz Pérez, J. Introducción a XHTML. http://www.librosweb.es 2008. Creative Commons reconocimiento no comercial - sin obra derivada 3.0 W3Schools a web developers site. http://www.w3schools.com