HTML5 APP开发之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>

效果比带文字的输入框更丰富了。

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