HTML5, Elemento Input – Parte 1

• dirname: Este atributo no es nuevo en HTML5, sin embargo este atributo nos permite cambiar la dirección del ingreso de texto ya sea de derecha a izquierda o de izquierda a derecha que es lo que normalmente utilizamos en el idioma occidental.

<form action="addcomment.cgi" method=post>
		 <p>
		 <label>Comment: <input 	 type=text 	 name="comment" dirname="comment.dir" required>
		 </label></p>
		 <p>
		 <button name="mode" type=submit value="add">Post Comment</button></p> </form>

• list: Este atributo es nuevo en HTML5 y el mismo nos da la posibilidad de especificar el id de un elemento datalist que pudiera asignar valores a este elemento.

<label>Homepage: <input name=hp type=url list=hpurls></label> 		 <datalist id=hpurls>
		 <option value="http://www.google.com/" label="Google">
		 <option value="http://www.reddit.com/" label="Reddit">
		 </datalist>

• maxlength: Otro viejo conocido de HTML, no es nuevo sin embargo es de mucha ayuda ya que nos permite limitar el máximo número de caracteres que acepta el input, un ejemplo es cuando aceptamos códigos de 3 letras, colocamos este atributo con valor 3 y al intentar ingresar una cuarta letra no se escribiría simplemente.

<input name=status maxlength=140>

• pattern: Nuevo en HTML5 nos permite ingresar patrones de expresión regular con lo que podemos agregar un nuevo nivel de validación sin utilizar lenguajes adicionales.

<label> Part number:
		 <input pattern="[0-9][A-Z]{3}" name="part" title="A part number is a digit followed by 	 three uppercase letters."/>
		 </label>

• placeholder: Nuevo en HTML5, es una ayuda visual permitiéndonos ingresar un texto que saldrá dentro del input text diciendo una pequeña ayuda para el usuario, por ejemplo si un input text es para el ingreso de nombre y apellido, podríamos colocar de placeholder “ingrese nombre y apellido separado por espacio”, por supuesto ajustando los estilos para que todo se vea estéticamente correcto.

<p>
		 <label>Name: <input type="text" name="fullname" placeholder="John Ratzenberger">
		 </label>
		 </p>

• readonly: Este atributo no es nuevo en HTML5, nos permite hacer que el usuario no pueda ingresar datos ni editar el contenido del campo que tenga este atributo.

<input required name="3.pid" value="" pattern="[A-Z0-9]+">

• required: Nuevo en HTML5, este atributo nos permite indicar, si el input está vacío no se haga un submit del formulario aún, forzando así la obligatoriedad de su llenado, de esta forma subimos otro nivel de validación.

<p>
		 <label for="username">E-mail address:</label>
		 <input id="username" type=email required name=un>
		 </p>

• size: Nos ayuda a especificar el ancho del elemento input, este atributo no es nuevo, sin embargo es muy importante ya que nos ayuda a dar una mejor visual del texto que debe ingresar el usuario, además de ayudarnos a nivel estético a crear campos input homogéneos, al poder colocarlos todos de un ancho superior al que se trae por defecto.

<input required name="3.pid" value="" size = "10" pattern="[A-Z0-		 9]+">

• value: No es nuevo en HTML5, este atributo nos permite colocar valores a un input text, es diferente al placeholder ya que lo que esté en value asignado al hacer submit si se enviaría como contenido del elemento, es bastante utilizado para llenar un formulario con contenido que se trae de base de datos cuando usamos un lenguaje de servidor.

		 <input required name="3.pid" value="20" size = "10" >