Semantic UI 之输入框 input_semantic ui input-CSDN博客

本文链接：https://blog.csdn.net/lianghecai52171314/article/details/107882114

第一步：创建项目

添加JQuery和Semantic UI包、创建input.html页面：
在这里插入图片描述

第二步：container.html页面

在container.html页面中引入样式文件和JS文件

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>按钮</title>
        <link rel="stylesheet" href="semantic-ui/semantic.min.css">
        <script type="text/javascript" src="js/jquery3.3.1.js"></script>
        <script type="text/javascript" src="semantic-ui/semantic.min.js"></script>
    </head>
    <body>
    </body>
</html>

接下来在body中按下面所示添加代码并在网页中查看效果：

输入框的样式

<h2>输入框的样式</h2>
<!--标准输入框-->
<div class="ui input">
    <input type="text" placeholder="标准输入框">
</div>
<br>
<!--聚焦输入框-->
<div class="ui focus input">
    <input type="text" placeholder="聚焦输入框">
</div>
<br>
<!--禁用输入框-->
<div class="ui disable input">
    <input type="text" placeholder="禁用输入框">
</div>
<br>
<!--没有边框的输入框-->
<div class="ui transparent input">
    <input type="text" placeholder="透明输入框">
</div>

效果：
在这里插入图片描述

输入框的大小

<h2>输入框的大小</h2>
<div class="ui mini input">
    <input type="text" placeholder="迷你入框">
</div>
<br>
<div class="ui small input">
    <input type="text" placeholder="小输入框">
</div>
<br>
<div class="ui input">
    <input type="text" placeholder="标准输入框">
</div>
<br>
<div class="ui large input">
    <input type="text" placeholder="输入框">
</div>
<br>
<div class="ui big input">
    <input type="text" placeholder="大输入框">
</div>
<br>
<div class="ui huge input">
    <input type="text" placeholder="巨大输入框">
</div>
<br>
<div class="ui massive input">
    <input type="text" placeholder="最大输入框">
</div>

效果：
在这里插入图片描述

输入框的组合

<h2>输入框的组合</h2>
    <div class="ui error input">
        <input type="text" placeholder="错误">
    </div>
    <br>
    <div class="ui icon input">
        <input type="text" placeholder="账号">
        <i class="user icon"></i>
    </div>
    <br>
    <div class="ui left icon input">
        <i class="lock icon"></i>
        <input type="text" placeholder="密码">
    </div>
    <br>
    <div class="ui loading icon input">
        <input type="text" placeholder="查找">
        <i class="search icon"></i>
    </div>
    <br>
    <div class="ui labeled input">
        <label for="age" class="ui label">年龄</label>
        <input type="text" placeholder="带标签的输入框" id="age">
    </div>
    <br>
    <div class="ui right labeled input">
        <div class="ui label">单价</div>
        <input type="text" placeholder="324" id="price">
        <label for="price" class="ui label">/公斤</label>
    </div>
    <br>
    <div class="ui left icon right labeled input">
        <i class="tags icon"></i>
        <input type="text" placeholder="带图标的输入框" id="hobby">
        <label for="hobby" class="ui label">爱好</label>
    </div>
    <br>
    <div class="ui action input">
        <input type="text" placeholder="带行为的输入框">
        <button class="ui button">搜索</button>
    </div>