HTMLフォームビルダー

フィールドを追加してフォームを組み立て、セマンティックな HTML を即コピー。

プリセット

フィールド一覧

フィールドがありません。下から追加してください。

プレビュー

フィールドを追加すると
ここにプレビューが表示されます

属性パネル

← フィールドを選択すると
属性を編集できます

HTML 出力

<!-- フィールドを追加してください -->

使い方

  1. プリセットを選ぶか、「フィールド」タブで type を選んで「＋ 追加」ボタンを押します
  2. 追加したフィールドをクリックすると右側の属性パネルに設定欄が表示されます
  3. label・name・placeholder・required などを自由に設定してプレビューで確認します
  4. 「HTML 出力」に完成したセマンティック HTML が自動生成されるので「HTMLをコピー」で使えます

セマンティックフォームとは？

フォームを正しく書くには <label for=""> でラベルと入力欄を紐づけること、 ラジオボタン・チェックボックスは <fieldset> と <legend> でグループ化することが重要です。 これにより、スクリーンリーダーが内容を正確に読み上げアクセシブルなフォームになります。

関連ツール

♿ カラーコントラストチェッカー 🎛️ CSS Variables プレイグラウンド 🔍 正規表現ビジュアライザー ← ツール一覧に戻る

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ