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>
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>
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>
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>
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>
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>
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>
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