Foundation 表单 - 学习 Foundation 5 - 简单教程，简单编程

Foundation 重置了表单的默认样式

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

<form>
    <p>Input:  <input type="text" placeholder="Name"></p>
    <p>Textarea:  <textarea rows="4" placeholder="Address"></textarea></p>
    <p>Select:  <select><option>1</option><option>2</option><option>3</option><option>4</option></select></p>
</form>

运行范例 »

<label>

<form> 使用 <label> 元素来设置标签

<label;> 可以添加 for 属性和 id 属性

当设置了 for 属性时，用户在点击标签时输入域会获取输入框焦点

<form>
    <p><label for="name">Input <input type="text" placeholder="Name" id="name"></label></p>
    <p><label for="adr">Label  <textarea rows="4" placeholder="Address" id="adr"></textarea></label></p>
    <p><label for="num">Select  <select id="num"> <option>1</option><option>2</option><option>3</option><option>4</option></select></label></p>
</form>

运行范例 »

.right CSS class 可以设置标签右对齐

<label class="right">

运行范例 »

<fieldset>

Foundation 重置了 <fieldset> 的默认样式

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

运行范例 »

错误状态 .error

Foundation .error CSS class 用来设置出错时的标签、输入框、文本框样式

<form> 
    <p><label class="error">Error <input type="text" 
        placeholder="Name.."></label></p>
    <p>
        <small class="error">Wrong input</small>
        <textarea rows="4" placeholder="Address"></textarea>
    </p>
    <p><small class="error">Wrong input</small></p>
</form>

运行范例 »

我们可以使用 JavaScript 来更新用户输入的错误状态