ブラウザーは常に新しい 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 属性：
<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 submit イベントのプロパティ
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>複数の送信ボタンまたは入力があり、それぞれが異なる値を持つ場合、両方の値ではなく、フォームを送信するためにクリックされたボタンまたは入力の値のみがサーバーに送信されます。 それは何も新しいことではありません。 新しい点は、submit イベントのイベント リスナーがアクセスできるようになったことです。 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 イベントは、カスタム要素がフォーム送信に参加できるようにします。 ただし、Web コンポーネント以外では、依然として有用です。
追加します 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 以降。 type 属性が Date、Month、Week、Time、 datetime-local、色、またはファイル、 showPicker() 選択 UI を表示するプログラムによる方法を提供します。 色とファイルの入力の場合、呼び出してプログラムでピッカーを表示することは常に可能でした。 .click 入力：
document.querySelector('input[type="color"]').click();このアプローチは日付入力では機能しないため、この新しい API が追加されました。 .showPicker() 色とファイルの入力でも機能しますが、それを使用しても実際の利点はありません .click().
不活性属性
HTML でラップすることにより、複数の入力を一度に無効にすることが常に可能でした。 fieldset 無効にする fieldset:
Inert は新しい HTML 属性です。 フォームだけではありませんが、フォームは確かに重要なユースケースです。 とは異なり disabled 属性、 inert に適用することができます form 要素自体。 フォーム内のすべてのものは、フォーカスもクリックもできません。 支援技術に関して言えば、 inert 設定に似ています aria-hidden="true"。 とは異なり disabled 属性、 inert デフォルトではスタイリングは適用されませんが、独自のスタイルを簡単に追加できます。
form[inert] {
opacity: .2;
}続きがあります…
大きいのはスタイリング <select> 要素、開発者が何十年も望んでいたもの。 の導入により、間もなく現実のものとなるように見えます selectmenu.
しかし、それは今のところです！ 最近の更新により、私たちが待ち望んでいたフォーム機能に対する完全なブラウザ サポートがもたらされ、本番環境での使用に適したものになりました。
