Cargando

Ir a contenido

X

 


HTML5, Elemento Input – Parte 1

En esta primera parte del tutorial nos concentraremos en describir todas las características del elemento input.


Escrito por sep 02 2013 09:24


Uno de los elementos más importantes dentro de un documento HTML es el elemento input ya que es la principal fuente de alimentación que tenemos del usuario, en este tutorial veremos un poco más a fondo como trabajar con este elemento y las características que posee, así como también los atributos que podemos utilizar a partir de HTML5.

Input Text

El input text, es la forma más básica del elemento input, nos permite capturar texto plano alfanumérico y cualquier carácter especial, esto aunque de entrada no está mal, a veces necesitamos filtrar un poco más para obtener los datos que realmente necesitamos.
Veamos los atributos especiales que podemos utilizar con este elemento cuando estamos trabajando como tipo text.
  • 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" >

En la siguiente parte del tutorial ya veremos algunos ejemplos prácticos de como utilizar algunos de estos atributos.

Actrualización: Parte2 de este Tutorial
¿Te ha gustado y ayudado este Tutorial?
Puedes premiar al autor pulsando este botón para darle un punto positivo


AYUDA A MEJORAR ESTE TUTORIAL!

¿Quieres ayudarnos a mejorar este tutorial más? Puedes enviar tu Revisión con los cambios que considere útiles. Ya hay 0 usuario que han contribuido en este tutorial al enviar sus Revisiones. ¡Puedes ser el próximo!


Tutoriales Relacionados



Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!
-
VOTA
5
0%
4
0%
3
0%
2
0%
1
0%

  Información

  •   Publicado sep 02 2013 09:24
  •   Actualizado sep 02 2013 09:38
  •   Visitas 2.1K
  •   Nivel
    Intermedio