Semantic-UI 表单 HTML 选择内容

Semantic-UI 是一个现代化的前端框架，它提供了许多 UI 组件和样式，可以简化前端开发。其中，它也提供了表单组件和相关样式，本篇文章主要介绍如何在表单中选择内容。

1. 下拉菜单

下拉菜单（Dropdown）是常用的表单选择组件，Semantic-UI 提供了丰富的下拉菜单样式。下面是一个简单的例子：

<div class="ui selection dropdown">
    <input type="hidden" name="gender">
    <i class="dropdown icon"></i>
    <div class="default text">Gender</div>
    <div class="menu">
        <div class="item" data-value="male">Male</div>
        <div class="item" data-value="female">Female</div>
    </div>
</div>

以上代码使用了 ui selection dropdown 类来定义下拉菜单。input 标签的 type 属性为 hidden，可以隐藏下拉菜单的选项。i 标签是下拉菜单的图标，div 标签用于显示默认的提示文字 Gender。menu 类定义了下拉菜单的选项列表，item 类定义了每个选项。其中，data-value 属性用于指定选项的值，可以在表单提交时使用。

2. 复选框

复选框（Checkbox）是另一种常用的表单选择组件。Semantic-UI 提供了多种复选框样式。下面是一个简单的例子：

<div class="ui checkbox">
    <input type="checkbox" name="fruit[]" value="apple">
    <label>Apple</label>
</div>
<div class="ui checkbox">
    <input type="checkbox" name="fruit[]" value="banana">
    <label>Banana</label>
</div>

以上代码使用了 ui checkbox 类来定义复选框。input 标签的 type 属性为 checkbox，name 属性为 fruit[]，可以用于处理表单数据。label 标签用于显示选项名称。

3. 单选框

单选框（Radio）也是一种常用的表单选择组件。Semantic-UI 提供了多种单选框样式。下面是一个简单的例子：

<div class="grouped fields">
    <div class="ui radio checkbox">
        <input type="radio" name="color" value="red">
        <label>Red</label>
    </div>
    <div class="ui radio checkbox">
        <input type="radio" name="color" value="green">
        <label>Green</label>
    </div>
    <div class="ui radio checkbox">
        <input type="radio" name="color" value="blue">
        <label>Blue</label>
    </div>
</div>

以上代码使用了 grouped fields 类来将单选框组合在一起。ui radio checkbox 类定义了单选框的样式。input 标签的 type 属性为 radio，name 属性为 color，可以用于处理表单数据。label 标签用于显示选项名称。

4. 开关

开关（Toggle）是一种常用的表单选择组件，可以用于开关功能。Semantic-UI 提供了多种开关样式。下面是一个简单的例子：

<div class="ui toggle checkbox">
    <input type="checkbox" name="toggle">
    <label>Toggle</label>
</div>

以上代码使用了 ui toggle checkbox 类来定义开关的样式。input 标签的 type 属性为 checkbox，name 属性为 toggle，可以用于处理表单数据。label 标签用于显示开关的名称。

5. 结束语

以上是 Semantic-UI 表单 HTML 选择内容的介绍。通过上述内容，你应该可以使用 Semantic-UI 快速构建表单，并提供美观的选择组件。如果你需要更多的表单组件，可以查看 Semantic-UI 官方文档。