如何在微信小程序中使用form表單組件？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

創(chuàng)新互聯(lián)建站是一家專注于網(wǎng)站設(shè)計、成都網(wǎng)站設(shè)計與策劃設(shè)計,慶云網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:慶云等地區(qū)。慶云做網(wǎng)站價格咨詢:028-86922220

表單，將組件內(nèi)的用戶輸入的<switch/> <input/> <checkbox/> <slider/> <radio/> <picker/> 提交。

當(dāng)點(diǎn)擊<form/>表單中 formType 為 submit 的<button/>組件時，會將表單組件中的 value 值進(jìn)行提交，需要在表單組件中加上 name 來作為 key。

屬性名	類型	說明
report-submit	Boolean	是否返回formId用于發(fā)送模板消息
bindsubmit	EventHandle	攜帶form中的數(shù)據(jù)觸發(fā)submit事件，event.detail = { value : {"name":"value"} , formId:"" }
bindreset	EventHandle	表單重置時會觸發(fā)reset事件

示例代碼：

示例代碼：

<form bindsubmit="formSubmit" bindreset="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>
Page({
 formSubmit: function(e) {
  console.log('form發(fā)生了submit事件，攜帶數(shù)據(jù)為：', e.detail.value)
 },
 formReset: function() {
  console.log('form發(fā)生了reset事件')
 }
})

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。

文章標(biāo)題：如何在微信小程序中使用form表單組件
分享鏈接：http://chinadenli.net/article34/jijsse.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、ChatGPT、搜索引擎優(yōu)化、定制開發(fā)、域名注冊、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)