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.
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">
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>.
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.
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>.
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.
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.
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.
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.
Ejemplo
<input type="number" name="puntos" step="3">
Comentarios
Publicar un comentario