表单

我们着手创建一个简单、强大且通用的表单布局系统。表单样式和 Foundation 网格的结合意味着您可以做几乎任何事情。

表单基础知识

在 Foundation 中创建表单的设计既简单又非常灵活。表单是结合标准表单元素以及网格行和列或单元格构建的。

文本输入框

这些输入类型创建文本字段：text、date、datetime、datetime-local、email、month、number、password、search、tel、time、url 和 week。

观看视频中的此部分


<form>
  <div class="grid-container">
    <div class="grid-x grid-padding-x">
      <div class="medium-6 cell">
        <label>Input Label
          <input type="text" placeholder=".medium-6.cell">
        </label>
      </div>
      <div class="medium-6 cell">
        <label>Input Label
          <input type="text" placeholder=".medium-6.cell">
        </label>
      </div>
    </div>
  </div>
</form>

数字输入框

在大多数桌面浏览器中，<input type="number"> 元素内部将具有向上/向下控件，它们可以增加和减少字段内的数字。这些被称为*微调按钮*。您可以通过将 $input-number-spinners Sass 变量设置为 false 来禁用它们。

<label>
  How many puppies?
  <input type="number" value="100">
</label>

有多少只小狗？

文本区域

<textarea> 元素创建多行文本输入。

观看视频中的此部分

<label>
  What books did you read over summer break?
  <textarea placeholder="None"></textarea>
</label>

暑假期间你读了什么书？

选择菜单

使用选择菜单将多个选项组合到一个菜单中。

观看视频中的此部分

<label>Select Menu
  <select>
    <option value="husker">Husker</option>
    <option value="starbuck">Starbuck</option>
    <option value="hotdog">Hot Dog</option>
    <option value="apollo">Apollo</option>
  </select>
</label>

选择菜单

添加 multiple 属性以允许选择多个选项。按住 Ctrl（Windows）/ Command（Mac）按钮以选择多个选项。

<label>Multiple Select Menu
  <select multiple>
    <option value="showboat">Showboat</option>
    <option value="redwing">Redwing</option>
    <option value="narcho">Narcho</option>
    <option value="hardball">Hardball</option>
  </select>
</label>

多选菜单

复选框和单选按钮

当用户可以从列表中选择多个选项时，请使用复选框组；当用户必须仅选择一个选项时，请使用单选按钮。

将一组复选框或单选按钮包装在 <fieldset> 元素中，并使用 <legend> 元素为它们指定一个公共标签。每个单独的控件还应具有自己的标签，使用典型的 <label> 创建。

观看视频中的此部分

<div class="grid-x grid-padding-x">
  <fieldset class="large-5 cell">
    <legend>Choose Your Favorite</legend>
    <input type="radio" name="pokemon" value="Red" id="pokemonRed" required><label for="pokemonRed">Red</label>
    <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Blue</label>
    <input type="radio" name="pokemon" value="Yellow" id="pokemonYellow"><label for="pokemonYellow">Yellow</label>
  </fieldset>
  <fieldset class="large-7 cell">
    <legend>Check these out</legend>
    <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
    <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
    <input id="checkbox3" type="checkbox"><label for="checkbox3">Checkbox 3</label>
  </fieldset>
</div>

字段集样式

为了鼓励将 <fieldset> 元素用作辅助功能工具，默认情况下不再对其进行样式设置。这些样式现在包含在 .fieldset 类中。

观看视频中的此部分

<fieldset class="fieldset">
  <legend>Check these out</legend>
  <input id="checkbox12" type="checkbox"><label for="checkbox12">Checkbox 1</label>
  <input id="checkbox22" type="checkbox"><label for="checkbox22">Checkbox 2</label>
  <input id="checkbox32" type="checkbox"><label for="checkbox32">Checkbox 3</label>
</fieldset>

查看这些复选框 1 复选框 2 复选框 3

帮助文本（辅助功能）

将帮助文本放在字段下方以阐明其用途。每当使用帮助文本时，请为文本指定唯一的 ID，并将属性 aria-describedby 添加到输入中。这样做会将帮助程序文本与输入相关联。然后，当用户聚焦于输入时，屏幕阅读器可以读取帮助程序文本。

观看视频中的此部分

<label>Password
  <input type="password" aria-describedby="passwordHelpText">
</label>
<p class="help-text" id="passwordHelpText">Your password must have at least 10 characters, a number, and an Emoji.</p>

密码

您的密码必须至少包含 10 个字符、一个数字和一个表情符号。

标签定位

有时您需要一个表单，其标签位于输入的左侧。小菜一碟！您可以将标签放在输入左侧的不同单元格或列中。然后使用 .text-right 或 .float-right 类（或自己添加 text-align: right）重新对齐标签。

观看视频中的此部分

在从右到左的环境中，请改用 .float-left。

<form>
  <div class="grid-x grid-padding-x">
    <div class="small-3 cell">
      <label for="right-label" class="text-right">Label</label>
    </div>
    <div class="small-9 cell">
      <input type="text" id="right-label" placeholder="Right-aligned text input">
    </div>
  </div>
</form>

标签

添加 .middle 类以使标签与其输入垂直对齐。

<form>
  <div class="grid-x grid-padding-x">
    <div class="small-3 cell">
      <label for="middle-label" class="text-right middle">Label</label>
    </div>
    <div class="small-9 cell">
      <input type="text" id="middle-label" placeholder="Right- and middle-aligned text input">
    </div>
  </div>
</form>

标签

内联标签和按钮

要将额外的文本或控件附加到输入字段的左侧或右侧，请将元素包装在 .input-group 容器中，然后将以下类添加到内部元素中

文本字段上的 .input-group-field。
文本标签上的 .input-group-label。
按钮上的 .input-group-button。将按钮放在此包装器内。

观看视频中的此部分

此组件支持 flexbox 模式。了解如何启用 flexbox 模式。

<div class="input-group">
  <span class="input-group-label">$</span>
  <input class="input-group-field" type="number">
  <div class="input-group-button">
    <input type="submit" class="button" value="Submit">
  </div>
</div>

文件上传按钮

使用 <input type="file"> 创建文件上传按钮。出于安全原因，大多数浏览器不允许您设置文件输入的样式。为了解决这个问题，我们可以将表单标签的样式设置为按钮，并将其指向 <input>。为了正确屏蔽输入，添加了 .show-for-sr 类。

观看视频中的此部分

<label for="exampleFileUpload" class="button">Upload File</label>
<input type="file" id="exampleFileUpload" class="show-for-sr">

上传文件

自定义控件（辅助功能）

自定义表单控件（如日期选择器、范围滑块或开关）需要格外注意才能实现无障碍访问。我们的自定义输入（如范围滑块和开关）为您完成了大部分工作。

带有标签或帮助文本的自定义输入需要添加 aria-labelledby 和 aria-describedby 属性，以便屏幕阅读器知道如何描述控件。

<label id="ageLabel">Age</label>
<div class="slider" aria-labelledby="ageLabel" aria-describedby="ageHelpText" data-slider data-initial-start="50" data-end="200">
  <span class="slider-handle"  data-slider-handle role="slider" tabindex="1"></span>
  <span class="slider-fill" data-slider-fill></span>
  <input type="hidden">
</div>
<p id="ageHelpText">How old are you?</p>

Sass 参考

变量

可以使用项目设置文件中的以下 Sass 变量自定义此组件的默认样式。

名称	类型	默认值	描述
`$fieldset-border`	边框	`1px solid $medium-gray`	自定义字段集周围的默认边框。
`$fieldset-padding`	数字	`rem-calc(20)`	自定义字段集内的默认填充。
`$fieldset-margin`	数字	`rem-calc(18 0)`	自定义字段集周围的默认边距。
`$legend-padding`	数字	`rem-calc(0 3)`	图例文本和字段集边框之间的默认填充。
`$form-spacing`	数字	`rem-calc(16)`	表单元素的全局间距。
`$helptext-color`	颜色	`$black`	帮助文本的默认颜色。
`$helptext-font-size`	数字	`rem-calc(13)`	帮助文本的默认字体大小。
`$helptext-font-style`	关键字	`italic`	帮助文本的默认字体样式。
`$input-prefix-color`	颜色	`$black`	颜色
`$input-prefix-background`	颜色	`$light-gray`	前缀为输入的标签的背景颜色。
`$input-prefix-border`	边框	`1px solid $medium-gray`	边框
`$input-prefix-padding`		`1rem`	前缀/后缀输入标签的左侧/右侧填充
`$form-label-color`	颜色	`$black`	颜色
`$form-label-font-size`	数字	`rem-calc(14)`	表单标签的字体大小。
`$form-label-font-weight`	关键字	`$global-weight-normal`	表单标签的字体粗细。
`$form-label-line-height`	数字	`1.8`	数字
`$select-background`	颜色	`$white`	选择菜单的背景颜色。
`$select-triangle-color`	颜色	`$dark-gray`	选择菜单内下拉三角形的颜色。设置为 `transparent` 以将其完全删除。
`$select-radius`	颜色	`$global-radius`	选择菜单的默认半径。
`$input-color`	颜色	`$black`	颜色
`$input-placeholder-color`	颜色	`$medium-gray`	文本输入中占位符文本的字体颜色。
`$input-font-family`	字体	`inherit`	文本输入的字体系列。
`$input-font-size`	数字	`rem-calc(16)`	数字
`$input-font-weight`	关键字	`$global-weight-normal`	数字
`$input-line-height`	关键字	`$global-lineheight`	文本输入的行高。
`$input-background`	颜色	`$white`	颜色
`$input-background-focus`	颜色	`$white`	颜色
`$input-background-disabled`	颜色	`$light-gray`	颜色
`$input-border`	边框	`1px solid $medium-gray`	边框
`$input-border-focus`	颜色	`1px solid $dark-gray`	聚焦文本输入周围的边框。
`$input-padding`	颜色	`$form-spacing * 0.5`	文本输入的填充。
`$input-shadow`	阴影	`inset 0 1px 2px rgba($black, 0.1)`	未聚焦时文本输入内的阴影。
`$input-shadow-focus`	阴影	`0 0 5px $medium-gray`	聚焦时文本输入外的阴影。
`$input-cursor-disabled`	光标	`not-allowed`	将鼠标悬停在禁用的文本输入上时使用的光标。
`$input-transition`	过渡	`阴影过渡 0.5 秒，边框颜色过渡 0.25 秒，缓入缓出`	文本输入框过渡属性。
`$input-number-spinners`	布尔值	`true`	启用 Chrome 和 Firefox 为 `<input type='number'>` 元素添加的向上/向下按钮。
`$input-radius`	边框	`$global-radius`	文本输入框的圆角半径。
`$form-button-radius`	数字	`$global-radius`	表单按钮的边框半径，默认为全局半径。
`$meter-height`	长度	`1rem`	`<meter>` 元素的高度。
`$meter-radius`	长度	`$global-radius`	`<meter>` 元素的边框半径。
`$meter-background`	颜色	`$medium-gray`	`<meter>` 元素的背景颜色。
`$meter-fill-good`	颜色	`$success-color`	`<meter>` 元素中最佳值的填充颜色。
`$meter-fill-medium`	颜色	`$warning-color`	`<meter>` 元素中平均值的填充颜色。
`$meter-fill-bad`	颜色	`$alert-color`	`<meter>` 元素中非最佳值的填充颜色。
`$progress-height`	数字	`1rem`	进度条的高度。
`$progress-background`	颜色	`$medium-gray`	进度条的背景颜色。
`$progress-margin-bottom`	数字	`$global-margin`	进度条的下边距。
`$progress-meter-background`	颜色	`$primary-color`	进度条度量衡的默认颜色。
`$progress-radius`	数字	`$global-radius`	进度条的默认半径。
`$slider-height`	数字	`0.5rem`	滑块的默认高度。
`$slider-background`	颜色	`$light-gray`	滑块轨道的默认背景颜色。
`$slider-fill-background`	颜色	`$medium-gray`	滑块活动填充色的默认颜色。
`$slider-handle-height`	数字	`1.4rem`	滑块手柄的默认高度。
`$slider-handle-width`	数字	`1.4rem`	滑块手柄的默认宽度。
`$slider-handle-background`	颜色	`$primary-color`	滑块手柄的默认颜色。
`$slider-opacity-disabled`	数字	`0.25`	禁用滑块的默认淡出量。
`$slider-radius`	数字	`$global-radius`	滑块的默认半径。