Nhảy tới nội dung

form

Giới thiệu

  • Form dùng để lưu trữ giá trị của các components input, switch, checkbox, radio, picker.
  • Các component bên trong form cần khai báo thuộc tính name
  • Giá trị của form chỉ có thể được lấy thông qua hàm onSubmit và chỉ được gọi thông qua sự kiện tap của button với form-type="submit"

Quét mã để trải nghiệm

Xem code mẫu trên Tini Studio

Demo

Trải nghiệm thử với trình giả lập bên dưới

Thuộc tính

Thuộc tínhKiểu dữ liệuMô tả
onSubmiteventSự kiện được gọi khi button bên trong form với form-type="submit" được tap vào, event.detail = { value }, trong đó value là một object chứa các giá trị của các component bên trong form
onReseteventSự kiện được gọi khi button bên trong form với form-type="reset" được tap vào, khi đó giá trị của các component trong form sẽ bị đưa về giá trị ban đầu

Sample Code

index.txml
<view class="container">
<form onSubmit="onSubmit" onReset="onReset">
<view class="block">
<label>
<text class="header">Input</text>
<input name="input" placeholder="Input" />
</label>
</view>
<view class="block">
<text class="header">Radio</text>
<radio-group name="radio">
<label class="flex">
<radio value="radio1" checked />
<text>Radio 1</text>
</label>
<label class="flex">
<radio value="radio2" />
<text>Radio 2</text>
</label>
</radio-group>
</view>
<view class="block">
<text class="header">Checkbox</text>
<checkbox-group name="checkbox">
<label class="flex">
<checkbox value="checkbox1" />
<text>Checkbox 1</text>
</label>
<label class="flex">
<checkbox value="checkbox2" />
<text>Checkbox 2</text>
</label>
</checkbox-group>
</view>
<view class="block buttons">
<button form-type="submit">Submit</button>
<button form-type="reset" type="outline">Reset</button>
</view>
</form>
</view>
index.tcss
.header {
display: flex;
}

label {
display: flex;
flex-direction: column;
width: 100%;
}

.buttons {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}

button {
width: 100%;
}

.flex {
display: flex;
flex-direction: row;
margin-bottom: 4px;
}

.flex text {
margin-left: 8px;
}

.container {
min-height: 100%;
background-color: var(--gray20);
padding: 16px;
}

.block {
background-color: white;
margin: 8px 0;
padding: 16px;
border-radius: var(--border-radius-rounded-4px);
}

.item {
margin: 8px;
justify-content: center;
align-items: center;
display: flex;
flex-direction: row;
}

.item input {
margin-left: 16px;
}
index.js
Page({
onSubmit(e) {
console.log('onSubmit', e);
my.alert({
content: `Form value:${JSON.stringify(e.detail.value)}`
});
},
onReset(e) {
console.log('onReset', e);
}
});