【自習】html・css 表・ボタンの挿入

tableタグで表を作る
selectタグでプルダウンを作る
buttonタグで「カートに追加」ボタンを設置する
formタグでサーバーにデータを送信する
実際に作成した表
メモ

tableタグで表を作る

自習日：2025年7月28日

tableタグを使った表の作り方。
tr(行)ごとに横並びでtr(項目)を列挙する。

table	表全体を囲む
thead	表のヘッダー部分を囲む
tbody	表のボディ部分を囲む
tfoot	表のフッター部分を囲む
tr	表の中の行を囲む
th	表の中の見出しのセルを囲む
td	表の中の見出し以外のセルを囲む

tableタグを使った表の作り方について

tableタグは、Webサイト制作において表を作成する際によく使用するタグです。thead、tbody、tfoot、tr...

selectタグでプルダウンを作る

selectタグの役割と主な属性

selectタグ：プルダウンメニュー（セレクトボックス）を作成するための要素。
内部には複数の<option>タグを置いて選択肢を定義。

属性名	説明
name	フォーム送信時の変数名を指定
id	ラベルと関連付けるための識別子
multiple	複数選択を可能にする(複数項目の同時選択)
required	フォーム送信時に必須入力とする

optionタグの役割と主な属性

HTMLでプルダウンメニューや選択式メニューの個別の選択肢を定義するタグ。
通常は<select>タグの子要素（または<optgroup>内）として配置するのが基本。
フォーム送信時には、選択肢に指定したvalue属性の値が送信される。
value属性は送信値として非常に重要なので、フォーム連携時は指定推奨。

主な属性	効果
value	送信される値を指定例: <option value=”apple”>りんご</option>
selected	初期値として選択された状態にする。例: <option selected>バナナ</option>
disabled	選択不可能な項目にする。グレー表示。例: <option disabled>選択不可</option>
label	項目のラベル（選択肢の表示名など）。多くの場合、要素のテキスト部分が表示され、label属性は補助的な役割。

記述例：ECサイトでの「個数選択」サンプル

<select>がセレクトボックス全体を定義し、name属性は送信されるデータ名を指定
<option>タグは選択肢で、value属性には送信される値を設定
最初の空値を設定したが<option>案内文（「選択してください」など）としてよく用いられる。
<label>と組み合わせてユーザーの利便性やアクセシビリティを向上。

記述例
<label for="quantity">数量選択：</label>
<select name="quantity" id="quantity">
  <option value="">選択してください</option>
  <option value="1">1個</option>
  <option value="2">2個</option>
  <option value="3">3個</option>
</select>

buttonタグで「カートに追加」ボタンを設置する

カートに追加ボタンを設置：<button type="submit">カートに追加する</button>。

button要素のtype属性

type属性	機能
submit	フォームのデータを送信する送信ボタン。 ※type属性を指定なしの初期値もsubmit。
reset	フォーム内の入力値をリセット(初期値に戻す)するリセットボタン。
button	汎用ボタンで、JavaScriptなどの任意の処理を割り当てる場合に使用。送信などの特別な動作はなし。

記述例
<label for="quantity">個数：</label>
 <select name="quantity" id="quantity">
   <option value="1">1個</option>
   <option value="2">2個</option>
   <option value="3">3個</option>
 </select>
<button type="submit">カートに追加する</button>

formタグでサーバーにデータを送信する

formタグで囲むと、選択した個数が「カートに追加」時にサーバに送信される。
「個数選択」のセレクトボックスと組み合わせて使うのが一般的。

記述例
<form action="/cart/add" method="POST">
  <label for="quantity">個数：</label>
  <select name="quantity" id="quantity">
    <option value="1">1個</option>
    <option value="2">2個</option>
    <option value="3">3個</option>
  </select>
　<button type="submit">カートに追加する</button>
</form>