HTML のフォームコントロール要素をフォーム外に置く ― 2021年12月02日 21時47分

この記事は HTML アドベントカレンダーの 2 日目の分です。

HTML のフォームコントロール要素 (input 要素、textarea 要素、select 要素、button 要素など) は、基本的にはその要素の祖先に位置する (その要素を取り囲む) form 要素に紐づいています。しかし、実は祖先にない form 要素に紐づけることもできます。フォームコントロール要素の form 属性の値に、紐づけたい form 要素の ID (id 属性の値) を指定すればよいのです。

この機能を使えば、フォームの一部に別のフォームの送信ボタンを埋め込んだり、

<form id="edit-form" method="post" action="/edit">
  ...
  <p>
    <button type="submit">保存する</button>
    <button type="submit" form="delete-form">削除する</button>
  </p>
</form>
<form id="delete-form" method="post" action="/delete">
</form>

表の行ごとに異なるフォームを配置したりできます。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>タイトル</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        1
        <form id="edit-form-1" method="post" action="/edit">
          <input type="hidden" name="id" value="1">
        </form>
      </td>
      <td>
        <input name="title" value="" form="edit-form-1">
      </td>
      <td>
        <button type="submit" form="edit-form-1">保存する</button>
      </td>
    </tr>
    <tr>
      <td>
        2
        <form id="edit-form-2" method="post" action="/edit">
          <input type="hidden" name="id" value="2">
        </form>
      </td>
      <td>
        <input name="title" value="" form="edit-form-2">
      </td>
      <td>
        <button type="submit" form="edit-form-2">保存する</button>
      </td>
    </tr>
    ...
  </tbody>
</table>

by nanto_vi [Web 関連技術] [コメント(0)｜トラックバック(0)]

Node.js ではイベントから非同期イテレータを生成できる ― 2021年12月02日 23時37分

この記事は JavaScript アドベントカレンダーの 2 日目の分です。

Node.js の Events モジュールでは、events.on メソッドを提供しています (EventEmitter オブジェクトの on メソッドとは別物です)。これは、イベントが列挙されるような非同期イテレータを生成するものです。第 1 引数にイベントを発生させる EventEmitter オブジェクトまたは EventTarget オブジェクトを、第 2 引数に列挙したいイベントの名前を指定します。

以下の例では、実行すると 1 秒後と 3 秒後にそれぞれ「foo イベントが発生しました」と出力されます。

// events-on.mjs

import { on } from 'events';

const target = new EventTarget();
setTimeout(() => {
  target.dispatchEvent(new Event('foo'));
}, 1000);
setTimeout(() => {
  target.dispatchEvent(new Event('foo'));
}, 3000);

(async () => {
  for await (const [event] of on(target, 'foo')) {
      console.log(`${event.type} イベントが発生しました。`)
  }
})();

RxJS の Observable.fromEvent メソッドと機能が似ていますね。

ブラウザ上でも使えると面白い書き方ができるのかもしれませんが、Events モジュールのブラウザ用実装では events.on メソッドに対応していません。issue は立っており、作業ブランチも存在するものの、半年以上動きがなさそうです。

by nanto_vi [JavaScript] [コメント(0)｜トラックバック(0)]