実際にメールを送信する事は、HTMLだけでは出来ません（PHP等のサーバーサイドのプログラムが必要です）が、見た目だけならHTMLで作る事ができます。
formタグやinputタグ、selectタグを使って、作っていきます。
1.formタグで全体を括る
お問い合わせフォームの中に入る要素（お名前の入力欄など）は、全てformタグの中に入れる必要があります。さらに、formタグには、2つの属性が必須です。
・action属性
実際にメールを送信するプログラムがある場所へのパスを書く
・method属性
送信するプログラムへデータを送る際の送り方（POSTやGETがあるが、お問い合わせフォームでは通常POSTを使う）
今回は、action属性の値を「mail_check.php」、method属性をPOSTとして作成します。
<form action="mail_check.php" method="POST">
</form>
2.入力項目を作っていく
お問い合わせフォームのパーツは、inputタグを多く使います。inputタグは、type属性の値に応じて様々なUIを作る事ができます。
また、name属性をつける必要があります。
name属性の値は、他のものと被らないもの（ユニークな値と表現します）である必要があります。また、実際にメールを送信するプログラム側と連携させる必要があるため、プログラマーと相談しつつ値を書いていく必要があります。
labelタグは、その名の通り、入力項目のラベル（項目名）になる部分を指定するのに使います。labelタグで項目名を括り、for属性の値を、該当する入力項目のid属性と同じものにします。
※尚、id属性とname属性は、同じでも、同じでなくても問題ありません。混同しやすいので、以下のコードではあえてバラバラの値を入れてありますが、同じ値を入れていただいても大丈夫です。
2-1.一行テキスト
一行テキストは、type属性にtextを入れます。お名前の入力欄など、一行で書ける量の入力欄に適しています。
<form action="mail_send.php" method="POST">
<label for="onamae">お名前</label>：<input type="text" name="onamae" id="onamae">
</form>
2-2.メールアドレス
type属性にemailを入れます。見た目は一行テキストと同じですが、メールアドレスのフォーマットになっていない場合、エラーになります。
<form action="mail_send.php" method="POST">
<label for="onamae">お名前</label>：<input type="text" name="onamae" id="onamae"><br>
<label for="meado">メールアドレス</label>：<input type="email" name="address" id="meado">
</form>
2-3.数値
type属性にnumberを入れます。こちらも見た目は一行テキストと同じですが、半角の数値しか入力できなくなります。数値で値を入れて欲しい時に使います。
<form action="mail_send.php" method="POST">
<label for="onamae">お名前</label>：<input type="text" name="onamae" id="onamae"><br>
<label for="meado">メールアドレス</label>：<input type="email" name="address" id="meado"><br>
<label for="age">年齢</label>：<input type="number" name="nenrei" id="age">
</form>
2-4.電話番号
type属性にtelを入れます。ただ、特に入力制限がないので、独自で入力制限のルールをpattern属性を使って入力します。000-0000-0000
以上のような入力制限をする場合の例で記述します。
<form action="mail_send.php" method="POST">
〜省略〜
<label for="cellular">電話番号</label>：<input type="tel" name="denwa" id="cellular" pattern="[0-9]{3}-[0-9]{4}-[0-9]{4}"><br>
</form>
2-5.ラジオボタン
type属性にradioを入れます。複数の選択肢から、一つだけ選択させたい時に使います。重要なのは、name属性に同じ値を入れる必要がある点です。name属性に同じ値が入っているものをグループとして扱い、その中から一つ選ばせる形になります。また、実際にformタグのaction属性で指定したプログラムに渡す値を、value属性で記述する必要があります。
<form action="mail_send.php" method="POST">
〜省略〜
<input type="radio" name="seibetsu" value="man" id="male"><label for="male">男性</label><br>
<input type="radio" name="seibetsu" value="women" id="female"><label for="female">女性</label>
</form>
2-6.チェックボックス
type属性にcheckboxを入れます。こちらは、複数選択が可能な選択肢を作るのに使います。ラジオボタンと同様に、value属性には各々送りたいデータを記述します。name属性は、同じ値を入れてもいいし、プログラムによってはバラバラの値を入れても良いです。今回は同じ値を入れています。
<form action="mail_send.php" method="POST">
〜省略〜
<input type="checkbox" name="food" value="ハンバーグ" id="food01"><label for="food01">ハンバーグ</label><br>
<input type="checkbox" name="food" value="カレーライス" id="food02"><label for="food02">カレーライス</label><br>
<input type="checkbox" name="food" value="ラーメン" id="food03"><label for="food03">ラーメン</label>
</form>
2-7.セレクトボックス
セレクトボックスは、inputタグではなく、selectタグを使います。また、選択する項目はoptionタグで記述します。
こちらもname属性とvalue属性が必要になります。
name属性は、selectタグに、value属性はoptionタグに、各々記述していきます。
<form action="mail_send.php" method="POST">
〜省略〜
好きな色：
<select name="color">
<option value="赤">赤</option>
<option value="青">青</option>
<option value="黄色">黄色</option>
</select>
</form>
2-8.テキストエリア
複数行のテキストを入力するのに使うのが、テキストエリアです。textareaタグを使用します。textareaタグは、閉じタグが必要になるので注意が必要です。
<form action="mail_send.php" method="POST">
〜省略〜
<label for="naiyou">お問い合わせ内容</label>：<textarea name="contact" id="naiyou"></textarea>
</form>
上記の画像では、入力できる大きさが小さいですが、CSSで変える事が出来ます。（inputなどもCSSで大きさを変えられます）
2-9.送信ボタン
inputタグのtype属性に、submitを入れます。また、ボタンの文言が、value属性に入れた値になります。
<form action="mail_send.php" method="POST">
〜省略〜
<input type="submit" value="以上の内容で送信">
</form>
一般的なフォームで使うタグと属性でした。
3.inputタグのその他のtype属性と他の属性
3-1.inputタグのtype属性一覧
inputタグのtype属性は、様々なものがあり、上記のコードでは紹介しきれない物も沢山あります。
以下が一覧です。
| type属性の値 | 意味・使い方 |
|---|---|
| text | 1行のテキスト入力 |
| number | 半角数字のみ |
| tel | 電話番号 |
| メールアドレス | |
| url | サイトのURL |
| password | パスワード |
| search | 検索フォーム |
| reset | リセットボタン |
| submit | 送信ボタン |
| image | 画像送信ボタン |
| date | カレンダーから年月日を入力する |
| datetime-local | 年月日+時間・分 |
| month | 年と月を入力 |
| week | 週を入力 |
| time | 時間と分を入力 |
| radio | ラジオボタン |
| checkbox | チェックボックス |
| hidden | 表示しないデータ |
| button | ボタン |
| button | ボタン |
| file | ファイルのアップロード |
| color | カラーパレット |
| range | 範囲を選択 |
3-2.type属性以外でよく使う属性
入力のサンプルを作る事ができるplaceholder属性がよく使われます。メールアドレス：<input type="email" name="email" placeholder="例）xxx@xx.com">
そのほかにも、様々な属性があります。必要に応じて調べてみるのも良いでしょう。
