Semantic-UI 表单字段所需的变化

Semantic-UI 是一个流行的前端框架，它提供了一套易于使用的 UI 组件库来构建漂亮的用户界面。在 Semantic-UI 中，表单也是一个重要的组件，因此了解表单字段所需的变化是非常重要的。

表单字段

常见的表单字段包括 input、select、radio、checkbox、textarea 等。Semantic-UI 提供了对这些字段的支持，同时提供了一些额外的功能和样式。下面将分别介绍每种字段的变化。

input

在 Semantic-UI 中，input 字段的变化主要包括大小、形状、图标、标签和错误提示。可以通过设置 input 字段的 class 来实现这些变化。

大小

使用 mini、small、large 和 big class 可以改变 input 字段的大小。例如：

<input type="text" class="ui mini input">
<input type="text" class="ui small input">
<input type="text" class="ui large input">
<input type="text" class="ui big input">

形状

使用 circular、transparent 和 inverted class 可以改变 input 字段的形状。例如：

<input type="text" class="ui circular input">
<input type="text" class="ui transparent input">
<input type="text" class="ui inverted input">

图标

使用 icon 和 left icon class 可以在 input 字段的左侧或右侧添加图标。例如：

<div class="ui icon input">
    <input type="text" placeholder="Search...">
    <i class="search icon"></i>
</div>
<div class="ui left icon input">
    <input type="text" placeholder="Email address">
    <i class="at icon"></i>
</div>

标签

使用 labeled 和 right labeled class 可以在 input 字段的左侧或右侧添加标签。例如：

<div class="ui labeled input">
    <div class="ui label">
        http://
    </div>
    <input type="text" placeholder="Your URL">
</div>
<div class="ui right labeled input">
    <input type="text" placeholder="Enter amount">
    <div class="ui label">
        .00
    </div>
</div>

错误提示

使用 error class 可以标记 input 字段为错误状态。例如：

<div class="ui error input">
    <input type="text">
</div>

select

在 Semantic-UI 中，select 字段的变化主要包括大小、多选、搜索、标签和错误提示。可以通过设置 select 字段的 class 来实现这些变化。

大小

使用 mini、small、large 和 big class 可以改变 select 字段的大小。例如：

<div class="ui mini 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="1">Male</div>
        <div class="item" data-value="0">Female</div>
    </div>
</div>
<div class="ui small selection dropdown">
    ...
</div>
<div class="ui large selection dropdown">
    ...
</div>
<div class="ui big selection dropdown">
    ...
</div>

多选

使用 multiple class 可以使 select 字段变为多选模式。例如：

<div class="ui selection dropdown multiple">
    <input type="hidden" name="skills">
    <i class="dropdown icon"></i>
    <div class="default text">Skills</div>
    <div class="menu">
        <div class="item" data-value="1">HTML</div>
        <div class="item" data-value="2">CSS</div>
        <div class="item" data-value="3">JavaScript</div>
    </div>
</div>

搜索

使用 search class 可以开启搜索功能。例如：

<div class="ui search selection dropdown">
    <input type="hidden" name="country">
    <i class="dropdown icon"></i>
    <div class="default text">Country</div>
    <div class="menu">
        <div class="item" data-value="cn">China</div>
        <div class="item" data-value="us">United States</div>
        <div class="item" data-value="jp">Japan</div>
    </div>
</div>

标签

使用 labeled 可以在 select 字段的左侧添加标签。例如：

<div class="ui labeled selection dropdown">
    <div class="ui label">
        Date
    </div>
    <input type="hidden" name="date">
    <i class="dropdown icon"></i>
    <div class="default text">Today</div>
    <div class="menu">
        <div class="item" data-value="today">Today</div>
        <div class="item" data-value="tomorrow">Tomorrow</div>
        <div class="item" data-value="this week">This Week</div>
    </div>
</div>

错误提示

使用 error class 可以标记 select 字段为错误状态。例如：

<div class="ui error 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="1">Male</div>
        <div class="item" data-value="0">Female</div>
    </div>
</div>

checkbox 和 radio

在 Semantic-UI 中，checkbox 和 radio 字段的变化主要包括大小、形状、标签和错误提示。可以通过设置这些字段的 class 来实现这些变化。

大小

使用 mini、tiny、small、large、big 和 huge class 可以改变 checkbox 和 radio 字段的大小。例如：

<div class="ui mini checkbox">
    <input type="checkbox">
    <label>Mini</label>
</div>
<div class="ui tiny checkbox">
    ...
</div>
<div class="ui small checkbox">
    ...
</div>
<div class="ui large checkbox">
    ...
</div>
<div class="ui big checkbox">
    ...
</div>
<div class="ui huge checkbox">
    ...
</div>

形状

使用 circular 和 slider class 可以改变 checkbox 字段的形状。例如：

<div class="ui circular checkbox">
    <input type="checkbox">
    <label>Check me</label>
</div>
<div class="ui slider checkbox">
    <input type="checkbox">
    <label>Slide me</label>
</div>

标签

使用 fitted 和 radio class 可以在 checkbox 和 radio 字段的左侧添加标签。例如：

<div class="ui fitted checkbox">
    <input type="checkbox">
    <label>Check me</label>
</div>
<div class="ui fitted radio checkbox">
    <input type="radio" name="fruit">
    <label>Apple</label>
</div>
<div class="ui fitted radio checkbox">
    <input type="radio" name="fruit">
    <label>Banana</label>
</div>
<div class="ui fitted radio checkbox">
    <input type="radio" name="fruit">
    <label>Orange</label>
</div>

错误提示

使用 error class 可以标记 checkbox 和 radio 字段为错误状态。例如：

<div class="ui error checkbox">
    <input type="checkbox">
    <label>Check me</label>
</div>

textarea

在 Semantic-UI 中，textarea 字段的变化主要包括大小、自适应高度和错误提示。可以通过设置 textarea 字段的 class 来实现这些变化。

大小

使用 mini、small、large 和 big class 可以改变 textarea 字段的大小。例如：

<div class="ui mini textarea">
    <textarea></textarea>
</div>
<div class="ui small textarea">
    ...
</div>
<div class="ui large textarea">
    ...
</div>
<div class="ui big textarea">
    ...
</div>

自适应高度

使用 auto height class 可以使 textarea 字段自适应高度。例如：

<div class="ui auto height textarea">
    <textarea></textarea>
</div>

错误提示

使用 error class 可以标记 textarea 字段为错误状态。例如：

<div class="ui error textarea">
    <textarea></textarea>
</div>

结论

Semantic-UI 提供了灵活的表单字段变化，支持各种样式和功能，可以方便地满足不同的需求。程序员只需简单设置 class 即可实现相应的变化，提高了开发效率。