建站
咨詢
售后
建站咨詢
新聞中心
- 與 H5 表單元素的區(qū)別
- 相同的屬性有不同的表現(xiàn)
- radio-group 和 checkbox-group
- textarea 組件和 input 組件的 type 屬性
- input 組件和 textarea 組件的 placeholder 屬性
- 小程序表單組件擴(kuò)展更多的屬性
- button 組件的 open-type 屬性
- button 組件的 form-type 屬性
- input 組件和 textarea 組件的 comfirm-type 屬性
- textarea 組件輸入框高度自適應(yīng)或固定
- 小程序新增更多表單組件
- picker 組件和 picker-view 組件
- slider 組件
- switch 組件
- 相同的屬性有不同的表現(xiàn)
與 H5 表單元素的區(qū)別
智能小程序封裝了許多表單組件，每個(gè)組件封裝了非常實(shí)用的功能，和 H5 表單元素相比，功能更強(qiáng)大。
創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的黟縣網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
相同的屬性有不同的表現(xiàn)
智能小程序組件，是對(duì)數(shù)據(jù)和方法進(jìn)行封裝的小程序視圖控件，擁有自己的屬性和方法，可幫助開發(fā)者拼裝完成自己的智能小程序頁面。在一些屬性上，小程序和 H5 表單元素有不一樣的表現(xiàn)。例如 radio-group 和 checkbox-group 、textarea 組件和 input 組件的 type 屬性、input 組件和 textarea 組件的 placeholder 屬性。
radio-group 和 checkbox-group
對(duì) radio 的使用：
H5 表單元素用 name 屬性標(biāo)示為相關(guān)聯(lián)的一套按鈕組；
小程序使用 radio-group 規(guī)定一套按鈕組。
Apple Peach
同樣的，checkbox-group 組件也規(guī)定了一套按鈕組，支持多選。
textarea 組件和 input 組件的 type 屬性
H5 表示的是它們的工作方式，具體有 text、button、checkbox、color、date、email、file、number、password、range、submit、tel 等；
小程序的 type 屬性是指輸入時(shí)彈出鍵盤的一種模式，專注于文本輸入，具體有 text（文本輸入鍵盤）、number（不帶小數(shù)點(diǎn)的數(shù)字輸入鍵盤）、idcard（帶數(shù)字和 X 的身份證輸入鍵盤）、digit（帶小數(shù)點(diǎn)的數(shù)字輸入鍵盤）。
請(qǐng)根據(jù)需要錄入的內(nèi)容類型合理設(shè)置 input 組件的 type 值，降低用戶操作成本，提升用戶錄入體驗(yàn)，例如在特定的錄入場景內(nèi)，比如要求錄入身份證號(hào)碼，應(yīng)該使用 type="idcard"
小程序 input 組件提供了 password 屬性用于指定為密碼類型，password 默認(rèn)為false 。
input 組件和 textarea 組件的 placeholder 屬性
H5 表單提供偽元素::placeholder用于設(shè)置樣式；
小程序提供了placeholder-style用于設(shè)置 placeholder 的樣式。
/* CSS */input::placeholder {color: red;font-size: 1.2em;font-style: italic;}data-id="phone"placeholder='please enter your phone'placeholder-style="color: red;"/>
小程序表單組件擴(kuò)展更多的屬性
對(duì)于一些常見的表單組件，小程序?yàn)槠鋽U(kuò)展了更多實(shí)用的屬性，讓開發(fā)者開發(fā)過程更加輕松。例如 button 組件的 open-type 屬性、button 組件的 form-type 屬性、input 組件和 textarea 組件的 comfirm-type 屬性、textarea 組件輸入框高度自適應(yīng)或固定。
button 組件的 open-type 屬性
小程序的 button 組件提供了 open-type 屬性，提供百度 App 開放能力，比如分享、獲取用戶信息等等，適用于要獲取用戶電話、賬號(hào)等場景。
| open-type 的值 | 說明 |
|---|---|
| share | 觸發(fā)用戶分享 |
| getUserInfo | 獲取用戶信息，可以從 bindgetuserinfo 回調(diào)中獲取到用戶信息，參考用戶數(shù)據(jù)的簽名驗(yàn)證和加解密對(duì)用戶數(shù)據(jù)進(jìn)行處理 |
| getPhoneNumber | 獲取用戶手機(jī)號(hào)，可以從 bindgetphonenumber 回調(diào)中獲取到用戶信息： detail.errMsg 值為 getPhoneNumber:ok時(shí)代表用戶信息獲取成功；detail.errMsg值為 getPhoneNumber:fail auth deny時(shí)代表用戶信息獲取失敗 |
| openSetting | 打開授權(quán)設(shè)置頁 |
| chooseAddress | 獲取用戶信息，可以從 bindchooseaddress 回調(diào)中獲取到用戶選擇的地址信息 |
| chooseInvoiceTitle | 獲取用戶信息，可以從 bindchooseinvoicetitle 回調(diào)中獲取到用戶選擇發(fā)票抬頭信息 |
| contact | 打開客服會(huì)話，如果用戶在會(huì)話中點(diǎn)擊消息卡片后返回小程序，可以從 bindcontact 回調(diào)中獲得具體信息 |
| login | 登錄，可以從 bindlogin 回調(diào)中確認(rèn)是否登錄成功 |
合理地使用這些開放能力，可以用在非常多的場景下，例如：獲取用戶電話號(hào)碼進(jìn)行自動(dòng)填充，獲取用戶授權(quán)、登錄態(tài)設(shè)置、客服會(huì)話等。
以下為獲取用戶選擇地址信息：
button 組件的 form-type 屬性
button 組件的 form-type 屬性使用于 form 組件，點(diǎn)擊分別會(huì)觸發(fā) form 組件的 submit/reset 事件：
| form-type 值 | 說明 |
|---|---|
| buttonclick | 普通按鈕點(diǎn)擊 |
| submit | 提交表單。點(diǎn)擊的 button 組件會(huì)將表單組件中的 value 值進(jìn)行提交，需要在表單組件中加上 name 來作為 key |
| reset | 重置表單。點(diǎn)擊的 button 組件會(huì)重置表單 |
代碼示例
- SWAN
- JS
提交重置
Page({// 按鈕類型為 form-type="submit/reset" 的 submit 事件submit() {swan.showToast({title: '用戶點(diǎn)擊了submit',icon: 'none'});},// 按鈕類型為 form-type="submit/reset" 的 reset 事件reset() {swan.showToast({title: '用戶點(diǎn)擊了reset',icon: 'none'});}});
input 組件和 textarea 組件的 comfirm-type 屬性
為了進(jìn)一步提高用戶鍵盤輸入體驗(yàn)，小程序提供了 comfirm-type 屬性，可以設(shè)置鍵盤右下角按鈕的文字，但其最終表現(xiàn)與手機(jī)輸入法本身的實(shí)現(xiàn)有關(guān)，部分安卓系統(tǒng)輸入法和第三方輸入法可能不支持或不完全支持。
comfirm-type 屬性支持以下值：
| confirm-type 值 | 說明 |
|---|---|
| send | 鍵盤右下角按鈕為“發(fā)送” |
| search | 鍵盤右下角按鈕為“搜索” |
| next | 鍵盤右下角按鈕為“下一個(gè)” |
| go | 鍵盤右下角按鈕為“前往” |
| done | 鍵盤右下角按鈕為“完成” |
設(shè)置合理的 confirm-type 值，例如表單最后一項(xiàng)輸入可以設(shè)置 confirm-type 為 done ，這樣可以有效的引導(dǎo)用戶填寫表單。
textarea 組件輸入框高度自適應(yīng)或固定
HTML textarea 使用 rows 和 cols 來定義行列數(shù)（大?。?，而小程序 textarea 組件可以通過是否設(shè)置 auto-height 屬性來控制高度，如果設(shè)置 auto-height，則 textarea 的效果會(huì)類似微信聊天輸入框，根據(jù)文本的量調(diào)整框高。
代碼示例
- SWAN
輸入?yún)^(qū)高度自適應(yīng) auto-height
小程序新增更多表單組件
對(duì)于一些實(shí)際場景常用的功能，例如滾動(dòng)選擇器、滑動(dòng)選擇器、開關(guān)選擇器等，小程序也將這些功能封裝成一個(gè)個(gè)表單組件提供給開發(fā)者使用。例如 picker 組件和 picker-view 組件、slider 組件、switch 組件。
picker 組件和 picker-view 組件
picker 組件表示從底部彈起的滾動(dòng)選擇器。它有五種選擇，分別是時(shí)間選擇器、日期選擇器、普通選擇器、多列選擇器以及省市區(qū)選擇器，默認(rèn)是普通選擇器，通過 mode 屬性進(jìn)行區(qū)分。
picker-view 組件表示可嵌頁面的滾動(dòng)選擇器，在其內(nèi)放置 picker-view-column 子組件。而且 picker-view-column 孩子節(jié)點(diǎn)的高度會(huì)自動(dòng)設(shè)置成與 picker-view 的選中框的高度一致。注意：picker-view 中只可放置 picker-view-column 組件，其他節(jié)點(diǎn)不會(huì)顯示。
代碼示例
- SWAN
{{item}}年 {{item}}月 {{item}}日
slider 組件
slider 組件表示滑動(dòng)選擇器，和 H5 表單元素 相比，小程序封裝了一些自定義（滑塊的大小、滑塊的顏色、已選擇的顏色、背景條的顏色等）和事件的綁定，是個(gè)非常實(shí)用的表單組件。
代碼示例
- SWAN
min="0"max="1500"value="200"step="30"block-size="16"block-color="#3388FF"activeColor="#3c76ff"backgroundColor="#cccccc"disabled="false">
switch 組件
switch 組件表示開關(guān)選擇器，通過 type 屬性，可以選擇 switch/checkbox 兩種樣式，小程序提供了 color 屬性用于改變 switch 的顏色，還為其封裝了 checked 改變時(shí)觸發(fā)的 change 事件。
代碼示例
- SWAN
網(wǎng)站標(biāo)題：創(chuàng)新互聯(lián)百度小程序教程：與H5表單元素的區(qū)別
標(biāo)題網(wǎng)址：http://fisionsoft.com.cn/article/cciodie.html
