お問い合わせページを作成してみましょう！
少しの設定で、いろいろな項目を作成することができます
HTML
HTMLだけで下記のようなページを作成することができます。
inputタグ・required属性
入力欄を作成するのに使います！
<dt class="required">お名前</dt>
<dd><input type="text" name="name" required></dd>inputタグ内に「required」と入力することで、必須項目になります。
selectタグ【お問い合わせ内容】
<select name="type" id="type">
<option value="焙煎豆の取置き">焙煎豆の取置き</option>
<option value="焙煎豆の購入・発送">焙煎豆の購入・発送</option>
<option value="講座の申し込み">講座の申し込み</option>
<option value="その他お問い合わせ">その他お問い合わせ</option>
</select>selectタグの中にoptionタグを入力することで、プルダウン選択ができるようになります！
optionタグ内にある、valueの値が選択データ情報として送信されます。
radioタイプ【ご希望の連絡方法】
<dd>
<input type="radio" value="email" name="contact">Eメール
<input type="radio" value="tel" name="contact">お電話
</dd>ラジオボタンを作成することができます！
ここでもvalueの値が入力情報として送信されるので、設定を忘れないようにしてください。
また、nameを同じ値（文字）に設定することで、同じグループとして扱われ、その中の一つだけ選択できるようになります！
textareaタグ【メッセージ】
<textarea name="message" id="" cols="40" rows="10"></textarea>長いテキスト項目を作成することができます！
rowは行数、colは列数のことなので必要な文字数に合わせて調整しましょう！
CSS
CSSでデザインを配置等、整えてみます！
floatとclearプロパティ【項目横並び】
.form dt{
float: left;
clear: both;
text-align: left;
}floatでdtの項目（今回でいうと、「お名前」・「メールアドレス」）をleftに回り込ませることができます！
ただ、このままだと次の項目もどんどん回り込んでしまうので、
clearで回り込みを解除します！
マウスポインタ
.btn:hover{
border-radius: 5px;
cursor: pointer;
}今回だと、送信ボタンにマウスをおいた時に、カーソルが「☝️」になるように「pointer」で設定してみました！
送信ボタンを押した後の処理
HTMLとCSSだけだと、送信ボタンを押しても入力したデータがどこに送られるわけではありません。（ページ遷移の設定はできます）
そのため、この後の設定としては入力データを「サーバに格納、管理者に通知」することが必要です！
続きは順次投稿していきます！
最後まで読んでいただき、ありがとうございます！
↓よろしければ、いいねお願いします🥺
コメント