HTMLでフォームを作成する

今回、某プログラミングスクールで学習した事をアウトプットしたいと思います！

完成図

早速実践！！

index.html

~省略〜

        <h3>メールで予約</h3>
        <form>
          <input type="text" placeholder="名前を入力してください"><br>
          <textarea placeholder="予約日時やご要望をお書きください"></textarea><br>
          <label>
            <input type="radio" name="RadioGroup1" value="0">男性
          </label><br>
          <label>
            <input type="radio" name="RadioGroup1" value="1">女性
          </label><br>
          <select>
            <option value="0">学生</option>
            <option value="1">社会人</option>
          </select>
          <div class="questionaire">
            Maison Avalloの利用は初めてですか？<br>
            <label>
              <input type="checkbox" name="Checkbox" value="0">
                初めて
            </label>
            <label>
              <input type="checkbox" name="Checkbox" value="1">
                2回目以降
            </label><br>
          </div>
          <input type="submit" value="予約メールを送る">
        </form>

~省略~

# それでは解説します！

form要素

form要素は、「アンケートフォーム」や「お問い合わせフォーム」を表すブロック要素です。

input要素

フォームの入力欄や実行ボタンなどを作成することができる要素です。
input要素にはtype属性というものがあり、それを指定することによって様々な種類のフォーム部品を作り出すことができます。

text : １行のテキスト入力欄を作成します
checkbox : チェックボックスを複数作成することができます
radio : 複数の中から１つしか選択できない、ラジオボタンを作ります
submit : 送信ボタンを作ります

textarea要素

複数行のテキスト入力欄を作成する要素です。

value属性

送信ボタンを押したときに、どのような値が送られるのかを決めることができます。

placeholder属性

入力フォームに仮の文字列を入れることができます。

label要素

フォームの構成部品（一行テキストボックス・チェックボックス・ラジオボタン等）と、 その項目名（ラベル）を明確に関連付けるための要素です。ラジオボタンとテキストをlabel要素で囲むことによって、文字の部分をクリックしたときもラジオボタンを選択することができます。クリックがしやすくなり、デザインの幅も拡がるというメリットがあります。

select要素

フォームの選択メニューを表す要素です。選択肢全体を囲みます。

option要素

メニューの選択肢を作成するときに使用します。この要素内の文字列が、メニューの選択肢として表示されます。option要素で指定する選択肢は、select要素の間に記述します。

最後まで見て頂きありがとうございます！！ この記事が少しでも参考になれば嬉しいです