<select>タグ・<option>タグ・<optgroup>タグとは
<select>タグとはプルダウン形式のフォームを作成するためのタグです。このタグは必ず<option>タグとセットで使用します。
<select>タグでプルダウン形式のフォームを作るよ～！という宣言をし、その<>内で、<option>タグを使って中身の項目を作成するイメージです。<optgroup>タグは、その<option>をグループ化するためのタグになります。
実物はこれです。↓
<select>タグ・<option>タグ・<optgroup>タグの使い方
この３つのタグの使い方は単純です。
<select name="名前を付けます" id="名前を付けます">
<optgroup>
<option value="項目１の番号">項目１</option>
<option value="項目１の番号">項目２</option>
<option value="項目１の番号">項目３</option>
</optgroup>
</select><select>タグでまずプルダウンの項目を作りますよ～と宣言します。その<>内に<option>タグでプルダウンの中身の項目を設定しています。
nameはプログラミングの際にも使用するもの（name.valueのような形）なので、日本語ではなく半角英語でつけましょう。idに関しては<label>で使用するくらいなので特に必要ありません。
<label>に関してまた別の記事でまとめようと思います。
いずれもrequired属性を付けるだけで入力が必須になります。
<form>
<select name="kind" required>
<option value="1">ご予約</option>
<option value="2">イベントへの問合わせ</option>
</select>
</form><select>タグで複数選択にする
<select>タグは複数選択させることも可能です。その場合はmultiple属性を付与しましょう。
<form>
<select name="kind" multiple>
<option value="1">ご予約</option>
<option value="2">イベントへの問合わせ</option>
<option value="3">その他</option>
</select>
</form>そうするとこのように↓選択肢が一気に表示され複数選択できるようになります。
<optgroup>タグの意味
<optgroup>タグは<option>タグをまとめる為に使います。
具体的な使い方としては、CSSでクラスを設定しデザインを変更できるという点です。
<form>
<select name="kind" id="kind">
<optgroup class="matome">
<option value="1">ご予約</option>
<option value="2">イベントへの問合わせ</option>
<option value="3">その他</option>
</optgroup>
</select>
</form>.matome{
background-color:green;
}<option>の内容
<option value=”項目１の番号“>項目１</option>の項目１の番号というのは、この項目１が選択され、最後に送信ボタンなどを押してそれらの情報をphpなどの他のプログラミングのページへと送るのですが、その際に使用する番号になります。
なのでこの番号は実際に選ぶ人に見えることはありません。プルダウンとして表示される項目名となるのは<option value=”項目１の番号”>項目１</option>項目１の部分です。
分かりやすく例を示します。↓
<form>
<select name="kind" id="kind">
<option value="1">ご予約</option>
<option value="2">イベントへの問合わせ</option>
<option value="3">その他</option>
</select>
</form><option>で選択済みの項目を作る
最初から選択されているものを設定するには、selected属性を付与します。
<form>
<select name="kind" id="kind">
<option value="1">ご予約</option>
<option value="2" selected>イベントへの問合わせ</option>
<option value="3">その他</option>
</select>
</form>この場合、イベントへの問合わせを選択した状態にしています。
もしも何も設定していなければ「ご予約」が一番上に来ていると思います。↓
<fieldset>タグとは
<fieldset>タグとは、区切られたフォームを作成するためのタグです。区切られたフォームって何よ！？って感じですよね。自分もそう思います。なので実際にここでタグを書いてみます。
このようにフォームが一体どこからどこまでなのかを明確にしてくれる（枠を付けてくれる）タグということですね。
<legend>タグとは
<legend>タグとは、区切られている一番上についているタイトルのような、補足のようなものを付け足すタグになります。
<fieldset>タグ・<legend>タグの使い方
<form>
<fieldset>
<p>区切られてまーす<br>
<input type="checkbox" name="how" value="1" />なかみ<br />
<input type="checkbox" name="how" value="2" />区切られる
</p>
<legend>区切られフォーム</legend>
</fiedset>
</form>これらのタグはすべて<form>タグ内に書きますので、まずは<form>から書きます。そしてその<form>の中に<fieldset>タグを書き、その中に囲みたい要素を詰め込み、最後に<legend>でタイトルめいたものを書きます。