มีอะไรใหม่ในแบบฟอร์มในปี 2022 PlatoBlockchain ข้อมูลอัจฉริยะ ค้นหาแนวตั้ง AI.

มีอะไรใหม่ในแบบฟอร์มในปี 2022

ประทับเวลา: 8 กันยายน 2022 9:12 น.

เบราว์เซอร์เพิ่มคุณสมบัติ HTML, JavaScript และ CSS ใหม่อย่างต่อเนื่อง ต่อไปนี้เป็นส่วนเพิ่มเติมที่เป็นประโยชน์ในการทำงานกับแบบฟอร์มที่คุณอาจพลาดไป...

requestSubmit()

Safari ฮิต จะเป็นบราวเซอร์ตัวสุดท้ายที่จะรองรับ requestSubmit.

ก่อนที่เราจะดูวิธีการ .requestSubmit() ได้ผล เรามาเตือนตัวเองว่าการส่งแบบฟอร์มด้วย JavaScript โดยทางโปรแกรมทำงานอย่างไรเมื่อใช้ .submit() กระบวนการ. ส่งแบบฟอร์มด้วย submit() ไม่ทริกเกอร์เหตุการณ์ส่ง ดังนั้นในรหัสต่อไปนี้ แบบฟอร์มจะถูกส่ง preventDefault() ไม่มีผล และไม่มีอะไรถูกบันทึกลงในคอนโซล:

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() จะละเว้นการตรวจสอบรูปแบบ HTML ใดๆ ด้วย จากมาร์กอัปต่อไปนี้ แบบฟอร์มจะถูกส่งเมื่ออินพุตว่างเปล่าแม้ว่าอินพุตจะมี a required แอตทริบิวต์:

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

.requestSubmit() เป็นอีกทางเลือกหนึ่งในการส่งแบบฟอร์มโดยใช้ JavaScript แต่ตรงกันข้ามกับ .submit(), การตรวจสอบแบบฟอร์ม HTML จะทำให้ไม่สามารถส่งแบบฟอร์มได้ หากข้อมูลทั้งหมดที่ป้อนในแบบฟอร์มผ่านการตรวจสอบความถูกต้อง submit เหตุการณ์จะถูกไล่ออก หมายถึง "ส่งแบบฟอร์ม!" จะถูกบันทึกลงในคอนโซลในตัวอย่างต่อไปนี้:

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

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

คุณสามารถทำสิ่งนี้ได้โดยการคลิกปุ่มส่งของแบบฟอร์มโดยทางโปรแกรม แต่ requestSubmit อาจเป็นวิธีแก้ปัญหาที่หรูหรากว่า

submitter คุณสมบัติของงานส่ง

พื้นที่ SubmitEvent.submitter ทรัพย์สินที่ได้รับ การสนับสนุนข้ามเบราว์เซอร์เต็มรูปแบบ ด้วยการเปิดตัว Safari 15.4 คุณสมบัติอ่านอย่างเดียวนี้ระบุ <button> or <input type="submit"> องค์ประกอบที่ทำให้ส่งแบบฟอร์ม

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

เมื่อคุณมีปุ่มส่งหรืออินพุตหลายปุ่ม แต่ละปุ่มมีค่าต่างกัน เฉพาะค่าของปุ่มหรืออินพุตที่คลิกเพื่อส่งแบบฟอร์มเท่านั้นที่จะถูกส่งไปยังเซิร์ฟเวอร์ แทนที่จะเป็นทั้งสองค่า นั่นไม่มีอะไรใหม่ มีอะไรใหม่คือตอนนี้ผู้ฟังเหตุการณ์สำหรับเหตุการณ์ส่งสามารถเข้าถึง event.submitter คุณสมบัติ. คุณสามารถใช้สิ่งนี้เพื่อเพิ่มคลาสให้กับปุ่มหรืออินพุตที่ทริกเกอร์การส่งแบบฟอร์ม ตัวอย่างเช่น หรือเพื่อรับ value หรือแอตทริบิวต์ HTML อื่นๆ

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 เหตุการณ์

นี่ไม่ใช่ของใหม่โดยเฉพาะ แต่เท่านั้น ได้รับการสนับสนุนข้ามเบราว์เซอร์ ด้วยการเปิดตัว Safari 15 กรณีการใช้งานหลักสำหรับ formdata เหตุการณ์ทำให้องค์ประกอบที่กำหนดเองสามารถมีส่วนร่วมในการส่งแบบฟอร์ม แม้ว่าส่วนประกอบเว็บจะยังมีประโยชน์อยู่ก็ตาม

คุณเพิ่ม formdata ผู้ฟังเหตุการณ์ในรูปแบบที่คุณต้องการโต้ตอบด้วย:

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

เหตุการณ์เริ่มต้นขึ้นโดยการส่งแบบฟอร์ม HTML ปกติและโดยการเกิดขึ้นของ new FormData(). event.formData เก็บข้อมูลทั้งหมดที่ถูกส่ง

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

ฟังก์ชันเรียกกลับสำหรับ formdata ตัวฟังเหตุการณ์ทำงานก่อนที่จะส่งข้อมูลไปยังเซิร์ฟเวอร์ ทำให้คุณมีโอกาสเพิ่มหรือแก้ไขข้อมูลที่ส่ง

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

คุณสามารถแก้ไขหรือต่อท้าย FormData ภายในตัวจัดการเหตุการณ์ส่งแต่ formdata ช่วยให้คุณแยกตรรกะออกได้ นอกจากนี้ยังเป็นอีกทางเลือกหนึ่งในการใช้อินพุตที่ซ่อนอยู่ในมาร์กอัปของแบบฟอร์มของคุณในกรณีที่คุณส่งแบบฟอร์ม "แบบเก่า" เช่น อาศัยฟังก์ชันในตัวของ HTML เพื่อส่งแบบฟอร์มแทนที่จะใช้ fetch.

showPicker() สำหรับองค์ประกอบอินพุต

showPicker() ที่ได้รับ ได้รับการสนับสนุน ตั้งแต่ Chrome 99, Firefox 101 และใน Safari 16 ที่กำลังจะมาถึง สำหรับองค์ประกอบอินพุตที่มีแอตทริบิวต์ type เป็น Date, Month, Week, Time, datetime-local, สี หรือ ไฟล์, showPicker() ให้วิธีการทางโปรแกรมเพื่อแสดง UI การเลือก สำหรับอินพุตสีและไฟล์ เป็นไปได้เสมอที่จะแสดงตัวเลือกโดยทางโปรแกรมโดยการโทร .click บนอินพุต:

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

วิธีการนั้นใช้ไม่ได้กับอินพุตวันที่ ซึ่งเป็นสาเหตุที่เพิ่ม API ใหม่นี้ .showPicker() จะทำงานกับอินพุตสีและไฟล์ด้วย แต่ไม่มีข้อได้เปรียบที่แท้จริงในการใช้งานมากกว่า .click().

มีอะไรใหม่ในแบบฟอร์มในปี 2022

คุณลักษณะเฉื่อย

เป็นไปได้เสมอที่จะปิดการใช้งานอินพุตหลายรายการพร้อมกันโดยใส่ไว้ใน HTML fieldset และปิดการใช้งาน fieldset:

Inert เป็นแอตทริบิวต์ HTML ใหม่ มันไม่ได้มีไว้สำหรับแบบฟอร์มเท่านั้น แต่แบบฟอร์มเป็นกรณีใช้งานที่สำคัญอย่างแน่นอน ไม่เหมือนกับ disabled คุณลักษณะ, inert สามารถใช้ได้กับ form องค์ประกอบนั้นเอง ทุกอย่างในแบบฟอร์มจะไม่สามารถโฟกัสได้และคลิกไม่ได้ เมื่อพูดถึงเทคโนโลยีอำนวยความสะดวก inert คล้ายกับการตั้งค่า aria-hidden="true". ไม่เหมือนกับ disabled คุณลักษณะ, inert ไม่ได้ใช้สไตล์ใดๆ โดยค่าเริ่มต้น แต่คุณสามารถเพิ่มสไตล์ของคุณเองได้ง่ายๆ:

form[inert] {
  opacity: .2;
}

ยังมีอีกมากที่จะมา…

ตัวใหญ่คือสไตล์ <select> องค์ประกอบบางอย่างที่นักพัฒนาต้องการมานานหลายทศวรรษ ดูเหมือนว่าในที่สุดจะกลายเป็นความจริงในเร็ว ๆ นี้ด้วยการแนะนำของ selectmenu.

แต่สำหรับตอนนี้เท่านั้น! การอัปเดตล่าสุดทำให้การสนับสนุนเบราว์เซอร์เต็มรูปแบบในรูปแบบที่เรารอคอย ทำให้เป็นคุณลักษณะเฉพาะสำหรับการใช้งานจริง

ประทับเวลา:

เพิ่มเติมจาก เคล็ดลับ CSS