Ejemplos html5

HTML5 incorpora nuevos elementos para facilitar la creacin de campos de datos que en
muchos casos deban programarse con javascript o aadir alguna librera externa en algn
lenguaje que permitiera extender las capacidades que tenan los elementos de xhtml y html4.
Muchos programadores siguen trabajando de la forma tradicional ya que es soportada por la
mayora de los navegadores, las ultimas mejoras solo son soportadas por las versiones ms
nuevas.
HTML5 ofrece un conjunto de nuevos atributos para el atributo type del elemento input, es
decir la mayora de los elementos de un formulario, como las cajas de texto.
Algunos de estos atributos de html conocidos son:
Input type=text - Caja de texto
input type=password Campo para contrasea que oculta la contrasea con asteriscos.
Input type=submit Botn para enviar formularios
ATRIBUTO TIPO NUMRICO REGSTRATE
El elemento que contenga como atributo type number, permite no solo determinar que el valor
ingresado sea numrico, sino adems restringirlo entre mximos y mnimos, podemos ver en
la imagen como adems tiene validacin sin necesidad de programar nada
El cdigo fuente del ejemplo para utilizar este atributo es el siguiente
1
2
3
4
5
6
<html>
<title>Tipo Number</title>
<body>
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<h4>Tipo Number</h4>
<form>
Nro Pasaje(1-40):
<input type="number" name="nropasaje" min="1" max="40">
<br>
<input type="submit" value="Enviar">
</form>
</body>
</html>
ATRIBUTO TIPO FECHA (DATE)

El atributo tipo date se utiliza para campos donde es necesario contener una fecha. Segn el
navegador y el soporte que ofrezcan aparecer el control calendario para poder seleccionar un
fecha.
ATRIBUTO TIPO COLOR

El atributo tipo color se utiliza para campos donde es necesario contener un color. Segn el
navegador y el soporte que ofrezcan aparecer el control tipo colorpicker para poder
seleccionar un color o bien escribir el color en hexadecimal. El selector aparecer en forma de

pop-up cuando se hace click en el color.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<h4>Tipo color</h4>
<form>
Seleccionar un color:
<input type="color" name="color" value="#8FAE70">
<br>
</form>
</body>
</html>
ATRIBUTO TIPO EMAIL

El atributo tipo email se utiliza para campos donde es necesario contener un email. Segn el
navegador y el soporte que ofrezcan validara que el texto introducido tenga el formato de un
email, sino aparecer un mensaje de error, esto nos facilitara la validacin de un formulario sin
programar.
1
2
3
4
5
6
7
8
9
10
11
<html>
<body>
<h4>Tipo email</h4>
<form>
Ingrese Email:
<input type="email" name="email" value="">
<br>
12
13 </form>
14
15 </body>
16
17 </html>
ATRIBUTO TIPO URL

El atributo tipo url se utiliza para campos donde es necesario contener un dominio, una url.
Segn el navegador y el soporte que ofrezcan validara que el texto introducido tenga el
formato de un dominio, sino aparecer un mensaje de error, esto nos facilitara la validacin de
un formulario sin programar. No es necesario que contenga http, ni www, en ese caso si lo
requerimos deberemos validarlo mediente programacin.
1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<body>
<h4>Tipo Url</h4>
<form>
Ingrese Email:
<input type="url" name="url" value="">
<br>
14 </form>
15
16 </body>
17
18 </html>
ATRIBUTOS Y PROPIEDADES PARA HTML5

1. Atributo Autocomplete
Cuando escribimos en un campo del formulario nos encontramos que generalmente el
navegador nos va a dar la opcin de autocompletar lo que estemos escribiendo en ese
momento con texto que ya hayamos escrito con antes, esto puede dar problemas de seguridad
ya que por ejemplo si escribimos varios email porque el ordenador fue utilizado por diferente
usuario podramos escribiendo ver informacin que otro usuario ha introducido. En el ejemplo
desactivamos el autocompletar en el mail, pero no en los dems campos. Tambin puede
desactivarse desde el navegador pero muchos usuarios no saben que existe la opcin, ni
como desactivar el autocompletado.
1
2
3
4
5
6
7
8
9
10
11
12
<html>
<body>
<h4>Atributo Autocomplete</h4>
<form>
<form autocomplete="on">
Nombre:<input type="text" name="nombre">
<br>
Email: <input type="email" name="email" autocomplete="off"><br>
13
<br>
14
15
16 </form>
17
18 </body>
19
20 </html>
Vemos que al ingresar la palabra Autocompleta y enviar al acceder al mismo formulario luego
y presionar solo la letra A, ya sugiere en este caso la palabra que habamos escrito
anteriormente.
2. Atributo Autofocus
Este atributo sirve para indicar en que input de un formulario debe posicionarse el cursor
cuando se carga la pagina web, si no esta presente entonces comenzara por el primero que
encuentre. Esto tambin se puede programar con jQuery para ir poniendo el foco en distintos
controles segn lo necesitemos.
3. Atributo Form
Este atributo es muy til para gestionar elementos por fuera de un formulario sin importar en
que parte de la estructura de la web se encuentre.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<html>
<body>
<h4>Atributo Form</h4>
<form>
<form action="grabar.php" id="formA">
Producto:<input type="text" name="producto">
<br>
Descripcin:
<br><textarea rows="4" cols="50"></textarea>
<br>
</form>
<br>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas

y archivos de texto. </p>
21 <p>Lorem Ipsum es simplemente el texto de relleno de las imprentas
22
24 <br>
25
26 Stock: <input type="text" name="stock" form="formA">
27 </body>
28
29 </html>
30
31
Podemos ver en el cdigo fuente HTML que hemos creado un formulario para introducir los
datos de un producto luego algn texto explicativo y finalmente ponemos un campo de texto
para el stock fuera del formulario, pero lo relacionamos con este formulario a travs de su
identificar id=formA en el campo de texto stock pondremos que lo relacionamos con le
formulario form=formA, de esta manera al enviar el formulario se enviaran tambin todos los
elementos que este relacionados.
4. Atributo FormAction
Este atributo es muy til para enviar un mismo formulario a paginas distintas, algo que
anteriormente haba que programar en javascript y enviarle parmetros de todos los elementos
del formulario para poder hacer el reenvo, en algunos caso se tornaba muy engorroso sobre
todo si haba mltiples formularios que dependan uno de otro.
Tomamos el ejemplo del caso anterior con un botn enviamos el formulario a la pagina
grabar.php y con el otro astock.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<body>
<h4>Atributo Form</h4>
<form>
<br>
Descripcion:
<br><textarea rows="4" cols="50"></textarea>
<br>
</form>
<br>
<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas

21
23 <br>
24
25 Stock: <input type="text" name="stock" form="formA">
26 <input type="submit" formaction="stock.php" form="formA">
27
28 </body>
29 </html>
30
31 Atributo Image con submit

32 Si queremos utilizar una imagen como botn tipo submit para enviar
un formulario, la nica forma de hacerlo era poner una imagen o
bien utilizar hojas de estilo css y luego hacer la funcionalidad
con javascript.
33
34 <html>
35 <body>
36
37 <h4>Atributo tipo Image</h4>
38 <form>
39
40 <form action="grabar.php" id="formA">
41
42
43
<br>
44
Descripcin: <br><textarea rows="4" cols="50"></textarea>
45
46
<br>
47
<input type="image" src="enviar.png" alt="Submit" width="163"
height="78">
48
49 </form>
50 </body>
51
52 </html>
5. Atributo List y Datalist
Este atributo permite definir una lista en un elemento <datalist> y luego aplicrselo a un
elemento input para que realice una bsqueda a medida que vamos escribiendo.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<html>
<body>
<h4>Atributo tipo list y datalist</h4>
<form>
<input list="autos" name="vehiculos">
<datalist id="autos">
<option value="Ford">
<option value="Fiat">
<option value="Ferari">
<option value="Honda">
<option value="Toyota">
<option value="Renault">
<option value="Peugeot">
</datalist>
</form>
</body>
</html>
Vemos que al escribir solo una letra en este caso f, se despliega un listado con las
posibilidades encontradas, esto es muy til ya que realiza un filtro de los datos que contenga
el datalist y adems puede ser reutilizado en otro controles o elementos.

Ejemplos html5

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Ejemplos html5

Transféré par

Droits d'auteur :

Formats disponibles

HTML5 incorpora nuevos elementos para facilitar la creacin de campos de datos que en

El cdigo fuente del ejemplo para utilizar este atributo es el siguiente

ATRIBUTO TIPO FECHA (DATE)

ATRIBUTO TIPO COLOR

seleccionar un color o bien escribir el color en hexadecimal. El selector aparecer en forma de

ATRIBUTO TIPO EMAIL

ATRIBUTO TIPO URL

ATRIBUTOS Y PROPIEDADES PARA HTML5

<br><textarea rows="4" cols="50"></textarea>

<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas

<br><textarea rows="4" cols="50"></textarea>

<p>Lorem Ipsum es simplemente el texto de relleno de las imprentas

31 Atributo Image con submit

5. Atributo List y Datalist

Vous aimerez peut-être aussi