支付宝小程序表单组件表单·Form

支付宝小程序Form（表单），用于将组件内的用户输入的 </code>、 <code><switch/></code>、 <code><input/></code> 、<code><checkbox-group/></code>、<code><slider/></code>、<code><radio-group/></code>、<code><picker/></code> 等组件提交。</p> <p>当点击 <code>form</code> 表单中 <code>formType</code> 为 <code>submit</code> 的 <code>button</code> 组件时，会将表单组件中的 <code>value</code> 值进行提交，需要在表单组件中加上 <code>name</code> 来作为 <code>key</code>。</p> <h2><a href="#api">API</a></h2> <table class="xhe-table"> <thead> <tr> <th>属性名</th> <th>类型</th> <th>默认值</th> <th>描述</th> <th>最低版本</th> </tr> </thead> <tbody> <tr> <td>report-submit</td> <td>boolean</td> <td>-</td> <td>onSubmit 回调是否返回 formId 用于发送模板消息，使用前可使用 canIUse('form.report-submit') 判断是否支持</td> <td>1.2.0</td> </tr> <tr> <td>onSubmit</td> <td>EventHandle</td> <td>-</td> <td>携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}</td> <td>-</td> </tr> <tr> <td>onReset</td> <td>EventHandle</td> <td>-</td> <td>表单重置时会触发 reset 事件</td> <td>-</td> </tr> <tr> <td>class</td> <td>String</td> <td>-</td> <td>外部样式名</td> <td>-</td> </tr> <tr> <td>style</td> <td>String</td> <td>-</td> <td>内联样式</td> <td>-</td> </tr> </tbody> </table> <h2><a href="#screenshot">Screenshot</a></h2> <p><img src="/attachments/image/20170821/1503283692354605.png" alt="支付宝小程序表单截图" title="支付宝小程序表单截图"></p> <h3><a href="#%E7%A4%BA%E4%BE%8B">示例</a></h3> <pre><code><form onSubmit="formSubmit" onReset="formReset"> <view class="section section_gap"> <view class="section__title">switch</view> <switch name="switch"/> </view> <view class="section section_gap"> <view class="section__title">slider</view> <slider name="slider" show-value ></slider> </view> <view class="section"> <view class="section__title">input</view> <input name="input" placeholder="please input here" /> </view> <view class="section section_gap"> <view class="section__title">radio</view> <radio-group name="radio-group"> <label><radio value="radio1"/>radio1</label> <label><radio value="radio2"/>radio2</label> </radio-group> </view> <view class="section section_gap"> <view class="section__title">checkbox</view> <checkbox-group name="checkbox"> <label><checkbox value="checkbox1"/>checkbox1</label> <label><checkbox value="checkbox2"/>checkbox2</label> </checkbox-group> </view> <view class="btn-area"> <button formType="submit">Submit</button> <button formType="reset">Reset</button> </view> </form></code></pre> <pre><code>Page({ formSubmit: function(e) { console.log('form发生了submit事件，携带数据为：', e.detail.value) }, formReset: function() { console.log('form发生了reset事件') } })</code></pre><hr></div> <div class="chapter"> <div class="prev">< <a href="aliminiapp-491d28sd.html" rel="next" title="支付宝小程序表单组件多选项目·Checkbox">支付宝小程序表单组件多选项目·Checkbox</a></div> <div class="next"><a href="aliminiapp-6kjm28sh.html" rel="next" title="支付宝小程序表单组件按钮·Button">支付宝小程序表单组件按钮·Button</a> ></div> </div> </div> <div id="rightcolumn"> <div class="ColLeft fl"> <div class="CategoryTree"> <div class="titlebar"><h3>分类导航</h3></div> <ul> <li><a href="javascript:void(0);">HTML / CSS</a> <ul> <li><a href="/html/index.html">HTML 教程</a></li> <li><a href="/html/html5-intro.html">HTML5 教程</a></li> <li><a href="/css/css-tutorial.html">CSS 教程</a></li> <li><a href="/css/css3-tutorial.html">CSS3 教程</a></li> <li><a href="/bootstrap/index.html">Bootstrap 教程</a></li> <li><a href="/charsets/index.html" target="_top">HTML 字符集</a></li> </ul> </li> <li><a href="javascript:void(0);">JavaScript</a> <ul class="double-li"> <li><a href="/javascript/index.html">JavaScript 教程</a></li> <li><a href="/htmldom/index.html" target="_top">HTML DOM 教程</a></li> <li><a href="/jquery/index" target="_top">jQuery 教程</a></li> <li><a href="/angularjs/index.html" target="_top">AngularJS 教程</a></li> <li><a href="/jqueryui/index.html" target="_top">jQuery UI 教程</a></li> <li><a href="/jquerymobile/index.html" target="_top">jQuery Mobile 教程</a></li> <li><a href="/jeasyui/index.html">jQuery EasyUI 教程</a></li> <li><a href="/nodejs/index.html" target="_top">Node.js 教程</a></li> <li><a href="/ajax/index.html" target="_top">AJAX 教程</a></li> <li><a href="/json/index.html" target="_top">JSON 教程</a></li> <li><a href="/vbscript/index.html" target="_top">VBScript 教程</a></li> <li><a href="/googleapi/index.html" target="_top">Google 地图教程</a></li> <li><a href="/firebug/index.html" target="_top">Firebug 教程</a></li> </ul> </li> <li><a href="javascript:void(0);">服务端语言</a> <ul class="double-li"> <li><a href="/php/php-tutorial.html" target="_top">PHP 教程</a></li> <li><a href="/python/python-tutorial.html" target="_top">Python 教程</a></li> <li><a href="/python3/python3-tutorial.html" target="_top">Python3 教程</a></li> <li><a href="/ruby/ruby-tutorial.html" target="_top">Ruby 教程</a></li> <li><a href="/linux/linux-tutorial.html" target="_top">Linux教程</a></li> <li><a href="/java/java-tutorial.html" target="_top">Java 教程</a></li> <li><a href="/c/index.html" target="_top">C 语言教程</a></li> <li><a href="/servlet/servlet-tutorial.html" target="_top">Servlet 教程</a></li> <li><a href="/jsp/jsp-tutorial.html" target="_top">JSP 教程</a></li> <li><a href="/nodejs/nodejs-tutorial.html" target="_top">Node.js 教程</a></li> <li><a href="/asp/asp-tutorial.html" target="_top">ASP 教程</a></li> <li><a href="/csharp/csharp-tutorial.html" target="_top">C# 教程</a></li> <li><a href="/ado/ado-tutorial.html" target="_top">ADO 教程</a></li> <li><a href="/regexp/regexp-tutorial.html" target="_top">正则表达式教程</a></li> <li><a href="/designpattern/design-pattern-tutorial.html" target="_top">设计模式</a></li> </ul> </li> <li><a href="javascript:void(0);">数据库</a> <ul> <li><a href="/sql/sql-tutorial.html" target="_top">SQL 教程</a></li> <li><a href="/mysql/mysql-tutorial.html" target="_top">MySQL 教程</a></li> <li><a href="/sqlite/sqlite-tutorial.html" target="_top">SQLite 教程</a></li> <li><a href="/mongodb/mongodb-tutorial.html" target="_top">Mongodb 教程</a></li> <li><a href="/redis/redis-tutorial.html" target="_top">Redis 教程</a></li> </ul> </li> <li><a href="javascript:void(0);">XML 语言</a> <ul class="double-li"> <li><a href="/xml/xml-tutorial.html" target="_top">XML 教程</a></li> <li><a href="/dtd/dtd-tutorial.html" target="_top">DTD 教程</a></li> <li><a href="/dom/dom-tutorial.html" target="_top">XML DOM 教程</a></li> <li><a href="/xsl/xsl-tutorial.html" target="_top">XSLT 教程</a></li> <li><a href="/xpath/xpath-tutorial.html" target="_top">XPath 教程</a></li> <li><a href="/xquery/xquery-tutorial.html" target="_top">XQuery 教程</a></li> <li><a href="/xlink/xlink-tutorial.html" target="_top">XLink 教程</a></li> <li><a href="/xlink/xlink-tutorial.html" target="_top">XPointer 教程</a></li> <li><a href="/schema/schema-tutorial.html" target="_top">Schema 教程</a></li> <li><a href="/soap/soap-tutorial.html" target="_top">SOAP 教程</a></li> <li><a href="/wsdl/wsdl-tutorial.html" target="_top">WSDL 教程</a></li> <li><a href="/rss/rss-tutorial.html" target="_top">RSS 教程</a></li> <li><a href="/rdf/rdf-tutorial.html" target="_top">RDF 教程</a></li> <li><a href="/xslfo/xslfo-tutorial.html" target="_top">XSL-FO 教程</a></li> <li><a href="/svg/svg-tutorial.html" target="_top">SVG 教程</a></li> </ul> </li> <li><a href="javascript:void(0);">ASP.NET</a> <ul> <li><a href="/aspnet/aspnet-tutorial.html" title="ASP.NET 教程">ASP.NET 教程</a></li> <li><a href="/csharp/csharp-tutorial.html" title="C# 教程">C# 教程</a></li> <li><a href="/aspnet/webpages-intro.html" title="Web Pages 教程">Web Pages 教程</a></li> <li><a href="/aspnet/razor-intro.html" title="Razor 教程">Razor 教程</a></li> <li><a href="/aspnet/mvc-intro.html" title="MVC 教程">MVC 教程</a></li> <li><a href="/aspnet/aspnet-intro.html" title="Web Forms 教程">Web Forms 教程</a></li> </ul> </li> <li><a href="javascript:void(0);">Web Services</a> <ul> <li><a href="/webservices/webservices-tutorial.html" target="_top">Web Services 教程</a></li> <li><a href="/wsdl/wsdl-tutorial.html" target="_top">WSDL 教程</a></li> <li><a href="/soap/soap-tutorial.html" target="_top">SOAP 教程</a></li> <li><a href="/rss/rss-tutorial.html" target="_top">RSS 教程</a></li> <li><a href="/rdf/rdf-tutorial.html" target="_top">RDF 教程</a></li> </ul> </li> <li><a href="javascript:void(0);">网站建设</a> <ul> <li><a href="/web/web-buildingprimer.html" target="_top">网站建设指南</a></li> <li><a href="/browsers/browser-information.html" target="_top">Web 浏览器</a></li> <li><a href="/http/http-tutorial.html" target="_top">HTTP 教程</a></li> <li><a href="/hosting/hosting-tutorial.html" target="_top">Web 主机</a></li> <li><a href="/tcpip/tcpip-tutorial.html" target="_top">Web TCP/IP</a></li> <li><a href="/w3c/w3c-tutorial.html" target="_top">Web W3C</a></li> <li><a href="/quality/quality-tutorial.html" target="_top">Web 品质</a></li> </ul> </li> <li><a href="javascript:void(0);">参考手册</a> <ul class="double-li"> <li><a href="/htmlref/html-reference.html" target="_top">HTML 标签参考手册</a></li> <li><a href="/htmlref/ref-eventattributes.html" target="_top">HTML 事件参考手册</a></li> <li><a href="/htmlref/html-colorname.html" target="_top">HTML 颜色参考手册</a></li> <li><a href="/cssref/css-reference.html" target="_top">CSS 1,2,3 参考手册</a></li> <li><a href="/jsref/jsref-tutorial.html" target="_top">JavaScript 参考手册</a></li> <li><a href="/jsref/jsref-tutorial.html" target="_top">HTML DOM 参考手册</a></li> <li><a href="/jquery/jquery-ref-selectors.html" target="_top">jQuery 参考手册</a></li> <li><a href="/jquerymobile/jquerymobile-ref-data.html" target="_top">jQuery Mobile 参考手册</a></li> <li><a href="/linux/linux-command-manual.html">Linux 命令大全</a></li> <li><a href="/php/php-ref-array.html" target="_top">PHP 参考手册</a></li> <li><a href="/sql/sql-quickref.html" target="_top">SQL 参考手册</a></li> <li><a href="/asp/asp-ref-response.html" target="_top">ASP 参考手册</a></li> <li><a href="/ado/ado-command.html" target="_top">ADO 参考手册</a></li> <li><a href="/vbscript/vbscript-ref-functions.html" target="_top">VBScript 参考手册</a></li> <li><a href="/googleAPI/google-maps-ref.html">Google Maps 参考手册</a></li> <li><a href="/aspnet/webpages-ref-classes.html" target="_top">Razor 参考手册</a></li> <li><a href="/aspnet/aspnet-ref-htmlcontrols.html" target="_top">.NET 参考手册</a></li> </ul> </li> <li><a href="javascript:void(0);">测验/考试</a> <ul> <li><a href="/quiz/html-quiz.html" target="_top" title="HTML 测验">HTML 测验</a></li> <li><a href="/quiz/html5-quiz.html" target="_top" title="HTML5 测验">HTML5 测验</a></li> <li><a href="/quiz/xhtml-quiz.html" target="_top" title="XHTML 测验">XHTML 测验</a></li> <li><a href="/quiz/css-quiz.html" target="_top" title="CSS 测验">CSS 测验</a></li> <li><a href="/quiz/javascript-quiz.html" target="_top" title="JavaScript 测验">JavaScript 测验</a></li> <li><a href="/quiz/jquery-quiz.html" target="_top" title="jQuery 测验">jQuery 测验</a></li> <li><a href="/quiz/xml-quiz.html" target="_top" title="XML 测验">XML 测验</a></li> <li><a href="/quiz/asp-quiz.html" target="_top" title="ASP 测验">ASP 测验</a></li> <li><a href="/quiz/php-quiz.html" target="_top" title="PHP 测验">PHP 测验</a></li> <li><a href="/quiz/sql-quiz.html" target="_top" title="SQL 测验">SQL 测验</a></li> </ul> </li> <li><a href="javascript:void(0);">开发工具</a> <ul> <li><a href="/eclipse/index.html" target="_top" title="Eclipse">Eclipse 教程</a></li> <li><a href="/firebug/index.html" target="_top" target="_top" title="Firebug">Firebug 教程</a></li> <li><a href="/css-radius" target="_top" target="_top" title="Firebug">前端工具集</a></li> </ul> </li> </ul> </div> </div> <div style="margin-left:5px;"><h2 style="color:#67ad03">关注微信下载离线手册</h2> <img src="/assets/images/qrcode.jpg" width="150" height="150" alt="bootwiki移动版"/> </a> <a target="_blank" href="//shang.qq.com/wpa/qunwpa?idkey=ba72923f64a77a185f18b4a7ca6b8fbe7ba6da842c321bd9e9282d4bd62df4b7" id="qqhref"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="bootwiki" title="bootwiki"></a><br>(群号：<span id="qqid">472910771</span>) </div> <div class="wideSkyscraper"><script type="text/javascript" language="javascript">G160x600();</script></div> </div> <div class="space"></div> <div id="navfoot"><a href="/jquery/index.html" target="_self">jQuery教程</a> | <a href="/course/photoshop">Photoshop教程</a> | <a href="/course/word" target="_blank">Word教程</a> | <a href="/course/powerpoint" target="_self">PPT教程</a> | <a href="/course/sketch">Sketch草图大师</a> | <a href="/course/maya" target="_blank">Maya教程</a> | <a href="/eyuyan/index.html" target="_blank">易语言教程</a> | <a href="/course/coreldraw" target="_blank">CorelDraw教程</a> | <a href="/course/aspnet" target="_self">ASP.NET</a> | <a href="/redis/index.html">Redis数据库</a> | <a href="/intellijidea/index.html" target="_blank">IntelliJ IDEA教程</a> | <a href="/pycharm/" target="_blank">PyCharm</a> | <a href="/linux/index.html" target="_blank">Linux自学</a> | <a href="/matlab/index.html" target="_blank">Matlab教程</a> | <a href="/" target="_blank">菜鸟教程</a></div> <div id="footer"> <p class="fl">Copyright © 2008-2018 | <a href="/">Bootwiki中文网</a> | <a href="https://beian.miit.gov.cn" target="_blank">鲁ICP备19015215号-2</a></p> <p class="fr"><a href="/about/index.html#about" rel="nofollow">关于我们</a> | <a href="/about/contact.html#contact" rel="nofollow">联系我们</a> | <a href="/about/law.html#law" rel="nofollow">免责声明</a> | <a href="/about/sitemap.html#map" rel="nofollow">网站地图</a> | Powered by <a href="http://www.bootweb.cn/" rel="nofollow" target="_blank">青岛博维网络有限公司</a> </div> <div class="space"></div> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"slide":{"type":"slide","bdImg":"0","bdPos":"right","bdTop":"100"}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> <script> $(window).load(function(){ $("pre").addClass("prettyprint"); //prettyPrint(); }) $(function(){ $(".CategoryTree > ul > li").hover(function(){ $(this).addClass("selected"); $(this).children("a:eq(0)").addClass("h2-tit"); $(this).children("ul").show(); },function(){ $(this).removeClass("selected"); $(this).children(".tit").removeClass("h2-tit"); $(this).children("ul").hide(); }) }) /**/ function setClipboardText(event){ event.preventDefault();//阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）。 var node = document.createElement('div'); //对documentfragment不熟，不知道怎么获取里面的内容，用了一个比较笨的方式 node.appendChild(window.getSelection().getRangeAt(0).cloneContents()); //getRangeAt(0)返回对基于零的数字索引与传递参数匹配的选择对象中的范围的引用。对于连续选择，参数应为零。 var htmlData = '<div>' + node.innerHTML + '<br /><br />来源：BootWiki<br />' + '链接：https://www.bootwiki/aliminiapp/aliminiapp-zrva28sf.html<br />' + '著作权归作者所有<br />' + '商业转载请联系作者获得授权，非商业转载请注明出处<br /><br />' + '</div>'; var textData = window.getSelection().getRangeAt(0) + '\n\n来源：BootWiki\n' + '链接：https://www.bootwiki/aliminiapp/aliminiapp-zrva28sf.html\n' + '著作权归作者所有\n' + '商业转载请联系作者获得授权，非商业转载请注明出处\n\n'; if(event.clipboardData){ event.clipboardData.setData("text/html", htmlData); //setData(剪贴板格式, 数据) 给剪贴板赋予指定格式的数据。返回 true 表示操作成功。 event.clipboardData.setData("text/plain",textData); } else if(window.clipboardData){ //window.clipboardData的作用是在页面上将需要的东西复制到剪贴板上，提供了对于预定义的剪贴板格式的访问，以便在编辑操作中使用。 return window.clipboardData.setData("text", textData); } }; document.addEventListener('copy',function(e){ setClipboardText(e); }); function NewWindow(text) { win=window.open(text,'','top=0,left=0,width=400,height=350'); } var host = window.location.host; if (/(iPhone|iPad|iPod|iOS|BlackBerry|IEMobile|Android)/i.test(navigator.userAgent)) { if(host == 'www.waitang.com') { href = window.location.href; href=href.replace(/www.waitang.com/, "m.waitang.com"); window.location.href=href; } } </script> <script src="//www.bootwiki.com/assets/hl/run_prettify.js"></script> <script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"24"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </body> </html>

支付宝小程序介绍

支付宝小程序开放能力

支付宝小程序开发文档

支付宝小程序框架

支付宝小程序组件

支付宝小程序视图容器

支付宝小程序基础内容