Framework7表单元素

Framework7是一个流行的开源移动应用框架，包括大量的UI组件。在这个框架中，表单元素尤其是重要的。

基本表单元素

Framework7支持以下基本表单元素：

• 文本框（包括密码框和邮件地址框）
• 下拉列表
• 单选按钮
• 复选框
• 按钮

文本框

• 普通文本框：

<div class="item-input">
  <label class="item-input-label" for="my-input">用户名</label>
  <input type="text" id="my-input" placeholder="请输入用户名" />
</div>

• 密码框：

<div class="item-input">
  <label class="item-input-label" for="my-password">密码</label>
  <input type="password" id="my-password" placeholder="请输入密码" />
</div>

• 邮件地址框：

<div class="item-input">
  <label class="item-input-label" for="my-email">邮件地址</label>
  <input type="email" id="my-email" placeholder="请输入邮件地址" />
</div>

下拉列表

<div class="item-input">
  <label class="item-input-label" for="my-select">城市</label>
  <select id="my-select">
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
    <option value="shenzhen">深圳</option>
  </select>
</div>

单选按钮

<div class="list">
  <ul>
    <li>
      <label class="item-radio">
        <input type="radio" name="my-radio" value="beijing">
        <i class="icon icon-radio"></i>
        北京
      </label>
    </li>
    <li>
      <label class="item-radio">
        <input type="radio" name="my-radio" value="shanghai">
        <i class="icon icon-radio"></i>
        上海
      </label>
    </li>
    <li>
      <label class="item-radio">
        <input type="radio" name="my-radio" value="guangzhou">
        <i class="icon icon-radio"></i>
        广州
      </label>
    </li>
    <li>
      <label class="item-radio">
        <input type="radio" name="my-radio" value="shenzhen">
        <i class="icon icon-radio"></i>
        深圳
      </label>
    </li>
  </ul>
</div>

复选框

<div class="list">
  <ul>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="my-checkbox" value="basketball">
        <i class="icon icon-checkbox"></i>
        篮球
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="my-checkbox" value="football">
        <i class="icon icon-checkbox"></i>
        足球
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="my-checkbox" value="badminton">
        <i class="icon icon-checkbox"></i>
        羽毛球
      </label>
    </li>
  </ul>
</div>

按钮

<div class="list">
  <ul>
    <li>
      <button class="button">提交</button>
    </li>
    <li>
      <button class="button button-fill">提交</button>
    </li>
    <li>
      <button class="button button-outline">提交</button>
    </li>
    <li>
      <button class="button button-raised">提交</button>
    </li>
    <li>
      <button class="button button-raised button-fill">提交</button>
    </li>
  </ul>
</div>

自定义表单元素

Framework7还允许开发者自定义表单元素，这样可以使应用更适应实际需要。

下面是一个例子，展示如何创建自定义复选框：

<div class="list">
  <ul>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="my-checkbox" value="apple" class="my-checkbox">
        <i class="icon icon-checkbox"></i>
        苹果
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="my-checkbox" value="orange" class="my-checkbox">
        <i class="icon icon-checkbox"></i>
        橘子
      </label>
    </li>
    <li>
      <label class="item-checkbox item-content">
        <input type="checkbox" name="my-checkbox" value="banana" class="my-checkbox">
        <i class="icon icon-checkbox"></i>
        香蕉
      </label>
    </li>
  </ul>
</div>

.my-checkbox + .icon-checkbox:before {
  content: url(thumbs-up.svg);
}

此例中，我们使用自定义的图标替换了默认的勾选图标。

结论

Framework7的表单元素提供了多种样式和选项，可以帮助你创建漂亮而功能强大的表单。如果你需要更强大的表单功能，你可以通过自定义表单元素来达到你的目的。