13、Semantic-UI之表格与表单

13.1 定义基础样式表格

  在HTML中可以通过table进行表格定义，在Semantic-UI中也可以通过class="ui table"定义表格。

示例：定义基础表格

<div class="ui container">
    <table class="ui table">
        <tr>
            <td>昵称</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>22</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>30</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>21</td>
        </tr>
        <tr>
            <td>小八</td>
            <td>27</td>
        </tr>
    </table>
</div>

示例：定义基础样式表格

<div class="ui container">
    <table class="ui celled table">
        <tr>
            <td>昵称</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>22</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>30</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>21</td>
        </tr>
        <tr>
            <td>小八</td>
            <td>27</td>
        </tr>
    </table>
</div>

示例：定义带标签的表格样式

<div class="ui container">
    <table class="ui celled table">
        <tr>
            <td><div class="ui green ribbon label">昵称</div></td>
            <td><div class="ui green ribbon label">年龄</div></td>
        </tr>
        <tr>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>22</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>30</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>21</td>
        </tr>
        <tr>
            <td>小八</td>
            <td>27</td>
        </tr>
    </table>
</div>

13.2 表格的状态

  在Semantic-UI中所有的状态都只有两种：active和disable。

示例：表格的状态使用

<div class="ui container">
    <table class="ui celled table">
        <tr>
            <td><div class="ui green ribbon label">昵称</div></td>
            <td><div class="ui green ribbon label">年龄</div></td>
        </tr>
        <tr class="active">
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr class="disabled">
            <td>李四</td>
            <td>22</td>
        </tr>
    </table>
</div>

示例：为表格设置高亮显示

<div class="ui container">
    <table class="ui selectable celled table">
        <tr>
            <td><div class="ui green ribbon label">昵称</div></td>
            <td><div class="ui green ribbon label">年龄</div></td>
        </tr>
        <tr>
            <td >张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>22</td>
        </tr>
    </table>
</div>

示例：为表格设置颜色

<div class="ui container">
<table class="ui blue selectable celled table">
    <tr>
        <td><div class="ui green ribbon label">昵称</div></td>
        <td><div class="ui green ribbon label">年龄</div></td>
    </tr>
    <tr>
        <td >张三</td>
        <td>25</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>22</td>
    </tr>
</table>
</div>

13.3 定义表单

  在网页开发中表单的定义是必不可少的。在Semantic-UI中表单的定义更加方便快捷。

示例：定义基础的表单

<div class="ui container">
    <form action="" method="post" enctype="multipart/form-data" class="ui form">
        <div class="field">
            <label for="name">姓名</label>
            <input type="text" name="name" id="name" placeholder="请输入你的姓名...">
        </div>
        <div class="field">
            <label for="name">年龄</label>
            <input type="text" name="age" id="age" placeholder="请输入你的年龄...">
        </div>
        <div class="field">
            <div class="ui checkbox">
                <input type="checkbox">
                <label>同意注册协议</label>
            </div>
        </div>
        <button class="ui green button">注册</button>
        <button class="ui red button">重置</button>
    </form>
</div>

示例：设置表单输入框的大小

<div class="ui container">
    <form action="" method="post" enctype="multipart/form-data" class="ui form">
        <div class="four wide field">
            <label for="name">姓名</label>
            <input type="text" name="name" id="name" placeholder="请输入你的姓名...">
        </div>
        <div class="four wide field">
            <label for="name">年龄</label>
            <input type="text" name="age" id="age" placeholder="请输入你的年龄...">
        </div>
        <div class="field">
            <div class="ui checkbox">
                <input type="checkbox">
                <label>同意注册协议</label>
            </div>
        </div>
        <button class="ui green button">注册</button>
        <button class="ui red button">重置</button>
    </form>
</div>

13.4 表单中其他标签的使用

  使用三种样式的复选框。

示例：第一种样式的复选框

    <div class="ui container">
        <form action="" method="post" enctype="multipart/form-data" class="ui form">
            <div class="inline filed">
                <div class="ui checkbox">
                    <input type="checkbox">
                    <label>签署协议</label>
                </div>
            </div>
        </form>
    </div>

示例：第二种样式的复选框-slider

<div class="ui container">
    <form action="" method="post" enctype="multipart/form-data" class="ui form">
        <div class="inline filed">
            <div class="ui slider checkbox">
                <input type="checkbox">
                <label>签署协议</label>
            </div>
        </div>
    </form>
</div>

示例：第三种样式的复选框-toggle

<div class="ui container">
    <form action="" method="post" enctype="multipart/form-data" class="ui form">
        <div class="inline filed">
            <div class="ui toggle checkbox">
                <input type="checkbox">
                <label>签署协议</label>
            </div>
        </div>
    </form>
</div>

示例：使用jQuery操作单选框

<div class="ui container">
    <form action="" method="post" enctype="multipart/form-data" class="ui form">
        <div class="inline fields">
            <label for="sex">性别</label>
            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio" name="sex" id="sex" />
                    <label>男</label>
                </div>
            </div>
            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio" name="sex" id="sex" />
                    <label>女</label>
                </div>
            </div>
        </div>
    </form>
</div>

示例：下拉列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Semantic UI </title>
    <!-- 使用CDN导入js和css 文件-->
    <link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.js"></script>
    <script>
        $(function () {
            $(".ui.dropdown").dropdown();
        })
    </script>
</head>
<body style="padding: 20px;">
    <div class="ui container">
        <form action="" method="post" enctype="multipart/form-data" class="ui form">
            <div class="field">
                <label>性别：</label>
                <div class="ui selection dropdown">
                    <i class="dropdown icon"></i>
                    <div class="default text">性别</div>
                    <div class="menu">
                        <div class="item">男</div>
                        <div class="item">女</div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

示例：定义文本域

<form action="" class="ui form">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</form>

13.5 小结

  表格和表单样式的使用。