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>
效果比带文字的输入框更丰富了。
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形状的输入框对比效果是怎样的。以便在选择时，可以做到心中有数。
