• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

Foundation 表单

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

Foundation 表单

Foundation 表单控制会自动设置为全局样式:

所有 <textarea>, <select><input> 元素宽度都为 100%,且带有外边距、内边距、阴影喝鼠标移动效果。

实例

<form>
 Input:
  <input type="text" placeholder="Name">

  Textarea:
  <textarea rows="4" placeholder="Address"></textarea>

  Select:
  <select>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>
</form>

尝试一下 »

标签

在表单中使用 <label> 元素来设置标签,标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点:

实例

<form>
 <label for="name">Input
    <input type="text" placeholder="Name" id="name">
  </label>

  <labelfor="adr">Label
    <textarea rows="4" placeholder="Address" id="adr"></textarea>
  </label>

  <labelfor="num">Select
    <select id="num">
      <option>1</option>
      <option>2</option>
      <option>3</option>
      <option>4</option>
    </select>
  </label>
</form>

尝试一下 »

如果需要设置标签右对齐,可以使用 .right 类:

实例

<label class="right">

尝试一下 »

Fieldset

Foundation 渲染 <fieldset> 元素的样式如下:

实例

<form>
 <fieldset>
    <legend>Fieldset Legend</legend>
    <label>Name
      <input type="text" placeholder="First Name..">
    </label>
    <label>Email
      <input type="text" placeholder="Enter email..">
    </label>
  </fieldset>
</form>

尝试一下 »

错误状态

使用 .error 类来设置错误的标签、输入框、文本框样式:

实例

<form>
 <label class="error">Error
    <input type="text" placeholder="Name..">
  </label>
  <small class="error">Wrong input</small>

  <textarea rows="4" placeholder="Address"></textarea>
 <small class="error">Wrong input</small>
</form>

尝试一下 »
 你需要使用 JavaScript 来更新用户输入的错误状态。

鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Foundation 输入框尺寸发布时间:2022-01-31
下一篇:
Foundation Magellan发布时间:2022-01-31
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap