12、Semantic-UI之输入框

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标签下，但是编写这些样式可以根据实际业务需求进行设置。