Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Nuevos inputs en HTML5
#1
Nuevos inputs

Search – Sirve para un campo de búsqueda.
Number – Para campo numérico.
Range – Mostrará algo así como una "recta" en la que tu estableces un rango.
Date, datetime, week, month – Campo para fecha
Tel, email, url – Ya sabrán

Search

Código:
<input type="search" autofocus placeholder="search" name="nombre">

En input type estamos declarando el tipo de input, luego con Autofocus significa que al cargar la página, se autoseleccionará este campo.

El placeholder es el texto que aparecerá en el campo inactivo, de modo que cuando lo seleccionemos pues se quedará en blanco
Y en name, le asignamos cualquier nombre al campo

Number

Código:
<input type="number" min="10" max="80" step="10" placeholder="numero" name="nombre">

Como dijimos, input type declara el tipo de input, min declara el número mínimo de caracteres, max el numero máximo, placeholder y name ya lo habíamos dicho.

Range
Código:
<input type="range" min="10" max="80" placeholder="range" name="nombre">

Date

Código:
<input type="datetime">

Se puede cambiar datetime por date, datetime-local, time, week o month

Tel, email, url

Código:
<input id="input" name="input" type="email" />
Se puede cambiar email por tel o url

Atributo requerido

Ahora los formularios permiten el atributo ‘required‘ para especificar que un campo es requerido. Esto significa que los datos del formulario no serán enviados si el campo marcado como requerido está vacío. Puedes utilizar este atributo de dos formas:

Código:
<input type="text" name="Input1" required>
O
Código:
<input type="text" name="Input1" required="required">

El atributo placeholder
Este atributo permite rellenar el campo con un valor predeterminado y una vez que el usuario hace clic en el campo este valor desaparece. Por el momento, este atributo solo sirve en algunos navegadores.

Código:
<input name="search" type="search" placeholder="Buscar" />

Uso de expresiones regulares
Si deseas que en un campo de un formulario solo se puedan escribir solo un número máximo de caracteres, o solo mayúsculas, etc., esto lo puedes hacer mediante expresiones regulares utilizadas directamente en el código HTML:

Código:
<form action="" method="post">
<label for="username">Nombre de Usuario: </label>
<input type="text"
name="username"
id="username"
placeholder="4 <> 10"
pattern="[A-Za-z]{4,10}"
required>
<button type="submit">Enviar </button>
</form>
#2
Este es lo primero de Html 5 que voy aprendiendo.


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  [Aporte] Libro html5 De distribucion libre gassip 5 351 04-01-2016, 01:27 PM
Último mensaje: Taquion
  [Tutorial] jQuery HTML5 Form Plugin - jQuery Form Plugin luis.ml 0 231 16-08-2015, 02:02 AM
Último mensaje: luis.ml
  Formulario de inicio de session con html5 luis.ml 0 1,097 16-08-2015, 12:52 AM
Último mensaje: luis.ml
  Como hacer un menu horizontal con html5 y css3 torgar22 4 669 16-12-2014, 02:07 PM
Último mensaje: Demozz
  HTML5: Cómo crear una barra de progreso nativa con estilo imgur 0 344 19-11-2014, 11:17 PM
Último mensaje: imgur
  Cómo hacer un formulario con validación en HTML5 imgur 0 358 19-11-2014, 10:24 PM
Último mensaje: imgur
  Menu HTML5 - CSS3 gamesd 8 871 27-10-2013, 02:20 PM
Último mensaje: ilopezbdn
  CURSO HTML5 ONLINE billyjac 6 970 19-10-2013, 03:12 AM
Último mensaje: tyler
  5 Nuevas Plantillas HTML5 y CSS3 lukas 13 2,541 12-09-2013, 06:40 PM
Último mensaje: lyo21
  [Tutorial] Estructura completa HTML5 HILARION 33 3,374 11-09-2013, 11:38 PM
Último mensaje: Dark Neo



Usuarios navegando en este tema: 1 invitado(s)