Friday 8 May 2015

ionic inputs

Text

First up is the Text Input, the most common input type used. The code is pretty standard, and if you’re used to web development this input isn’t anything new. This is also the fallback if a device does not support a certain HTML input type.


 <label class="item item-input">
  <span class="input-label">Username</span>
  <input type="text">
</label>


Email

The Email Input should be used anytime you require a user to enter an email address. It’s important to take advantage of this input type because it offers a much smoother keyboard experience, displaying the @ and . characters within the initial keypad for quicker typing.


 <label class="item item-input">
  <span class="input-label">Email</span>
  <input type="email">
</label>



Tel

The Tel Input is a very unknown and underused input type. It displays a full numeric keypad, which makes for a great user experience when all that is required from the user is numbers. Take advantage of this one!


 <label class="item item-input">
  <span class="input-label">Telephone</span>
  <input type="tel">
</label>


Search

The Search Input doesn’t do anything too different from the text input except change the standard “go” button to read “search” instead.


<label class="item item-input">
  <i class="icon ion-search placeholder-icon"></i>
  <input type="search" placeholder="Search">
</label>



Number

The Number Input is another way to offer numbers for your users. The difference between the number input and the tel input is that also offers easy access to special characters and symbols. However, if you only need numbers entered, it’s best to stick with the tel input.



<label class="item item-input">
  <span class="input-label">Number</span>
  <input type="number">
</label>



Date

The Date Input should be utilized for when a user is asked to enter the month, day, and year. The mobile keyboard will offer a nice interactive panel for easy entering.


<label class="item item-input">
  <span class="input-label">Date</span>
  <input type="date">
</label>


Month

The Month Input will trigger a keyboard experience similar to the date input, however it leaves out the “day” option. Use this input when your user only needs to enter the month and year. A perfect example would be for taking credit card expiration dates.


 <label class="item item-input">
  <span class="input-label">Month</span>
  <input type="month">
</label>


Password

The Password Input is another commonly used input in normal web development. It hides the characters so nobody else can see what the user is typing.



 <label class="item item-input">
  <span class="input-label">Password</span>
  <input type="password">
</label>


No comments:

Post a Comment