Comenzamos con los elementos de los formularios, y como no puede ser de otra manera lo vamos a hacer por medio de la etiqueta label en Ionic.

Los formularios son la forma con la que el usuario interactúa con la aplicación, por lo que se convierten en parte muy importante de la misma y se deben de controlar de la mejor forma posible.

Utilizando los Inputs

La mejor forma de insertar formularios es por medio de las clases list e item que ya conocemos. Esto es debido a que las aplicaciones normalmente tendrán más de un elemento en el formulario, y de esta forma, se adapta perfectamente al formato de lista.

En el ejemplo de más abajo podemos observar como el elemento item de la lista es una etiqueta label.

Aunque podemos utilizar cualquier otro elemento, la etiqueta label nos permite introducir fácilmente en su interior los inputs, que pueden tener indicadores tipo placeholder para ayudar al usuario a distinguir los lugares de entrada.

<div class="list">
   <label class="item item-input">
   <input type="text" placeholder="Placeholder 1">
   </label>

   <label class="item item-input">
   <input type="text" placeholder="Placeholder 2">
   </label>
</div>

La etiqueta Label

Se pueden introducir marcadores dentro del elemento por medio del uso de la clase item-input y con la etiqueta span:

<div class="list">
    <label class="item item-input">
      <span class="input-label">Label 1</span>
      <input type="text" placeholder="Placeholder 1">
    </label>

    <label class="item item-input">
      
      <input type="text" placeholder="Placeholder 2"><span class="input-label">Label 2</span>
    </label>
</div>

Si ponemos el span detras del input, el marcador aparecerá a la derecha.

Apilando etiquetas

Puede resultar que no nos interese que el span se encuentre al lado de la entrada de texto, y que queramos que se encuentre arriba, para ello debemos de utilizar la clase item-stacked-label dentro de la etiqueta label.

Si ponemos el marcador después del input aparecerá debajo.

<div class="list">
    <label class="item item-input item-stacked-label">
      <span class="input-label">Label 1</span>
      <input type="text" placeholder="Placeholder 1">
    </label>

    <label class="item item-input item-stacked-label">
      <input type="text" placeholder="Placeholder 2">
      <span class="input-label">Label 2</span>
    </label>
</div>

Etiquetas flotantes

Podemos hacer también que las etiquetas span aparezcan cuando se empieza a escribir dentro del input, apareciendo por medio de una pequeña animación.

En el siguiente ejemplo podemos ver lo sencillo que es, utilizando la clase item-floating-label:

<div class="list">
   <label class="item item-input item-floating-label">
   <span class="input-label"t>Label 1</span>
   <input type="text" placeholder="Placeholder 1">
   </label>

   <label class="item item-input item-floating-label">
   <span class="input-label">Label 2</span>
   <input type="text" placeholder="Placeholder 2">
   </label>
</div>

Insertando elementos

Como llevamos viendo en la mayoría de los artículos de este tutorial, podemos insertar objetos cómo iconos, botones… dentro de nuestros elementos, y aquí no iba a ser menos.

Para hacerlo lo primero que tenemos que hacer es incluir en nuestra etiqueta que define el elemento, la clase item-input-inset

Al añadir elementos dentro del label, este se ajustará al tamaño de los elementos que contenga.

En el siguiente ejemplo vamos a introducir un botón fuera del label y un icono dentro del mismo, de esta forma podemos ir observado como funciona. Nótese que estamos utilizando un div para crear un item contenedor.

<div class="list">
   <div class="item item-input-inset">
      <label class="item item-input-wrapper">   
      <input type="text" placeholder="Placeholder 1">
      </label>
      <button class="button">button</button>
   </div>
   <div class="item item-input-inset">
      <label class="item item-input-wrapper">
      <i class="icon ion-edit placeholder-icon"></i>
      <input type="text" placeholder="Placeholder 2">
      </label>
   </div>
</div>

Con esto ya sabemos como funciona la etiqueta label en Ionic y podemos comenzar a crear formularios con diferentes apariencias según nuestras necesidades.

En las siguientes entradas iremos viendo muchos otros elementos de los formularios.