なるほど｡
アンドレ､ 最後にこのフォームを送信していいか？
さて､ このビデオでは､ いよいよこのフォームを送信するとどうなるかを見ていきます｡
しかし､ 最後にもうひとつ､ 名前属性を入れておく必要があります｡
なぜそれが必要なのかは､ このビデオの最後で説明します｡
そこで､ 各フィールドにname属性を追加することにします｡
だから､ こちらはファーストネームになる｡
コピーして貼り付けるので､ 少し速くなりますよ｡
持っています｡
姓のEメール
パスワード
誕生日
ラジオボタンにはすでにこれがありますが､ これは良いことです｡
そして､ ここが必要なのです｡
猫
犬
ボルボ
なるほど｡
さて､ ボタンにはユーザー情報がないため､ この情報は必要ありません｡
ページを更新して､ 偽のデータを入力して何が起こるか見てみましょう｡
だから､ 偽の男のメールアドレスは､ 偽のパスワードは1､ 2､ 3と言うことになりますね｡
バースデーは男性で猫を飼っていて､ アウディを持っている人になります｡
これから登録をクリックしますが､ クリックするとどうなるか､ こちらで見守っていてください｡
聞こえたか？
これをコピーしよう｡
なぜなら､ 登録をクリックしたら､ これが添付されたからです｡
これを最小化して､ ここにプリントアウトして､ 自分たちの目で確認できるようにします｡
まず､ クエスチョンマークがあります｡
次にファーストネーム､ フェイク｡
それこそ､ エントリーした通りです｡
苗字があるじゃん｡
電子メールは偽物です｡
なんか､ なんかgmail｡ comを使用しています｡
パスワード
1､ 2､ 3
あ､ パスワードがバレた｡
誕生日
性別は？
そして､ キャットオン｡
ボルボは選ばなかった｡
理由はよくわからない｡
後で見てみますね｡
しかし､ こちらでは､ フォームに入力した値が､ このリンクに添付されているのがわかると思います｡
そして､ これは実はクエリ文字列と呼ばれるものです｡
このフォームの情報をどこかに保存しておけば､ 私たちがこのページに戻ってきたときに､
ウェブサイトがUPSを記憶してくれるからです｡
これは､ HTML5でフォームがフォームがと自動生成されました｡
getという属性を使っていたのですが､ このget｡
このままだと､ フォームの情報をURLにくっつけてサーバーに送るという､ まったく同じことをすることになります｡
もう一つ､ postを行うオプションがあり､ ここで自分で試すことができますが､ クエリパラメータが表示されないので､
これでは上部のバーが一つ変わりません｡
そして､ それはリクエストのボディに添付されるからです｡ このセクションに入るときに､ そのことを説明します｡
あまり混乱させたくないのですが､ なぜgetの代わりにpostを使いたいのか､ その違いはおわかりいただけると思います｡
なぜなら､ もし誰かが私の肩越しに私のパスワードをバーで見てしまったら？
ただ､ この情報をバックエンドに送るということに違和感を覚えないようにしてほしかったんです｡
その対処法については､ 講座の後半で紹介します｡
今は､ フロントエンドに集中しているところです｡
最後に､ formにはaction属性もあり､ よく使われていたことを紹介したいと思います｡
昔のPHPベースのウェブサイトを見ると､ このフォームを送信してくださいというアクションドットPHPのようなものがありました｡
このフォームをバックエンドのサーバーに送信するときに､ サーバー上にあるこのスクリプト､ このファイルを実行するのですが､
今はもっといい方法があるので､ コースの後半で紹介します｡
これを見てみましょう｡
だから､ クエスチョンマークがあるんです｡
そして､ これはクエリ文字列があるときの標準的なものです｡
つまり､ URLにデータの一部を追加しているのです｡
クエスチョンマークで始まる
どの州？
おい､ これから､ たくさんのデータを紹介する｡
まず､ ファーストネームですが､ これも我々のフォームにある名前に対応しており､ これはフェイクと同じでした｡
それが財産と価値なんですね｡
つまり､ nameはプロパティ､ valueはマンと考えることができる｡
名字と名前......ここにアリのマークがありますね｡
だから､ それはまた､ 名字が偽物に等しく､ 姓が男に等しく､ 電子メールが偽物のいくつかのちんぷんかんぷんなGmailに等しいと言うことです｡
comを使用しています｡
これはURLエンコーディングというものがあって､ URLにはこのような文字やクエスチョンマークなど一部の文字に特別な意味があるため､
広告記号を理解できるものでエンコードしても､ そのエンコーディングには影響がないんですね｡
パスワード1～3まであります｡
バースデイ・ジェンダー・オンとキャット・オン
そして､ ボルボやアウディの情報が登録されなかった理由も､ 実はわかってきました｡
そしてそれは､ クエリ文字列が機能するためには､ ご覧のように､ 値に関連する名前を持つ必要があるからです｡
だから､ ファーストネームとフェイクがあるんです｡
ラジオボタンに注目すると､ genderという名前があります｡
そして､ オンにしています｡
だから､ こっちは値を送ってないんだよ｡
性別で､ 何らかのボタンがクリックされたことがわかる｡
つまり､ オンになっているが､ どの値なのかはわからない｡
そして､ それは私たちが含めるべきものだったからです｡
それが選択された場合､ 値が送信されるように､ メールの値｡
そして､ 最後に価値｡
そして今､ セレクトも同じです｡
セレクトフィールドの名前を「B Cars」にすればよかったのです｡
これで､ 名前と値を関連付けることができるようになりました｡
では､ もう1度試してみましょう｡
削除させていただきます｡
先程の変更を保存します｡
フルスクリーンにします｡
リフレッシュして新しい情報を入力しましょう｡
新しい偽の電子メールは new fake at gmail dot com です｡
パスワードは1､ 2､ 3､ 4｡
今回は
メス犬とオーディに負けた誕生日 登録をクリックします｡
そして､ ここにあるものを見てみましょう｡
我々は､ 最初の名前､ 偽の最後の名前は､ 新しい電子メール､ 新しい偽のIDのgmailです｡ comを使用しています｡
パスワード
1､ 2､ 3､ 4
誕生日の性別は女性です｡
グッドドッグの出番です｡
そこで､ 犬を選択しました｡
それは素晴らしいことです｡
そして､ クルマはオーディ｡
これでよしとする｡
そしてそれは､ フォームが複雑になるのと同じことです｡
これはよく遭遇することで､ ランディングページであれ､ 登録制のウェブサイトであれ､ 構築するほとんどのウェブサイトには間違いなく存在することでしょう｡
これは､ よく目にすることです｡
これを理解して､ 納得がいけば､ ほら､ HTMLデベロッパーを名乗ることができる｡
では､ 次回作でお会いしましょう｡
バイバイ｡