Marcofbb Noticias y Artículos Webmasters



Publicidad marcored

Nuevos inputs en HTML5

  • 05/04/2011
  • 10:46 pm
  • marcofbb

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

<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

<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

<input type="range" min="10" max="80" placeholder="range" name="nombre">

Date

<input type="datetime">

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

Tel, email, url

<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:

<input type="text" name="Input1" required>

o

<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.

<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:

<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>

Hilo donde están todos los artículos para aprender HTML5

Share

¿Necesitas ayuda? o ¿Asesoramiento webmaster? Registrate en nuestro foro de consultas

Posts Relacionados

Total de Comentarios: 5

Avatar
manuel luna
09/04/2011
4:09 pm

esta chido esto de los formulario reduce mucha escritura de codigo con javascript

Avatar
23/04/2011
12:48 am

[...] de nuevo en HTML5 Parte 2: Estructura básica HTML5 Parte 3: Estructura completa HTML5 Parte 4: Nuevos inputs en HTML5 Parte 5: Etiqueta de Audio y Videos [...]

Avatar
07/09/2011
9:30 am

[...] (alert) borramos el dato ingresado en el formulario para que ingrese otro. Cuando se estandarice HTML 5, esto será aún más fácil. Una advertencia: si el cuadro de texto queda vacío y el usuario envía, se mostrará como si [...]

Avatar
12/04/2012
9:39 pm

[...] 3 comentarios [...]

Avatar
ola
28/07/2013
12:20 am

olle pero en ke parte del codigo se pone despues de ke olle dinos yo soy novato osea ke pedo eso si es egoismo al compartir o no aserlo bien d ke sirve tanto show de ke sirve ke compartas algo si nno lo aras en verdad pss mejor no lo agas


Enviar Comentario

(*)

(*)