12.1 基础输入框
在Semantic-UI中可以定义多个样式的输入框,可以将图片与输入框结合,输入提示信息文字,设置输入框的状态。
示例:定义基础输入框
用户名:
<div class="ui input"><input type="text" placeholder="请输入你的用户名!" name="username" id="username" /></div>
示例:定义输入框的状态
用户名:<div class="ui disabled input"><input type="text" placeholder="请输入你的用户名!" name="username" id="username" /></div>
12.2 图标与输入框结合现实
示例:定义图标输入框
<div class="ui left icon input loading">
<input type="text" name="" id="" placeholder="加载中...">
<i class="search icon"></i>
</div>
示例:定义输入框与标签结合现实
<div class="ui labeled input">
<div class="ui label">
http://
</div>
<input type="text" placeholder="请输入url..." />
</div>
12.3 输入框的颜色反转与输入框的大小
示例:输入框颜色反转 inverted
<div class="ui inverted labeled input">
<div class="ui label">
http://
</div>
<input type="text" placeholder="请输入url..." />
</div>
示例:定义不同大小的输入框
<div class="ui tiny input">
<input type="text" placeholder="请输入...">
</div>
<div class="ui small input">
<input type="text" placeholder="请输入...">
</div>
<div class="ui medium input">
<input type="text" placeholder="请输入...">
</div>
12.4 小结
输入框的编写必须在input标签下,但是编写这些样式可以根据实际业务需求进行设置。