HTML5 APP开发之Input输入框

Input输入框控件，应该说无论是B/S模式开发，还是C/S模式开发，还是APP开发，都是常用的控件。那么，对于HTML5 APP开发而言，Input输入框控件，又有多少种形状呢，下面将详细介绍。

掌握Input输入框技能，将会提升开发效率。同时，也对开发时，应该选择哪种类型，可以给出最佳方案。

工具/原料

1
空白的Input输入框控件。
代码如下：<input id="test" value=""/>
这是最常见，也是最常用的写法。
2
带提示文件的Input输入框控件。
代码如下：<input id="test" value="" placeholder="提示内容"/>
多了一个placeholder元素，该元素的意思是：当点击输入框时，提示的内容会消失。
3
带图标的Input输入框控件。
代码如下：
<div class="mui-card">
<div class="mui-input-row mui-icon mui-icon-person mui-left" style="padding: 5px;">
<input type="person" class="mui-input-clear mui-input" id="test" name="test" style="border: none;">
</div>
</div>
效果比带文字的输入框更丰富了。
3
此文章非法爬取自百度经验
4
带图标+文字的Input输入框控件。
代码如下：
<div class="mui-input-row mui-search">
<input type="search" class="mui-input-speech mui-input-clear" placeholder="带语音识别的搜索框">
</div>
效果是不是很酷。
5
Lable+图标+文字的Input输入框控件。
代码如下：
<form class="mui-input-group">
<div class="mui-input-row"> <label>Input</label> <input type="text" class="mui-input-speech mui-input-clear" placeholder="语音输入"> </div></form>
6
最后，我们一起看看所有Input形状的输入框对比效果是怎样的。以便在选择时，可以做到心中有数。
END