前回との接続——フォームの中身を開ける
前回のG-03では、見た目ではなく意味に合った要素を選ぶセマンティックHTMLを学びました。今回はその実践編として、A-03から繰り返し登場してきた「お問い合わせフォーム」の中身を、ついに部品レベルで開けていきます。フォームは、利用者が情報を入力し、それをサーバーへ送るための入り口です。ここを構造として読めるかどうかが、入力画面の品質を左右します。
このスライドのポイント
- G-03: 見た目ではなく意味に合った要素を選ぶセマンティックHTMLを学んだ
- 今回はその実践編。A-03から繰り返し登場した「お問い合わせフォーム」を部品レベルで分解する
- フォーム＝利用者が情報を入力し、サーバーへ送るための入り口
5つの部品の定義
フォームは主に5つの部品でできています。inputは1行の入力欄で、type属性を変えることで文字・数値・日付などに姿を変えます。selectは決まった選択肢から選ぶ部品、textareaは複数行の文章を書く部品、buttonは送信や操作の起点となる部品です。そしてlabelは、項目名と入力欄を対応付ける名札です。labelは見た目の飾りではなく、機械が「この欄が何の入力か」を知るための手がかりであり、この点は最終回のG-10へつながります。
このスライドのポイント
- input＝1行の入力欄。type属性で文字・数値・日付などに変わる
- select＝決まった選択肢から選ぶ
- textarea＝複数行の文章を入力する
- button＝送信や操作の起点
- label＝項目名と入力欄を対応付ける名札（機械が欄の意味を知る手がかり。G-10へつながる）
なぜ部品を読める必要があるか
部品の構成を知らないと、AIが生成したフォームの中身を確認できません。たとえば、labelが抜けていると、入力欄が何を意味するのか読み上げソフトが判断できず、利用者が迷います。「クリックしにくい」「欄の意味が分からない」といった不具合の多くは、こうした部品の選び方や対応付けの欠落から生まれます。部品を読めることが、確認できる状態への第一歩です。
このスライドのポイント
- 部品構成を知らないと、AIが生成したフォームの中身を確認できない
- labelが抜けると、入力欄が何を意味するか読み上げソフトが判断できず、利用者が迷う
- 「クリックしにくい」「欄の意味が分からない」の多くは、部品の選び方・対応付けの欠落が原因
経費入力フォームの分解
経費入力フォームを部品に分解してみます。金額は数値なのでinputのtype="number"、区分は選択肢から選ぶのでselect、備考は自由な文章なのでtextarea、そして申請の実行はbuttonです。さらに、それぞれの入力欄には項目名を示すlabelが対応します。こうして並べると、1つのフォームが役割の違う部品の組み合わせでできていることが見えてきます。
このスライドのポイント
- 金額＝数値なので input type="number"
- 区分＝選択肢から選ぶので select
- 備考＝自由な文章なので textarea
- 申請の実行＝button
- 各入力欄に項目名を示す label が対応
データの性質が部品を決める
部品を決めるのは、扱うデータの性質です。選択肢が数個に決まっているならselect、決まった形のない自由記述ならtextarea、というように、データの中身が部品を決めます。これは、以前カテゴリEで学んだ「型」の考え方が、そのまま画面の部品にも現れている例です。金額のような数値にtextareaを使うと、入力の自由度が高すぎてかえって扱いにくくなります。データの性質に部品を合わせることが、使いやすいフォームの基本です。
このスライドのポイント
- 部品を決めるのは、扱うデータの性質
- 選択肢が数個に決まっている→select／自由記述→textarea
- カテゴリEで学んだ「型」の考え方が、画面の部品にも現れる
- 数値にtextareaを使うと自由度が高すぎてかえって扱いにくい
技術サンプル——フォームの最小コード
実際のコードを見てみます。ここでは、金額のinput、備考のtextarea、そして申請のbuttonを並べています。注目すべきは、labelのfor属性とinputのid属性が同じ値で結ばれ、名札と入力欄が1組になっている点です。また、type="number"を指定することで、数値の入力に向いた欄になります。AIにフォームを作らせたら「labelと対応付いていない入力欄はありませんか」と聞くと、抜けを早めに見つけられます。
このスライドのポイント
- 種別: code
- 目的: labelとinputの対応付けと、type属性の指定を読む
- サンプル本体:
混同しやすい——placeholderとlabel
混同しやすいのが、placeholderとlabelです。placeholderは入力欄に薄く表示される例示の文字で、入力を始めると消えてしまいます。一方labelは、常に見え続ける項目名です。placeholderをlabelの代わりに使うのは定番の悪手で、入力途中に何の欄だったか分からなくなります。例示は補助、名札はlabel、と役割を分けて考えます。
このスライドのポイント
- placeholder＝入力欄に薄く表示される例示の文字。入力を始めると消える
- label＝常に見え続ける項目名
- placeholderをlabel代わりに使うのは定番の悪手（入力途中に何の欄か分からなくなる）
バイブコーディングでの確認点
AIが作ったフォームには「すべての入力欄にlabelが対応していますか」を確認しましょう。labelの対応付けは、後のG-10で学ぶアクセシビリティに直結します。なお、入力された内容が正しいかどうかを送信の前に検査する話は、このカテゴリでは扱いません。その「送信前の確認」はカテゴリHで扱いますので、ここでは部品の構成に集中してください。
このスライドのポイント
- AIのフォームには「すべての入力欄にlabelが対応していますか」を確認
- labelの対応付けは、後のG-10で学ぶアクセシビリティに直結
- 入力内容を送信の前に検査する話（送信前の確認）はカテゴリHで扱う。ここでは部品の構成に集中する
一問一答とまとめ
最後に一問一答です。複数行の文章を入力させる要素は何でしょうか。（間）答えはtextareaです。1行ならinput、選択ならselect、複数行の文章ならtextarea、と使い分けます。30秒まとめとして、フォームはinput・select・textarea・button・labelの5部品ででき、データの性質が部品を決め、labelが名札として欄と機械をつなぐ、と押さえてください。次回のG-05では、この構造に見た目を与えるCSSの適用ルールへ進みます。関連資料は「フォーム設計パターン50」「画面設計チェックリスト100」です。
このスライドのポイント
- 一問一答: 複数行の文章を入力させる要素は？ → textarea
- 30秒まとめ: フォームは5部品ででき、データの性質が部品を決め、labelが名札として欄と機械をつなぐ
- 次回: G-05、構造に見た目を与えるCSSの適用ルールへ
- 関連資料: 「フォーム設計パターン50」「画面設計チェックリスト100」
