文字
分享

Foundation 表单


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

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

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

<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 属性。用户在点击标签或输入域时获取输入框焦点:

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

 <form>

  <label for="name">Input

    <input type="text" placeholder="Name" id="name">

  </label>

 

  <label for="adr">Label

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

  </label>

 

  <label for="num">Select

    <select id="num">

      <option>1</option>

      <option>2</option>

      <option>3</option>

      <option>4</option>

    </select>

  </label>

</form>

实例预览 »

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

实例

1

<label class="right">

实例预览 »

Fieldset

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

实例

1

2

3

4

5

6

7

8

9

10

11

<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 类来设置错误的标签、输入框、文本框样式:

实例

1

2

3

4

5

6

7

8

9

<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 来更新用户输入的错误状态。


关于我们 联系我们 留言板

手册网

上一篇:Foundation 标签下一篇:Foundation 表格