手册
目录
收藏375
分享
阅读22181
更新时间2022-04-14
Foundation 表单控制会自动设置为全局样式:
所有 <textarea>, <select> 及 <input> 元素宽度都为 100%，且带有外边距、内边距、阴影喝鼠标移动效果。
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px;"> <h2>表单</h2> <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> <p> Foundation 会自动渲染表单样式。你可以移除样式文件 foundation.min.css 来查看原生的 HTML 表单。</p> </body> </html>
点击 "运行实例" 按钮查看在线实例
在表单中使用 <label> 元素来设置标签，标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点：
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px;"> <h2>标签</h2> <form> <label for="name">Input <input type="text" placeholder="Name" id="name"> </label> <label for="address">Textarea <textarea rows="4" placeholder="Address" id="address"></textarea> </label> <label for="num">Select <select id="num"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </label> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
如果需要设置标签右对齐，可以使用 .right 类:
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px;"> <h2>标签</h2> <form> <label for="name" class="right">Input <input type="text" placeholder="Name" id="name"> </label> <label for="address" class="right">Textarea <textarea rows="4" placeholder="Address" id="address"></textarea> </label> <label for="num" class="right">Select <select id="num"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </label> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
Foundation 渲染 <fieldset> 元素的样式如下：
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px;"> <h2>fieldset</h2> <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> </body> </html>
点击 "运行实例" 按钮查看在线实例
使用 .error 类来设置错误的标签、输入框、文本框样式:
<!DOCTYPE html> <html> <head> <title>Foundation 实例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://static.php.cn/assets/foundation-5.5.3/foundation.min.css"> <script src="http://static.php.cn/assets/jquery/2.0.3/jquery.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/foundation.min.js"></script> <script src="http://static.php.cn/assets/foundation-5.5.3/js/vendor/modernizr.js"></script> </head> <body style="padding:20px;"> <h2>错误状态</h2> <form> <label class="error">错误 <input type="text" placeholder="Name.."> </label> <small class="error">输入错误</small> <textarea rows="4" placeholder="Address"></textarea> <small class="error">输入错误</small> </form> </body> </html>
点击 "运行实例" 按钮查看在线实例
 | 你需要使用 JavaScript 来更新用户输入的错误状态。 |
|---|
相关
视频
RELATED VIDEOS
科技资讯
1
2
3
4
5
6
7
8
9
精选课程
共5课时
17.2万人学习
共49课时
77万人学习
共29课时
61.7万人学习
共25课时
39.3万人学习
共43课时
70.9万人学习
共25课时
61.6万人学习
共22课时
23万人学习
共28课时
33.9万人学习
共89课时
125万人学习
