注釋很詳細(xì)，直接上代碼
上一篇
新增內(nèi)容：
1.
type屬性指定表單類(lèi)型2.
placeholder屬性指定輸入框?yàn)榭諘r(shí)的占位文字
源碼：
form.wxml
<!-- 提前準(zhǔn)備好的布局結(jié)構(gòu)代碼 -->
<view class="register">
<view class="legend">信息登記:</view>
<!-- type里的類(lèi)型決定手機(jī)彈出的輸入法鍵盤(pán)的類(lèi)型-->
<view class="form-field">
<label> 姓名:</label>
<view class="field">
<input type="nickname" value="代碼對(duì)我眨眼睛"/>
</view>
</view>
<view class="form-field">
<label>年齡:</label>
<view class="field">
<input type="number" value="21"/>
</view>
</view>
<!-- password密碼形式 -->
<view class="form-field">
<label>密碼:</label>
<view class="field">
<input type="text" password="true" value="123456" val/>
</view>
</view>
<view class="form-field">
<label>身份證號(hào):</label>
<view class="field">
<!-- 設(shè)置為空時(shí)的占位文字 -->
<input type="idcard" value="31415926535" placeholder="不可為空"/>
</view>
</view>
</view>
form.wxss
/* 頁(yè)面整體樣式 */
page {
padding: 40rpx 30rpx; /* 設(shè)置頁(yè)面上下padding和左右padding*/
box-sizing: border-box; /* 設(shè)置盒模型 */
background-color: #f7f8fa; /* 設(shè)置背景顏色為*/
}
/* 標(biāo)題樣式 */
.legend {
padding-left: 40rpx; /* 設(shè)置左內(nèi)邊距 */
font-size: 36rpx; /* 設(shè)置字體大小 */
color: #333; /* 設(shè)置字體顏色 */
font-weight: 500; /* 設(shè)置字體粗細(xì) */
}
/* 表單字段樣式 */
.form-field {
display: flex; /* 設(shè)置為彈性布局 */
margin-top: 20rpx; /* 設(shè)置上外邊距*/
padding: 0rpx 40rpx;
height: 88rpx; /* 設(shè)置高度 */
background-color: #fff; /* 設(shè)置背景顏色 */
line-height: 88rpx; /* 設(shè)置行高 */
color: #333;
}
/* 表單字段標(biāo)簽樣式 */
.form-field label {
width: 160rpx; /* 設(shè)置寬度 */
}
/* 表單字段輸入框樣式 */
.form-field .field {
flex: 1; /* 設(shè)置彈性元素占據(jù)剩余空間 */
}
/* 輸入框樣式 */
.form-field input {
height: 100%; /* 設(shè)置高度為父元素高度的 100% */
}
效果演示：
1.不同的type屬性所決定的輸入法鍵盤(pán)
密碼類(lèi)型因?yàn)闀?huì)屏蔽投屏軟件所以屏幕會(huì)黑，在實(shí)際手機(jī)里面顯示的是常見(jiàn)的密碼輸入鍵盤(pán)
2.輸入框?yàn)榭諘r(shí)的占位文字
文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-823183.html
下一篇文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-823183.html
到了這里，關(guān)于微信小程序（十）表單組件（入門(mén)）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
