Có gì mới với các biểu mẫu vào năm 2022?

Các trình duyệt liên tục bổ sung các tính năng HTML, JavaScript và CSS mới. Dưới đây là một số bổ sung hữu ích để làm việc với các biểu mẫu mà bạn có thể đã bỏ qua…

requestSubmit()

Safari 16 sẽ là trình duyệt cuối cùng để thêm hỗ trợ cho requestSubmit.

Trước khi chúng ta xem xét cách thức .requestSubmit() hoạt động, chúng ta hãy tự nhắc nhở mình cách gửi biểu mẫu theo chương trình với JavaScript hoạt động như thế nào khi sử dụng .submit() phương pháp. Gửi biểu mẫu với submit() không kích hoạt một sự kiện gửi. Vì vậy, trong đoạn mã sau, biểu mẫu được gửi, preventDefault() không có hiệu lực và không có gì được ghi vào bảng điều khiển:

const form = document.forms[0];
form.addEventListener('submit', function(event) {
  // code to submit the form goes here
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.submit();
})

.submit() cũng sẽ bỏ qua bất kỳ xác thực biểu mẫu HTML nào. Với đánh dấu sau, biểu mẫu sẽ được gửi khi đầu vào trống mặc dù đầu vào có required thuộc tính:

<form>   
  <label for="name">Name</label>
  <input required name="name" id="name" type="text">
</form>

.requestSubmit() là một cách thay thế để gửi biểu mẫu bằng JavaScript, nhưng ngược lại với .submit(), Xác thực biểu mẫu HTML sẽ ngăn không cho biểu mẫu được gửi. Nếu tất cả dữ liệu đã nhập trong biểu mẫu đều vượt qua quá trình xác thực, submit sự kiện sẽ được kích hoạt, có nghĩa là "biểu mẫu đã được gửi!" sẽ được đăng nhập vào bảng điều khiển trong ví dụ sau:

form.addEventListener('submit', function(event) {
  event.preventDefault();
  console.log('form submitted!');
});

document.querySelector('.btn').addEventListener('click', function() {
  form.requestSubmit();
})

Bạn đã có thể đạt được điều này bằng cách nhấp vào nút gửi của biểu mẫu theo chương trình, nhưng requestSubmit có lẽ là một giải pháp thanh lịch hơn.

submitter tài sản của sự kiện gửi

Sản phẩm SubmitEvent.submitter tài sản đạt được hỗ trợ đầy đủ nhiều trình duyệt với việc phát hành Safari 15.4. Thuộc tính chỉ đọc này chỉ định <button> or <input type="submit"> yếu tố khiến biểu mẫu được gửi.

<form>
  <button name="foo" value="bar" type="submit">Bar</button>
  <button name="foo" value="baz" type="submit">Baz</button>
</form>

Khi bạn có nhiều nút hoặc đầu vào gửi, mỗi nút có một giá trị khác nhau, chỉ giá trị của nút hoặc đầu vào được nhấp vào để gửi biểu mẫu sẽ được gửi đến máy chủ, thay vì cả hai giá trị. Không có gì mới. Điểm mới là người nghe sự kiện cho sự kiện gửi hiện có quyền truy cập vào event.submitter tài sản. Ví dụ: bạn có thể sử dụng điều này để thêm một lớp vào nút hoặc đầu vào đã kích hoạt gửi biểu mẫu hoặc để lấy value hoặc bất kỳ thuộc tính HTML nào khác của nó.

document.forms[0].addEventListener('submit', function(event) {
  event.preventDefault();
  console.log(event.submitter.value);
  console.log(event.submitter.formaction);
  event.submitter.classList.add('spinner-animation');
})

formdata sự kiện

Điều này không đặc biệt mới, nhưng chỉ đạt được hỗ trợ trên nhiều trình duyệt với việc phát hành Safari 15. Trường hợp sử dụng chính cho formdata sự kiện đang cho phép các phần tử tùy chỉnh tham gia vào quá trình gửi biểu mẫu. Tuy nhiên, bên ngoài các thành phần web, nó vẫn có thể hữu ích.

Bạn thêm một formdata trình nghe sự kiện vào biểu mẫu bạn muốn tương tác:

document.querySelector('form').addEventListener('formdata', handleFormdata);

Sự kiện được kích hoạt bởi cả một lần gửi biểu mẫu HTML thông thường và cả sự xuất hiện của new FormData(). event.formData giữ tất cả dữ liệu đang được gửi.

function handleFormdata(event) {
  for (const entry of event.formData.values()) {
    console.log(entry);
  }
}

Hàm gọi lại cho formdata trình xử lý sự kiện chạy trước khi dữ liệu được gửi đến máy chủ, cho bạn cơ hội thêm hoặc sửa đổi dữ liệu đang được gửi.

function handleFormdata(event) {
  event.formData.append('name', 'John');
}

Bạn có thể đã sửa đổi hoặc nối FormData bên trong trình xử lý sự kiện gửi nhưng formdata cho phép bạn tách ra khỏi logic. Nó cũng là một giải pháp thay thế cho việc sử dụng các đầu vào ẩn trong đánh dấu biểu mẫu của bạn trong trường hợp bạn đang gửi biểu mẫu "theo cách cũ" - tức là dựa vào chức năng tích hợp sẵn của HTML để gửi biểu mẫu thay vì thực hiện với fetch.

showPicker() cho các yếu tố đầu vào

showPicker() đã hỗ trợ kể từ Chrome 99, Firefox 101 và trong Safari 16. Đối với phần tử đầu vào có thuộc tính loại là Ngày, Tháng, Tuần, Giờ, datetime-local, màu hoặc tệp, showPicker() cung cấp một cách có lập trình để hiển thị giao diện người dùng lựa chọn. Đối với đầu vào màu và tệp, luôn có thể hiển thị bộ chọn theo chương trình bằng cách gọi .click trên đầu vào:

document.querySelector('input[type="color"]').click();

Cách tiếp cận đó không hoạt động trên đầu vào ngày tháng, đó là lý do tại sao API mới này được thêm vào. .showPicker() cũng sẽ hoạt động với màu sắc và đầu vào tệp nhưng không có lợi thế thực sự khi sử dụng nó .click().

Thuộc tính trơ

Luôn có thể vô hiệu hóa nhiều đầu vào cùng một lúc bằng cách gói chúng trong HTML fieldset và vô hiệu hóa fieldset:

Trơ là một thuộc tính HTML mới. Nó không chỉ dành cho biểu mẫu, nhưng biểu mẫu chắc chắn là một trường hợp sử dụng chính. Không giống như disabled thuộc tính, inert có thể được áp dụng cho một form phần tử chính nó. Mọi thứ trong biểu mẫu sẽ không thể lấy tiêu điểm và không thể nhấp vào. Khi nói đến công nghệ hỗ trợ, inert tương tự như thiết lập aria-hidden="true". Không giống như disabled thuộc tính, inert không áp dụng bất kỳ kiểu nào theo mặc định, nhưng thật dễ dàng để thêm kiểu của riêng bạn:

form[inert] {
  opacity: .2;
}

Còn nhiều thứ nữa sẽ đến…

Cái lớn là tạo kiểu <select> , thứ mà các nhà phát triển đã mong muốn trong nhiều thập kỷ. Có vẻ như nó sẽ sớm trở thành hiện thực với sự ra đời của selectmenu.

Nhưng đó là nó cho bây giờ! Các bản cập nhật gần đây mang lại sự hỗ trợ đầy đủ cho trình duyệt để tạo thành các tính năng mà chúng tôi đang chờ đợi, khiến chúng trở nên ưu tiên cho việc sử dụng sản xuất.