財団中国語マニュアル
/ Foundation 表单
Foundation 表单
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>
运行实例 »
点击 "运行实例" 按钮查看在线实例
Fieldset
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 来更新用户输入的错误状态。 |