Foundation 表单

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› Foundation5›Foundation5 教程

原作者: [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>

尝试一下 »

<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 类:

实例

尝试一下 »

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>

尝试一下 »