HTMLのテーブルとフォーム

【HTML学習メモ】フォームとテーブルの基本を学んだ

こんにちは！エンジニアを目指して学習中の〇〇です。
日々の学習内容をアウトプットとして記録するために、Qiitaに投稿しています。

今回は、HTMLの基本的な要素であるフォームとテーブルについて学習しました。Webページを作る上で欠かせない要素なので、しっかり理解しておきたいです。

テーブル：表形式でデータを表示する

テーブル（<table>タグ）は、その名の通り、データを表形式で表示したいときに使います。スプレッドシートのような見た目をHTMLで表現するイメージですね。

基本的な構成要素

• <table>: 表全体を囲むタグです。
• <tr> (Table Row): 表の行を定義します。この中にセルを入れていきます。
• <th> (Table Header Cell): 見出しとなるセルです。通常、太字・中央揃えで表示されます。<tr>タグの中に配置します。
• <td> (Table Data Cell): データが入るセルです。<tr>タグの中に配置します。

テーブルの構造を明確にする要素

表の内容をヘッダー、ボディ、フッターに分けることで、構造がより分かりやすくなります。これはWebページのヘッダー・フッターと同じ考え方で、テーブル専用のものです。

• <thead>: 表のヘッダー部分（見出し行など）をグループ化します。
• <tbody>: 表の本体部分（データ行）をグループ化します。
• <tfoot>: 表のフッター部分（合計行など）をグループ化します。

これらのタグを使うことで、ブラウザや支援技術が表の構造を理解しやすくなるメリットもあります。

セルの結合

• colspan属性: セルを横方向（列）に結合します。<th>や<td>タグに指定し、結合したいセル数を値として設定します（例: colspan="2" で2列分のセルを結合）。
• rowspan属性: セルを縦方向（行）に結合します。<th>や<td>タグに指定し、結合したいセル数を値として設定します（例: rowspan="3" で3行分のセルを結合）。

これらを使うことで、より複雑なレイアウトの表を作成できます。

フォーム：ユーザーからの入力を受け取る

フォーム（<form>タグ）は、ユーザーからの情報を受け取るための仕組みです。ログイン、会員登録、アンケート、問い合わせなど、Webサイトで私たちが日常的に操作している多くの機能で使われていますね。

今までユーザーとして何気なく使っていたログイン画面やアンケートが、input要素などで作られているんだと理解できました。普段使っているものが、どのような技術で成り立っているのかを知ると、より深く、そして早く理解できる気がします。自分の体験と結びつくのは面白いですね！

主要なフォーム関連要素

• <form>: フォーム全体を囲むタグ。どこにデータを送信するか（action属性）、どうやって送信するか（method属性）などを指定します。
• <input>: 最もよく使う入力要素です。type属性を変えることで、様々な形式の入力欄を作成できます。
  • type="text": 1行のテキスト入力。
  • type="email": メールアドレス形式の入力。
  • type="password": パスワード入力（入力内容が隠される）。
  • type="radio": ラジオボタン（複数の選択肢から1つだけ選ぶ）。同じグループのラジオボタンには同じname属性を指定します。
  • type="checkbox": チェックボックス（複数の選択肢から複数選択可能、またはON/OFF）。
  • 他にもnumber, date, fileなど多数あります。
• <label>: 入力欄（<input>など）の説明を付けるための要素です。for属性を使って、対応する入力欄のid属性と紐付けるのが基本です。これがないと、どの入力欄が何を入力するためのものか分からなくなってしまいます。ユーザビリティとアクセシビリティの観点からも重要です。
• <select> と <option>: ドロップダウンリストを作成します。<select>でリスト全体を囲み、<option>で各選択肢を定義します。
• <textarea>: 複数行のテキスト入力欄を作成します。
• <button>: クリック可能なボタンを作成します。フォームの送信（type="submit"）やリセット（type="reset"）、汎用的なボタン（type="button"）として使えます。

入力の補助機能

• required属性: <input>などの要素にこの属性を追加すると、入力必須の項目になります。未入力のままフォームを送信しようとすると、ブラウザが警告を表示して入力を促してくれます。簡単な入力チェックとして便利です。

まとめ

今回はHTMLのテーブルとフォームについて学びました。

• テーブルはデータを整理して表示するためのもの。<tr>, <th>, <td>が基本で、<thead>, <tbody>, <tfoot>で構造化し、colspan, rowspanでセルを結合できる。
• フォームはユーザー入力を受け取るためのもの。<form>タグで囲み、<input>（様々なtypeがある）、<label>, <select>, <textarea>, <button>などを組み合わせて作成する。required属性で入力必須チェックも可能。

普段Webサイトを使う側として触れていた機能が、どのようなHTML要素で作られているかを知ることで、より学習が楽しくなりました。まだまだ学ぶことは多いですが、一つ一つ着実に身につけていきたいと思います。