제퍼넷 로고

2022년 양식의 새로운 기능은 무엇입니까?

시간

브라우저는 지속적으로 새로운 HTML, JavaScript 및 CSS 기능을 추가하고 있습니다. 다음은 놓쳤을 수 있는 양식 작업에 대한 몇 가지 유용한 추가 기능입니다.

requestSubmit()

사파리 16 에 대한 지원을 추가하는 최종 브라우저가 될 것입니다. 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 양식 유효성 검사도 무시합니다. 다음 마크업이 주어지면 입력이 비어 있더라도 입력이 비어 있을 때 양식이 제출됩니다. required 속성:

   
  
  

.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 제출 이벤트의 속성

최대 XNUMXW 출력을 제공하는 SubmitEvent.submitter 얻은 재산 완전한 크로스 브라우저 지원 Safari 15.4의 출시와 함께. 이 읽기 전용 속성은 다음을 지정합니다. or 양식을 제출하게 만든 요소입니다.


  
  

각각 다른 값을 가진 여러 개의 제출 버튼 또는 입력이 있는 경우 양식을 제출하기 위해 클릭한 버튼 또는 입력의 값만 두 값이 아닌 서버로 전송됩니다. 그것은 새로운 것이 아닙니다. 새로운 점은 제출 이벤트에 대한 이벤트 리스너가 이제 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 event

이것은 특별히 새로운 것은 아니지만 단지 크로스 브라우저 지원 달성 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 논리를 분리할 수 있습니다. 또한 양식을 "구식 방식"으로 제출하는 경우 양식의 마크업에 숨겨진 입력을 사용하는 대신 사용할 수 있습니다. fetch.

showPicker() 입력 요소용

showPicker() 있다 되지 않습니다. Chrome 99, Firefox 101 및 향후 출시될 Safari 16부터. 유형 속성이 날짜, 월, 주, 시간, datetime-local, 색상 또는 파일, showPicker() 선택 UI를 표시하는 프로그래밍 방식을 제공합니다. 색상 및 파일 입력의 경우 항상 다음을 호출하여 선택기를 프로그래밍 방식으로 표시할 수 있었습니다. .click 입력 시:

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

이 접근 방식은 날짜 입력에서 작동하지 않으므로 이 새로운 API가 추가되었습니다. .showPicker() 색상 및 파일 입력에서도 작동하지만 이를 사용하는 데 실질적인 이점은 없습니다. .click().

불활성 속성

여러 입력을 HTML로 래핑하여 한 번에 여러 입력을 비활성화하는 것은 항상 가능했습니다. fieldset 비활성화 fieldset:

불활성은 새로운 HTML 속성입니다. 양식뿐만 아니라 양식은 확실히 주요 사용 사례입니다. 달리 disabled 속성, inert 에 적용할 수 있습니다 form 요소 자체. 양식 내의 모든 항목은 포커스 및 클릭이 불가능합니다. 보조 기술의 경우, inert 설정과 비슷하다 aria-hidden="true". 달리 disabled 속성, inert 기본적으로 스타일을 적용하지 않지만 자신만의 스타일을 쉽게 추가할 수 있습니다.

form[inert] {
  opacity: .2;
}

더 많은 것이 있습니다…

가장 큰 것은 스타일링이다. 개발자들이 수십 년 동안 원했던 요소입니다. 의 도입으로 조만간 현실이 될 것으로 보입니다. selectmenu.

하지만 지금은 그것뿐입니다! 최근 업데이트는 우리가 기다려온 기능을 형성하기 위해 완전한 브라우저 지원을 제공하여 프로덕션 사용에 가장 적합합니다.

spot_img

최신 인텔리전스

spot_img