Ir al contenido principal

Curso HTML 5: Nuevos atributos para formularios. Parte II

Curso HTML 5: Nuevos atributos para formularios. Parte II

En anteriores entradas, pudimos ver la primera parte de los nuevos atributos para formularios que HTML5 trae consigo. En esta entrada vamos a descubrir los que nos faltan. Estos atributos permiten una mejor optimización y control de datos.

A continuación puedes observar un listado detallado y su soporte en diferentes navegadores:

Nuevos atributos para formularios

<input> Atributo formtarget Indica donde mostrar la respuesta que recibiremos después de enviar el formulario.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<form action="validacion.php">
  Nombre: <input type="text" name="fname"><br>
  Apellidos: <input type="text" name="lname"><br>
  <input type="submit" value="Enviar">
  <input type="submit" formtarget="_blank"
  value="Enviar a una nueva página">
</form> 

<input> Atributos height y width Asignamos una altura y un ancho especifico al <input>. Estos atributos solo son utilizados para <input type="image">

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<input type="image" src="img_submit.gif" alt="Imagen" width="48" height="48"> 

<input> Atributo list Este atributo hace referencia a un elemento <datalist> que contiene opciones predefinidas para un elemento <input>.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<input list="navegadores">

<datalist id="navegadores">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>  

<input> Atributos min y max Especificamos un valor mínimo y máximo para un elemento <input>. Funciona con los siguientes tipos de input: number, range, date, datetime, datetime-local, month, time y week.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


Introduce una fecha anterior a 1980-01-01:
<input type="date" name="bday" max="1979-12-31">

Introduce una fecha posterior a 2000-01-01:
<input type="date" name="bday" min="2000-01-02">

Cantidad (entre 1 y 5):
<input type="number" name="cantidad" min="1" max="5">  

<input> Atributo multiple Cuando está presente, permitimos asignar más de un valor en un elemento <input>.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


Selecciona imágenes: <input type="file" name="img" multiple> 

<input> Atributo pattern Especifica una expresión regular para que el elemento <input> valide el contenido. Funciona con los siguientes tipos de input: text, search, url, tel, email, and password. Es conveniente usar el atributo title para ayudar al usuario.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


Teléfono: <input type="text" name="telefono" pattern="[0-9]{9}" title="Nueve dígitos">

<input> Atributo placeholder Aplicamos un texto descriptivo dentro del <input> que desaparecerá cuando introduzcamos un valor.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<input type="text" name="fname" placeholder="Nombre">

<input> Atributo required Cuando está presente, especifica que dicho campo debe ser completado antes de mandar el formulario. Funciona con los siguientes tipos de input: text, search, url, tel, email, password, date pickers, number, checkbox, radio y file.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


Usuario: < input type="text" name="usrname" required>

<input> Atributo step Este atributo especifica un intervalo de números para un elemento <input>. Si step="3", los números pueden ser -3, 0, 3, 6, etc. Puede combinarse con los atributos min y max. Funciona con los siguientes tipos de input: number, range, date, datetime, datetime-local, month, time and week.

  Chrome   Internet Explorer   Firefox   Safari   Opera

Ejemplo


<input type="number" name="puntos" step="3">

Comentarios

Entradas populares de este blog

Efecto destello CSS3

En estas fechas tan señaladas a todos nos invade el espíritu navideño, y con él las ganas de decorar nuestra casa, nuestra habitación y por qué no, nuestra web. Por este motivo se me ocurrió crear un efecto destello de luz mediante CSS3 e imágenes para dar la calidez necesaria que nuestra web se merece. El efecto es sencillo, consiste en dos imágenes (una de fondo y otra que realizará el efecto) y una animación mediante CSS3. El resultado sería el siguiente: Podemos duplicar cuantas veces queramos la estrella y posicionarla donde mejor nos venga. A continuación os dejo el fragmento de código HTML y CSS para que lo probéis y hagáis las modificaciones que sean necesarias. HTML <div class="efectos"> <img src="directorio/imagen-01.jpg" alt="Navidad" class="background-navidad"> <img src="directorio/imagen-02.jpg" class="destello destello-01"> <img src="directorio/imagen-03.jpg" class=

Placeholder y su uso en HTML5 y CSS3

¿Qué es Placeholder? Placeholder es un texto descriptivo que incluimos dentro de la etiqueta <input> , cuando introduzcamos un valor se sustituirá automáticamente. Sintaxis HTML Su sintaxis es de lo más simple, dentro de la etiqueta <input> añadimos el atributo placeholder incluyendo el texto descriptivo. <input type="text" name="example" placeholder="Ejemplo de Placeholder"> Debajo podemos ver un ejemplo del código anterior. Soporte en navegadores A continuación podemos ver una lista con el soporte en los principales navegadores :   Chrome 4+   Internet Explorer 10+   Firefox 4+   Safari 5+   Opera 11.5+ Sintaxis CSS Mediante CSS podemos dar estilo al atributo Placeholder. Hay que tener en cuenta que la sintaxis no está estandarizada, por lo que en un futuro puede que cambie. ::-webkit-input-placeholder { color: #2c3e50; } ::-moz-placeholder { /* Firefox 19+ */ color:

Curso HTML 5: Introducción

¿Qué es HTML5? HTML son las siglas de HyperText Markup Language (lenguaje de marcas de hipertexto). Este nombre hace referencia al estándar de código y estructura básica con la que vamos a trabajar. El número 5 hace referencia a la quinta versión de este estándar, que trae consigo novedades y mejoras frente a sus predecesores. Una de las mejoras más significativas son las nuevas etiquetas que aportan un significado semántico , y por lo tanto tendrán un valor añadido en cuanto al posicionamiento web . Hay que tener presente que aún está en una fase experimental. Navegadores obsoletos como IE7 no van a poder interpretar correctamente muchas de las nuevas funcionalidades. En la siguiente imagen podemos observar las diferencias entre HTML5 y HTML4/XHTML : De un vistazo podemos percatarnos como con HTML5 obtenemos una estructura más limpia y estandarizada, mediante que con HTML4/XHTML debíamos aplicarles identificadores o clases a todas las cajas y careciamos de un signifi