Formularios, Text input, Textarea, Select y Submit con Onsen UI

Onsen UI cuenta con muchos componentes para formularios, en esta primera parte vamos a ver los básicos text input, textarea, select y submit.

Este articulo es la continuación del hilo que tenemos de Onsen UI, les invito a ver la Introduccion a Onsen UI.

Código

A continuación les muestro el código del formulario del ejemplo.

<form id="form1" name="form1">
<p>
<ons-input id="username" name="input1" modifier="underbar" placeholder="Input text" ></ons-input>
</p>
<p>
<ons-input id="username" name="input2" modifier="underbar" placeholder="Input text 2" ></ons-input>
</p>
<p>
<textarea class="textarea" rows="3" name="textarea1" placeholder="Textarea"></textarea>
</p>
<p>
<ons-select name="select1">
<option value="">- Sin opcion -</option>
<option value="basic">Basic</option>
<option value="material">Material</option>
<option value="underbar">Underbar</option>
</ons-select>
</p>
<p >
<input class="login-button button--large button" id="submit" type="submit" name="submit" value="Submit">
</p>
</form>

Como pueden ser es un formulario común y corriente, pero tenemos elementos nuevos por ejemplo ons-input y ons-select.

Ons-input

El componente ons-input sirve para mostrar los campos de texto normales, que podemos lograr con un  input normal.

<ons-input id="username" name="input1" modifier="underbar" placeholder="Input text" ></ons-input>

Ons-select

El componente ons-select es el clásico select. Donde colocamos las opciones dentro de elementos option.

<ons-select name="select1">
<option value="">- Sin opcion -</option>
<option value="1">Opcion 1</option>
<option value="2">Opcion 2</option>
<option value="3">Opcion 3</option>
</ons-select>

Después de crear el formulario tenemos un código javascript para el evento submit , obtenemos los valores del formulario usando serialize(), los mostramos en una alerta y después limpiamos los campos.

  ons.ready(function(){
    $("#form1").submit(function(e){
      e.preventDefault(); // Evitamos la recarga

      ons.notification.alert($(this).serialize()); // Mostramos en una alerta los valores serializados

      document.form1.input1.value = ""; // Limpiamos el input1
      document.form1.input2.value = ""; // Limpiamos el input2 
      document.form1.textarea1.value = ""; // Limpiamos el textarea1
      document.form1.select1.value = ""; // Limpamos el select1

    });
  });

Resultado

Este seria el resultado en el navegador.

Descargar

A continuación les dejo el link de descarga:

Link: https://drive.google.com/open?id=1-CTFCtyJ6qEls5HrBjUNGwg9xB2KZZYg

Espero les ayude.