企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持私有化部署方案 广告
# Foundation 表单 Foundation 表单控制会自动设置为全局样式: 所有 `&lt;textarea&gt;`, `&lt;select&gt;` 及 `&lt;input&gt;` 元素宽度都为 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> ``` ## 标签 在表单中使用 `&lt;label&gt;` 元素来设置标签,标签可以添加 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 渲染 `&lt;fieldset&gt;` 元素的样式如下: ### 实例 ``` <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> ``` > ![Note](https://box.kancloud.cn/2015-12-12_566b901025f8f.jpg) > 你需要使用 JavaScript 来更新用户输入的错误状态。