etiqueta input HTML5

15

Transcript of etiqueta input HTML5

Page 1: etiqueta input HTML5
Page 2: etiqueta input HTML5
Page 3: etiqueta input HTML5

La entrada “tel” la utilizaremos para los tipos de entrada denumero de teléfono (type=“tel”), a diferencia de los tipos url yemail, el tipo tel no impone una sintaxis determinada (tantoletras como numero), esto es porque los países tienendiferentes números de teléfono.

<input type="tel" title="Mínimo 5 digitos Máx 10" pattern="[0-

9]{5,10}" placeholder="Teléfono" required><p/>

<input type="submit" value="Enviar">

Page 4: etiqueta input HTML5

Esta entrada de datos se utiliza para especificar una

dirección web. Se muestra como un simple campo de

texto normal. Esta entra se creo para optimizar la

entrada de direcciones web en las pantallas táctiles

con una barra(/) y una tecla de método

abreviado(.com) en los teclados de los dispositivos.

<input type="url" placeholder="Url">

<input type="submit" value="Enviar">

Page 5: etiqueta input HTML5

El tipo de entrada de datos Search(type=“search”), proporciona un campo debúsqueda, es muy parecido al (type=“text”),enestos momentos solo crome y safari proporcionanun botón para borrado del campo.

<input type="search" placeholder="buscar...">

<input type="submit" value="Go"></p>

Page 6: etiqueta input HTML5

La entrada <input type=“email”> se utiliza para campos quedeben contener una dirección de correo electrónico. Aligual que search en los dispositivos táctiles el tecladodetecta que es un correo y necesita los botones (/), (.com)(@).

<form>

E-mail:

<input type="email" name="email">

</form>

Page 7: etiqueta input HTML5

La entrada <input type= “datetime”>

permite al usuario seleccionar una fecha

y hora (con la zona horaria).

Page 8: etiqueta input HTML5

El <input type = “date”> se utiliza para campos deentrada que deben contener una fecha.Dependiendo el navegador que utilicemos nosaparecerá las flechas para cambiar la fecha y la Xpara borrar.(solo soportados por googleChrome,Safari y Opera).

<form>

Fecha:

<input type="date" name=“fecha">

</form>

Page 9: etiqueta input HTML5

La entrada <input type =“mes”> permite al

usuario seleccionar un mes y el año. Al

igual que en la entrada Date los

navegadores soportados son los mismos.

<input type="month" name="month">

<input type="submit">

GoogleChrome

Firefox

Page 10: etiqueta input HTML5

La entrada <input type = "semanas"> permiteal usuario seleccionar una semana y año.Seguimos con el mismo problema con elsoporte de navegadores.

Selecciona una semana:

<input type="week" name="week">

<input type="submit">

GoogleChrome

Firefox

Page 11: etiqueta input HTML5

El <input type=“time”> permite al usuario seleccionar

una hora (sin zona horaria). Los problemas con los

soportes en los navegadores sigue afectando.

Selecciona una hora:

<input type="time" name="time">

<input type="submit">

GoogleChrome Firefox

Page 12: etiqueta input HTML5

El <input type = "datetime local"> permite alusuario seleccionar una fecha y hora (sin zonahoraria). Al igual que los anteriores losformularios de hora y fecha cambian endiferentes navegadores.

(Fecha y Hora):

<input type="datetime-local" name=“fecha-hora">

<input type="submit" >

GoogleChrome

Firefox

Page 13: etiqueta input HTML5

El tipo number <input type=“number”> proporcionauna entrada de dato para agregar un numero.Normalmente se trata de un cuadro donde sepuede escribir un número o hacer clic en lasflechas arriba y abajo para seleccionarlo.

Cantidad (de 1 a 5):

<input type="number" name="cantidad" min="1" max="5">

<input type="submit">

GoogleChromeFirefox

Page 14: etiqueta input HTML5

El <input type = “range"> se utiliza para

campos de entrada que deben

contener un valor dentro de un rango.

Votación (1 a 10):

<input type="range" name="votos" min="0" max="10">

<input type="submit">

GoogleChrome Firefox

Page 15: etiqueta input HTML5

El <input type = "color"> se utiliza para

campos de entrada que deben

contener un color.

Selecciones su color favorito:

<input type="color" name="favcolor" value="#ff0000">

<input type="submit">