comparte el articulo 

Creación de formularios con XHTML y CSS: tipos de input

Actualizado el 16/01/2012 < > 0 Comentarios

Resumen: Segunda parte de nuestro estudio sobre los formularios, en esta ocasión deslgozamos a los elementos de tipo input, etiqueta de uso más frecuente en formularios.

Como mencionábamos en el artículo anterior la existen tres etiquetas básicas para definir todos los elementos que toman parte en un formulario, “input”, “textarea” y “select”, en este artículo trataremos de estudiar a detalle la primera de estas etiquetas y analizar la definición de elementos mediante ella.

Etiqueta “input”

Esta etiqueta es la madre de todas, gracias a su uso podemos crear diferentes tipos de elementos de formulario, desde cajas de texto hasta botones radio, casillas de selección, entre otros. Todo esto es gracias a su atributo “type” de la etiqueta, ya que será el que nos va ayudar a especificar el tipo de campo y diferenciar su función del resto que utiliza “input” como etiqueta de declaración.

Existen 10 valores posibles para el atributo “type” del elemento “input”, estos definirán una función específica para el campo. El más común de estos valores es “text”, al dar este valor al atributo estamos indicando que el campo será una caja de texto que contendrá una línea sencilla.

Otros de los valores comunes son “password” que agrega una caja cuyo texto es protegido, es decir no se perciben los caracteres como tal, también encontramos el valor “checkbox” que sirve para crear casillas de selección, el valor “radio” crea botones de tipo radio generalmente utilizado para seleccionar una de varias opciones, y el valor “hidden” que oculta el campo para que no sea visible en la interfaz.

El resto de los valores que puede tomar el atributo son “submit” que crea un botón para mandar la información del formulario, “reset” que añade un botón que regresa todos los campos a su estado original, “file” que agrega la funcionalidad de elegir archivos, “image” que sirve para indicar las coordenadas donde se dio clic a una imagen y “button” que sirve para crear botones que no necesariamente tienen que mandar información.

Valor “text”

Este es el valor predeterminado de la etiqueta “input”, por lo que no es necesario especificarlo literalmente en el atributo. Su función es manejar piezas cortas de información textual, ya sea el nombre o apellido del usuario, un correo electrónico, algún número de tarjeta o de pago.

En conjunto con este valor podemos utilizar otros atributos como “maxlength”, el cual limita el número de caracteres que se pueden escribir en el cuadro de texto. Si por ejemplo quisiéramos una caja de texto en línea sencilla que únicamente permita incluir 6 caracteres definiríamos una línea como la siguiente en el código:

<input type="text" maxlength="10" />

También podemos incluir un valor por defecto en nuestra caja, si quisiéramos mostrar una palabra o incluir siempre el mismo valor para evitar que se olvide el llenado de este campo, para ello existe el atributo “value”. Si a nuestro campo declarado le queremos dar como valor predeterminado la palabra “La Webera” haremos lo siguiente:

<input type="text" maxlength="10" value="La Webera" />

Valor “password”

Este valor es muy similar a “text” con la única diferencia de que el texto se muestra de manera protegida, es decir veremos un conjunto de puntos negros en lugar de los caracteres que introducimos. La encriptación se hace con la intención de proteger la contraseña que el usuario esta introduciendo, de esa manera únicamente él sabrá que escribió en el campo y alguno que otro fisgón no podrá obtenerla a simple vista.

<input type="password" name="contrasena" maxlength="20" />

Valor “checkbox”

Este valor permite crear casillas de selección, las cuales son comúnmente utilizadas para indicar cuando un elemento es el adecuado o inadecuado, cuando se desea ignorar o resaltar alguna opción, o simplemente cuando se requiere hacer una selección múltiple.

Al momento de declarar este valor el campo input cambia de forma, ya no será una caja de texto, será un recuadro que podemos seleccionar y al dar clic sobre él un signo de correcto aparecerá. Al momento de enviar el formulario todas aquellas casillas que esten seleccionadas serán enviadas para su procesamiento, en cambio aquellas que no lo estén simplemente serán ignoradas.

Por defecto todas las casillas están deseleccionadas, en caso de que quieras que algunas aparezcan seleccinadas debes añadir el atributo “checked” de la siguiente manera:

<input type="checkbox" name="opcion" checked="checked" />

Si el elemento “input” no cuenta con un atributo “value” entonces lo que se enviará para procesarse es el “name”, pero en caso de contar con “value” esto será lo que el servidor recibirá para utilizarse.

Valor “radio”

Los botones de tipo radio son muy similares a las casillas de selección, pero a diferencia de estas, lo que se busca con estos elementos es que únicamente se seleccione una opción entre varias. Para ello se le da el mismo nombre a un grupo de botones radio y de esa manera cuando uno de los radios es seleccionado el resto se deselecciona automáticamente.

<input type="radio" name="pais" value="mexico" checked="checked" />
<input type="radio" name="pais" value="espana" />
<input type="radio" name="pais" value="chile" />

En esta ocasión el atributo “value” es totalmente necesario, ya que eso es lo que identificará cada opción.

Valor “hidden”

Para propósitos de interfaz este valor puede sonar algo absurdo o innecesario, pero para cuestiones de manejo de información y procesamiento del lado servidor puede ayudar mucho, ya que nos permite añadir información al formulario sin permitir que el usuario pueda observarla y por lo tanto modificarla.

<input type="hidden" name="numcliente" value="13456yui89" />

Esta información puede provenir del lado de Javascript o del propio HTML por lo que una vez que los cálculos necesarios son realizados el valor se agrega al campo “input” y la información se procesa después del lado servidor.

Valor “submit”

La manera más fácil y común de enviar la información que fue depositada en un formulario es a través de un botón de tipo “submit”. Este botón es creado mediante un elemento “input” con un valor de tipo “submit”, el cual cuando es presionado de la orden de enviar la información a la dirección indicada en el atributo “action” del elemento “form”.

El texto que veremos dentro de este botón variará según el navegador, ya que por defecto cada uno le da un valor distinto, por lo que es común utilizar un valor personalizado para definir dicho contenido. Si por ejemplo quisiéramos que el botón diga “Manda el formulario!” en vez del típico “Submit”, basta con hacer lo siguiente:

<input type="submit" value="Manda el formulario!" />

En el siguiente capítulo, veremos en detalle el uso de textarea y select en formularios.

Publicado el 13/01/2012, última actualización 16/01/2012.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño de paginas web

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras