微信小程序之表单组件之input(输入框)+textarea(多行输入框)+radio(单选项目)详解

一.input

 

input 即 输入框。该组件是原生组件,使用时请注意相关限制。

 

1.属性

微信小程序之表单组件之input(输入框)+textarea(多行输入框)+radio(单选项目)详解_第1张图片微信小程序之表单组件之input(输入框)+textarea(多行输入框)+radio(单选项目)详解_第2张图片

微信小程序之表单组件之input(输入框)+textarea(多行输入框)+radio(单选项目)详解_第3张图片

 

type 有效值

微信小程序之表单组件之input(输入框)+textarea(多行输入框)+radio(单选项目)详解_第4张图片

 

confirm-type 有效值

微信小程序之表单组件之input(输入框)+textarea(多行输入框)+radio(单选项目)详解_第5张图片

 

2.代码

https://developers.weixin.qq.com/miniprogram/dev/component/input.html

 

 

 

 

 

二.textarea

textarea 即 多行输入框。

 

1.属性

微信小程序之表单组件之input(输入框)+textarea(多行输入框)+radio(单选项目)详解_第6张图片

微信小程序之表单组件之input(输入框)+textarea(多行输入框)+radio(单选项目)详解_第7张图片

微信小程序之表单组件之input(输入框)+textarea(多行输入框)+radio(单选项目)详解_第8张图片

 

 

2.代码

 

2.1.WXSS代码

textarea {
  width: 700rpx;
  height: 500rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
}

.textarea-bg {
  background-color: #999;
  padding: 10rpx;
  font-size: 32rpx;
}

.title-bg {
  font-size: 32rpx;
  margin-left: 10rpx;
  margin-right: 10rpx;
  margin-top: 10rpx;
  color: #43c729;
}

 

 

2.2.WXML代码



  

    textarea演示