Semantic-UI 表单行变化

Semantic-UI 是一个现代化的界面框架，提供了各种组件和样式，使开发者可以快速构建美观的网络应用程序。在 Semantic-UI 的表单组件中，有一些特殊样式可以用来改变表单行的外观和行为。

基本表单行

首先，我们看一下 Semantic-UI 默认的表单行样式：

<div class="field">
  <label>用户名</label>
  <input type="text" placeholder="请输入用户名">
</div>

这里的 .field 是一个包含标签和输入框的容器，同时也是一个语义化的元素，用来表示表单中的一个字段。标签和输入框可以放在同一个 .field 容器中，也可以分开放置。

行内表单行

如果您希望标签和输入框在同一行中并排显示，可以使用 .inline 类：

<div class="field inline">
  <label>城市</label>
  <input type="text" placeholder="请输入城市">
</div>

此时，标签和输入框将在同一行内，并且输入框的宽度会自动调整，以适应表单中的其他内容。

分组表单行

有时候，在表单中的一组输入需要被视为一个整体，例如一个地址输入的组合。这时，可以使用 .grouped 类：

<div class="grouped fields">
  <div class="field">
    <label>国家</label>
    <input type="text" placeholder="请输入国家">
  </div>
  <div class="field">
    <label>省份</label>
    <input type="text" placeholder="请输入省份">
  </div>
  <div class="field">
    <label>城市</label>
    <input type="text" placeholder="请输入城市">
  </div>
</div>

在这个例子中，我们使用了一个 .grouped 的容器，将三个输入框包装在一起，使它们在外观上和行为上看起来像一个整体。

行内分组表单行

.grouped 类也可以和 .inline 类一起使用，创建行内的输入组合：

<div class="grouped fields inline">
  <div class="field">
    <label>月份</label>
    <input type="text" placeholder="请输入月份">
  </div>
  <div class="field">
    <label>日</label>
    <input type="text" placeholder="请输入日">
  </div>
  <div class="field">
    <label>年份</label>
    <input type="text" placeholder="请输入年份">
  </div>
</div>

这里的 .inline 类可以使得输入框在同一行内并排显示。

标签在左侧的表单行

默认情况下，Semantic-UI 的表单行中，标签和输入框的排列方式是：标签在上方，输入框在下方。不过，您也可以将标签放在输入框的左侧。要做到这一点，我们需要添加 .left 类：

<div class="field">
  <label class="left">用户名</label>
  <input type="text" placeholder="请输入用户名">
</div>

此时，标签将出现在输入框的左侧，这一排列方式通常用于表单行的紧凑排列。

小型表单行

如果您需要在表单中放置短小的输入控件，可以使用 .mini 类来创建小型表单行：

<div class="mini field">
  <label>验证码</label>
  <div class="ui action input">
    <input type="text" placeholder="请输入验证码">
    <button class="ui button">发送</button>
  </div>
</div>

在这个例子中，我们使用了一个 .mini 的容器，将验证码输入框和发送按钮包裹在一起，并使它们的外观变得更加简洁和紧凑。

结论

通过 Semantic-UI 的表单行样式库，您可以轻松地创建各种不同类型的表单行，并根据需要定制它们的外观和行为。在开发您的下一个 Web 应用程序时，不要忘记利用这些工具来提高您的开发效率！