Foundation Chinese Manual /Foundation 表单

Foundation 表单

Foundation 表单控制会自动设置为全局样式:

所有</code>,<code><select></code>及<code><input></code>元素宽度都为 100%，且带有外边距、内边距、阴影喝鼠标移动效果。</p> <div class="example"> <h2 class="example">实例</h2> <div class="example_code"> <pre class="brush:html;toolbar:false"><!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> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script> </head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body style="padding:20px;"> <h2>表单</h2> <form> Input: <input type="text" placeholder="Name"> Textarea: <textarea rows="4" placeholder="Address"> Select:

Foundation 会自动渲染表单样式。你可以移除样式文件 foundation.min.css 来查看原生的 HTML 表单。


      

      运行实例 »
      点击 "运行实例" 按钮查看在线实例

标签

在表单中使用元素来设置标签，标签可以添加 for 属性和 id 属性。用户在点击标签或输入域时获取输入框焦点：

实例

   Foundation 实例       
  标签
  Input   Textarea   Select

运行实例 »

点击 "运行实例" 按钮查看在线实例

如果需要设置标签右对齐，可以使用.right类:

实例

   Foundation 实例       
  标签
  Input   Textarea   Select

运行实例 »

点击 "运行实例" 按钮查看在线实例

Fieldset

Foundation 渲染

错误状态

使用.error类来设置错误的标签、输入框、文本框样式:

实例

   Foundation 实例       
  错误状态
  错误   输入错误  输入错误

运行实例 »

点击 "运行实例" 按钮查看在线实例

	你需要使用 JavaScript 来更新用户输入的错误状态。

你需要使用 JavaScript 来更新用户输入的错误状态。

Foundation Tutorial

Foundation Grid

Foundation Reference Manual

Foundation 表单

标签

实例

实例

Fieldset

实例

错误状态

实例

Tutorial Navigation

Foundation Tutorial

Foundation Grid

Foundation Reference Manual

Foundation 表单

标签

实例

标签

实例

标签

Fieldset

实例

fieldset

错误状态

实例

错误状态

Tutorial Navigation