本篇文章為大家?guī)砹岁P(guān)於微信小程式的相關(guān)知識，其中主要介紹了一些常用表單元件，包括了button、checkbox、input、label等等相關(guān)問題，下面一起來看一下，希望對大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程式學(xué)習(xí)教學(xué)】

1、常用表單元件

1.1 button

??<button></button>為按鈕元件，是常用的表單元件之一，用於事件的觸發(fā)以及表單的提交。其屬性表如下所示。

程式碼範(fàn)例：

<view>
??<view>7.button小案例</view>
??<view>(1)迷你按鈕</view>
??<button>主要按鈕</button>
??<button>次要按鈕</button>
??<button>警告按鈕</button>
??<view>(2)按鈕狀態(tài)</view>
??<button>普通按鈕</button>
??<button>警用按鈕</button>
??<button>加載按鈕</button>
??<view>(3)增加按鈕事件</view>
??<button>點我獲取用戶信息</button></view>

1.2 checkbox

??#<checkbox></checkbox>為複選框元件，常用於在表單中進(jìn)行多項資料的選擇。複選框的<checkbox-group></checkbox-group>為父控件，其內(nèi)部嵌套若干個<checkbox></checkbox>子控件。

??<checkbox-group></checkbox-group>屬性如下：

??<checkbox></checkbox>元件的屬性如下：

程式碼範(fàn)例：

checkbox.wxml

<view>
??<view>8.checkbox小案例</view>
??<view>利用for循環(huán)批量生成</view>
??<checkbox-group>
????<label>
??????<checkbox></checkbox>{{item.value}}
????</label>
??</checkbox-group>
</view>

checkbox.js

Page({
??data:?{
????items:?[
??????{?name:?"tiger",?value:?"老虎"?},
??????{?name:?"elephant",?value:?"大象"?},
??????{?name:?"lion",?value:?"獅子",?checked:?"true"?},
??????{?name:?"penguin",?value:?"企鵝"?},
??????{?name:?"elk",?value:?"麋鹿"?},
??????{?name:?"swan",?value:?"天鵝"?},
????]
??},
??checkboxChange:function(e)?{
????console.log("checkbox發(fā)生change事件，攜帶value值為：",?e.detail.value)
??}})

#1.3 input

??<input>為輸入框元件，常用於文字(如姓名、年齡等資訊)的輸入。屬性表如下：

<view>
??<view>9.input小案例</view>
??<view>(1)文字輸入框</view>
??<input>
??<view>(2)密碼輸入框</view>
??<input>
??<view>(3)禁用輸入框</view>
??<input>
??<view>(4)為輸入框增加事件監(jiān)聽</view>
??<input></view>

#1.4 label

??<label></label>是標(biāo)籤元件，不會呈現(xiàn)任何效果，但是可以用來改進(jìn)表單元件的可用性。當(dāng)使用者在label元素內(nèi)點擊文字時，就會觸發(fā)此控件，即當(dāng)使用者選擇該標(biāo)籤時，事件會傳遞到和標(biāo)籤相關(guān)的表單控制項上，可以使用for屬性綁定id,也可以將空間放在該標(biāo)籤內(nèi)部，該組件對應(yīng)屬性如下所示。

wxml

<view>
??<view>10.lable小案例</view>
??<view>(1)利用for屬性</view>
??<checkbox-group>
????<checkbox></checkbox>
????<label>老虎</label>
????<checkbox></checkbox>
????<label>大象</label>
????<checkbox></checkbox>
????<label>獅子</label>
??</checkbox-group>
??<view>(2)label包裹組件</view>
??<checkbox-group>
????<label>
??????<checkbox></checkbox>老虎????</label>
????<label>
??????<checkbox></checkbox>大象????</label>
????<label>
??????<checkbox></checkbox>獅子????</label>
??</checkbox-group></view>

1.5 form

??<form></form>為表單控制項元件，用於提交表單組件中的內(nèi)容。 <form></form>控制項元件內(nèi)部可以嵌套多種元件。

??元件屬性如下：

form.wxml

<view>
??<view>11.form小案例</view>
??<view>模擬注冊功能</view>
??<form>
????<text>用戶名:</text>
????<input>
????<text>密碼:</text>
????<input>
????<text>手機(jī)號:</text>
????<input>
????<text>驗證碼:</text>
????<input>
????<button>注冊</button>
????<button>重置</button>
??</form></view>

form.js

Page({
??onSubmit(e)?{
????console.log("form發(fā)生了submit事件，攜帶數(shù)據(jù)為：")
????console.log(e.detail.value)
??},
??onReset()?{
????console.log("form發(fā)生了reset事件，表單已被重置")
??}})

??輸入測試資料後點選註冊按鈕觸發(fā)表單提交事件。

1.6 radio

??<radio></radio>為單選框組件，往往需配合元件來使用，<radio></radio>標(biāo)籤嵌套在<radio-group></radio-group>當(dāng)中。

??<radio-group></radio-group>元件屬性如下：

??<radio></radio>#元件屬性如下：

radio.wxml

<view>
??<view>14.radio小案例</view>
??<view>利用for循環(huán)批量生成</view>
??<radio-group>
????<block>
??????<radio></radio>{{item.value}}????</block>
??</radio-group></view>

radio.js

Page({
??data:?{
????radioItems:?[
??????{?name:?'tiger',?value:?'老虎'?},
??????{?name:?'elephant',?value:?'大象'?},
??????{?name:?'lion',?value:?'獅子',?checked:?'true'?},
??????{?name:?'penguin',?value:?'企鵝'?},
??????{?name:?'elk',?value:?'麋鹿'?},
??????{?name:?'swan',?value:?'天鵝'?},
????]
??},
??radioChange:function(e)?{
????console.log("radio發(fā)生change事件，攜帶value值為：",?e.detail.value)
??}})

1.7 slider

??<slider></slider>為滑動選擇器，用於視覺化地動態(tài)改變某變數(shù)地取值。屬性表如下：

slider.wxml

<view>
??<view>15.slider小案例</view>
??<view>(1)滑動條右側(cè)顯示當(dāng)前進(jìn)度值</view>
??<slider></slider>
??<view>(2)自定義滑動條顏色與滑塊樣式</view>
??<slider></slider>
??<view>(3)禁用滑動條</view>
??<slider></slider>
??<view>(4)增加滑動條監(jiān)聽事件</view>
??<slider></slider></view>

1.8 switch

??<switch></switch>為開關(guān)選擇器，常用于表單上地開關(guān)功能，屬性表如下所示。

switch.wxml

<view>
??<view>16.switch小案例</view>
??<view>增加switch事件監(jiān)聽</view>
??<switch></switch>
??<switch></switch></view>

1.9 textarea

??<textarea></textarea>為多行輸入框，常用于多行文字的輸入。

2、實訓(xùn)小案例–問卷調(diào)查

survey.wxml

<view>
??<form>
????<view>1.你現(xiàn)在大幾？</view>
????<radio-group>
??????<radio></radio>大一??????<radio></radio>大二??????<radio></radio>大三??????<radio></radio>大四????</radio-group>

????<view>2.你使用手機(jī)最大的用途是什么？</view>
????<checkbox-group>
??????<label><checkbox></checkbox>社交</label>
??????<label>
????????<checkbox></checkbox>網(wǎng)購</label>
??????<label>
????????<checkbox></checkbox>學(xué)習(xí)</label><label>
????????<checkbox></checkbox>其他</label>

????</checkbox-group>
????<view>3.平時每天使用手機(jī)多少小時？</view>
????<slider></slider>

?????<view>4.你之前有使用過微信小程序嗎？</view>
????<radio-group>
??????<radio></radio>無??????<radio></radio>有????</radio-group>

????<view>5.談?wù)勀銓ξ⑿判〕绦蛭磥戆l(fā)展的看法</view>
????<textarea></textarea>
????<button>提交</button>
????<button>重置</button>
??</form></view>

survey.js

Page({
??universityChange:?function?(e)?{
????console.log("你選擇的現(xiàn)在大幾：",?e.detail.value)
??},

??mobilChange:?function?(e)?{
????console.log("你選擇使用手機(jī)的最大用途是：",?e.detail.value)
??},


??timechange:?function?(e)?{
????console.log("你選擇的每天使用手機(jī)的時間是：",?e.detail.value?+?"小時")
??},

??programChange:?function?(e)?{
????console.log("你選擇的是否使用過微信小程序：",?e.detail.value)
??},
?
?
??onSubmit(e)?{
????console.log("你輸入的對小程序發(fā)展前途的看法是："+e.detail.value.textarea)

??},
??onReset()?{
????console.log("表單已被重置")
??}})

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

以上是歸納整理微信小程式常用表單元件的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！