🌜HTMLでフォーム作成🌛

🌟フォーム

form要素

<form action=“#” method=“POST”>
</form>

・action属性　どこにデータを送信するかを記述
・method属性　HTTPリクエストメソッドの種類を記述

🌟HTTPリクエストメソッドとは
ブラウザからサーバーに対して依頼する処理の種類

利用頻度が高い
🌱GET　
サーバーからデータを取得したいとき
例）Webページを取得（表示）、画像を取得(ブログの更新情報を取得)RSSフィードの取得

🌱POST
サーバへデータを送信したいとき
例）ログインフォーム、ECサイトでの商品注文フォーム、アンケートを送信

🌟input要素
データを入力するためのフォーム部品を作る要素

type属性を指定することで様々な入力フォームを作成可能
例）

<input type=“text”>

⚠️終了タグを付けない、空要素

MDN form input で検索
フォームの<input>の型を参照！！
https://developer.mozilla.org/ja/docs/Web/HTML/Element/input

🌟お問合せフォームの制作

🌱お問合せフォーム

 <form action="#" method="POST">
      <input type="text" name="username" placeholder="ユーザーネーム">
      <input type="password" name="password" placeholder="パスワード">
      <input type="submit" value="ログイン">
    </form>

🌱プルダウンメニュー

• 親要素をselect要素に定義
• 選択肢をoption要素で定義

<dt>お住まいの地域</dt>
        <dd>
          <select name="area">
            <option value="" selected>選択してください</option>
            <option value="hokkaido">北海道</option>
            <option value="tohoku">東北</option>
            <option value="kanto">関東</option>
            <option value="chubu">中部</option>
            <option value="kinki">近畿</option>
            <option value="shikoku">四国</option>
            <option value="kyusyu">九州</option>
            <option value="okinawa">沖縄</option>
          </select>

φ(･･
selected属性には値がない
optionに設定すると選択肢が初期状態で選択される
⚠️select要素内で１個のoptionだけがselected属性をもてる

dd>select>option*9

🌱ラジオボタン

性別入力部分

<dt>性別</dt>
        <dd>
          <input type="radio" name="gender" value="male" checked>男性
          <input type="radio" name="gender" value="female">女性
        </dd>
        </dd>

φ(･･
checkedをつけると初期状態で選択がされた状態になる

🌱テキストエリア

お問合せ内容部分

<dt>お問合せ内容</dt>
        <dd><textarea name="contents"></textarea></dd>

φ(･･
終了タグは必要
inputで統一したほうが美しいという意見もあるが現状はこの仕様なので従う必要あり
name属性はデータをサーバー側が受け取ったときに何のデータかを判別するためにつけた名前！

🌱チェックボックス

プライバシーポリシーの同意するチェックをする機能

<dt>プライバシーポリシーに同意する</dt>
      <dd><input type="checkbox" name="privacy" value="1" ></dd>

φ(･･
チェックボックスを作るにはtypeにcheckboxを指定
checkedをつけると初期状態で選択がされた状態になる

🌱送信ボタン

送信ボタンについて
Submit=提出するという意味合い

dlタグの下に記述

<input type="submit" name="submit" value="送信">

• valueはボタンのラベルのテキストを記載
• サーバー側のプログラムは用意してないので送信はされないが、
  実際はform要素のaction属性に指定したパスにデータが送信される

🌱ラベル

各フォーム部品が何の入力欄を示しているのかを説明するためのテキスト

ラベル要素

<dt><label for="username">お名前</label></dt>
        <dd><input id="username" type="text" name="username"></dd>

テキストをラベルで囲む
ラベルをつけたい要素にidを振る
ラベルのfor属性にform部品のidを指定

φ(･･
ラジオボタンのラベルをどう記述するかについては複数の方法がある
今回は　各フォーム部品をラベル要素で囲う
言い換えるとfor属性の代わりにinput要素をラベル要素で囲うこと

<dt>性別</dt>
        <dd>
          <label><input type="radio" name="gender" value="male" checked>男性</label>
          <label><input type="radio" name="gender" value="female">女性</label>
        </dd>
        </dd>

ラベルを記述する方法として、、

1. ラベルのfor属性を使う方法
2. ラベル要素でform部品を囲う
   ２通りの方法があるが、使いやすい方を使えばOK🙆🏻‍♀️

🧚🏻ラベルを使うメリット

• 文書の意味付けがより正しくできる
• チェックボックスやラジオボタンで、ラベルの部分（テキスト）をクリックしても、選択できるようになる

🌱フォームバリデーション

バリデーションとは、、
入力された内容が要件を満たしているか、妥当性を確認すること

🌼入力必須制約を付ける

<form action="#" method="POST">
      <input type="text" required>
      <input type="submit" value="送信">
    </form>

φ(･･
required属性をつけるとエラー表示が出て次に進めないようにできる
＃はダミー

🌼文字数制限
５文字まで入力を許可するが、６文字以上は入力できないように設定

<form action="#" method="POST">
      <input type="text" required maxlength="5">
      <input type="submit" value="送信">
    </form>

⚠️このクライアント側の、フォームバリエーションは、ユーザーが簡単に書き換えられる
HTMLのフォームバリデーションは、不正対策には使えない
👉フォームから送られてくる値は信頼できない場合がある点は覚えておく！

対策としては、サーバーサイド側のフォームからのデータを受け取るプログラム側でも
値の正当性チェックを行う！！

📌クライアント側のフォームデータ検証
https://developer.mozilla.org/ja/docs/Learn/Forms/Form_validation

HTMLステップアップ編終了！
明日からはCSSの基本習得へ〜
平日はいかに残業せずに家に帰ってこれるかの勝負！
効率良く進めていこう🔥🔥