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);
  }
});