Foundation 表单学习笔记

在网页开发中，表单是收集用户信息的一个重要方式。Foundation 提供了许多样式和组件可以帮助我们快速构建美观且功能强大的表单。

基本表单元素

输入框

输入框是表单中最常用的元素之一。可以使用 Foundation 的 .form-group 包装输入框以实现更好的排版效果。

htmlCopy Code
<div class="form-group">
  <label>姓名</label>
  <input type="text" placeholder="请输入您的姓名">
</div>

复选框和单选框

复选框和单选框都可以使用 Foundation 的 .form-check 包装。

htmlCopy Code
<div class="form-check">
  <input id="checkbox1" type="checkbox">
  <label for="checkbox1">选项1</label>
</div>

<div class="form-check">
  <input id="radio1" type="radio" name="radio-group">
  <label for="radio1">选项1</label>
</div>

<div class="form-check">
  <input id="radio2" type="radio" name="radio-group">
  <label for="radio2">选项2</label>
</div>

下拉框

可以使用 Foundation 的 .form-select 包装下拉框。

htmlCopy Code
<label>选择您所在的城市</label>
<select class="form-select">
  <option>北京</option>
  <option>上海</option>
  <option>广州</option>
  <option>深圳</option>
</select>

文本域

文本域可以使用 Foundation 的 .form-group 包装。

htmlCopy Code
<div class="form-group">
  <label>留言</label>
  <textarea placeholder="请输入留言内容"></textarea>
</div>

表单验证

在表单提交之前，我们需要对用户输入的数据进行一些简单的验证以确保数据的正确性。Foundation 提供了一些内置的验证规则，并且还支持自定义验证规则。

必填字段

可以添加 required 属性来标识一个必填字段。

htmlCopy Code
<div class="form-group">
  <label>姓名</label>
  <input type="text" placeholder="请输入您的姓名" required>
</div>

格式验证

可以使用 Foundation 的内置验证规则来验证邮箱、网址、日期等格式。

htmlCopy Code
<div class="form-group">
  <label>邮箱</label>
  <input type="email" placeholder="请输入您的邮箱地址" required>
</div>

<div class="form-group">
  <label>网址</label>
  <input type="url" placeholder="请输入您的网址" required>
</div>

<div class="form-group">
  <label>生日</label>
  <input type="date" required>
</div>

自定义验证

可以使用 pattern 属性来定义自己的验证规则。

htmlCopy Code
<div class="form-group">
  <label>手机号码</label>
  <input type="text" placeholder="请输入您的手机号码" pattern="[0-9]{11}" title="请输入正确的手机号码" required>
</div>

实例

以下是一个使用 Foundation 实现的注册页面的示例代码：

htmlCopy Code
<form>
  <div class="form-group">
    <label>用户名</label>
    <input type="text" placeholder="请输入您的用户名" required>
  </div>

  <div class="form-group">
    <label>密码</label>
    <input type="password" placeholder="请输入您的密码" required>
  </div>

  <div class="form-group">
    <label>确认密码</label>
    <input type="password" placeholder="请再次输入您的密码" required>
  </div>

  <div class="form-group">
    <label>邮箱</label>
    <input type="email" placeholder="请输入您的邮箱地址" required>
  </div>

  <div class="form-check">
    <input id="agree" type="checkbox" required>
    <label for="agree">同意协议</label>
  </div>

  <button class="button" type="submit">注册</button>
</form>

通过以上的示例代码，我们可以看到 Foundation 提供了丰富的表单样式和组件，可以帮助我们快速实现漂亮且功能强大的表单。