导读 | 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> <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 类:
实例
<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>
原文来自:
本文地址://q13zd.cn/about-foundation-forms.html编辑:王浩,审核员:逄增宝
Linux大全:
Linux系统大全: