そして､ お帰りなさい｡
これからもっと高度なタグに入りますが､ これまで取り上げたタグ以外でおそらく最も重要なのは､
フォームを作成するために必要なタグでしょう｡
ご存知のように､ Webサイトにアクセスすると､ 通常､ ログインや登録フォームのようなものがあります｡
だから､ 今日はそれを作り上げるんです｡
まずは､ ここで新規にファイルを作成してみましょう｡
それを保存して､ デスクトップに登録されたHTMLと呼ぶことにします｡
HTMLが必要なことは分かっているので､ ちょっとしたショートカットを使って､ タイトルをregisterにして保存しておきます｡
そして今度は､ インデックスされたHTMLファイルに､ 別のリンクを追加してみましょう｡
そのリファレンスです｡
登録する｡
HTMLです｡
そして､ ここで､ 登録と言うことになります｡
わかりました｡
この2つのファイルを保存して､ リフレッシュしましょう｡
登録しました｡
登録をクリックします｡
まあ､ まだ何もないのですが､ 動いているようです｡
その方がきれいに見えるので､ これを改行で追加してみましょう｡
そのために､ 覚えていれば､ breakタグを追加することになります｡
では､ リフレッシュしましょう｡
これでよしとする｡
新しいページと登録ができました｡
では､ このフォームを作り出してみましょう｡
レジスタードットhtmlに入れば
HTMLのフォームの書き方は､ 便利なことにformタグがある｡
なるほど｡
しかし､ このフォームタグ自体は､ その中に実際のフォームを入れる必要があります｡
では､ どのようなフォームエレメントがあるのでしょうか｡
さて､ 再び､ 古き良き時代の友人であるW3Cを思い出すと､ フォームを入力しよう｡
そして､ こちらにはHTMLフォームがあることがわかります｡
そしてリフレッシュ｡
それをフルスクリーンにする｡
で､ こっちを見ると､ ものすごい情報量があるんだけど､ とりあえずそれは自分で調べてみてください｡
最も一般的なもの､ おそらく9割方使うであろうものを紹介します｡
まず最初に､ どのフォームでもそうですが､ とりあえずそのページに移動して､ 名前を入力します｡
では､ どうすればいいのか｡
inputタグがあります｡
これは､ 私たちの名前がテキスト形式で表示されるため､ テキストという型を持っています｡
そして､ それを封印することができるのです｡
しかも､ 実はセルフクローズタグなんです｡
保存して更新すると､ ここに小さなボックスが表示されます｡
それがわかるといいんですけどね｡
でもまあ､ そうすると何を入力したらいいのかわからなくなるので､ タイトルをつけたほうがいいでしょうね｡
そこで､ ここにファーストネームと書いておきます｡
セミコロンをつけて保存｡
リフレッシュしよう｡
ファーストネームができましたが､ これをもう少し大きくしてみましょう｡
これでよしとする｡
ここで､ 自分の名前を入力します｡
すごい｡
では､ 名字をもう一つ追加してみましょう｡
そしてまた､ 入力タイプを用意します｡
つまり､ 属性と値がtextということですね｡
そして､ リフレッシュすると､ ラストネームが表示されます｡
なるほど､ でも､ なんだか不格好ですね｡
HTMLは一行ずつ読むだけで､ ここにスペースが必要だということは分からないことを忘れないでください｡
そこで再び､ aを追加することができます｡
ブレーキタグはこちらで､ リフレッシュしてください｡
そして､ ファーストネームとラストネームがあります｡
なるほど｡
それはもう､ 自明のことです｡
他に何がある？
フォームで？
メールもあります｡
では､ もう一つのフィールドを追加してみましょう｡
ここでもうひとつ区切りを入れます｡ この間隔が必要になるからです｡
そして､ リフレッシュを保存しよう｡
すごい｡
なるほど｡
そこで､ 一般登録用紙を用意しました｡
そして､ どのようなフォームでも当然､ 何らかのボタンが必要です｡ 例えば､ これをどこかに送信して､ 登録する必要があります｡
さて､ 今回も素敵な入力タイプがありますね｡
そこで､ テキスト型ではなく､ インプットを行う｡
サブミットタイプがあります｡
だから､ これ｡
ここにもう1つ区切りを入れると｡
そして､ これを保存し､ 更新すると､ 送信ボタンが表示されます｡
さて､ さて､ このサブミットはどこから来たのでしょうか？
さて､ 入力タイプのsubmitを置くと､ 自動的にボタンが作成されます｡
そして､ 何も指定しなければ､ このようなテキストが表示されるだけです｡
でも､ それを変えることができるから､ 価値を置くことができるんです｡
そして､ レジをつける｡
そのリフレッシュを保存する｡
登録ボタンを設置しました｡
なるほど｡
しかし､ この分野でミスをしたらどうなるか？
私たちはものを書いて､ さて､ これをもう一度リセットしたい､ そのために別の入力がある｡
そして､ その入力の種類は､ ご想像の通り､ リセットです｡
では､ この広告を閉じれば､ ここでもう一つの区切りとなるわけですが､ 実は､ これを同じ行に残しておくことができます｡
リフレッシュを保存します｡
そして､ リセットしました｡
ここで何か入力して､ 例えば「これは嫌だ」と思ったとします｡
フォームをリセットしたいのですが｡
リセットをクリックすれば､ すべてクリアになるんです｡
なるほど｡
と聞かれるかもしれませんが､ 「え？
登録をクリックするとどうなるのでしょうか？
その前に､ 一般的な入力タイプをすべて確認し､ registerをクリックして､
メールがどうなるかを確認したいと思います｡
まず､ 登録ボタンをクリックしたときに､ メールアドレスを入力しないと登録できないようにすることが理想です｡
そして､ そのために使える属性があり､ それは必須です｡
そして､ ここでは実際に値を指定する必要はありません｡ なぜなら､ 自動的にrequiredがtrueに等しいと仮定され､ このフォーム・フィールドは必須であることを意味するからです｡
ですから､ もし私が更新すると言って空白のまま登録をクリックすると､ このフィールドに入力してくださいと言うことになります｡
ここで､ 適切な電子メールフィールドであることも確認したいと思います｡
ですから､ このように入力しても､ これが不正なメールであることを確認したいのです｡
登録したくない｡
だから､ メールでお伝えしたテキストの入力タイプは､ 実は間違っているのです｡
具体的に使えるのは､ ご想像の通り､ メールです｡
そこで､ 更新して電子メールでないものを入力し､ 登録をクリックすると､ 次のようになります｡
アプリとメールアドレスを入れてくださいと言うことです｡
とても素晴らしい｡
なんだか､ 魔法みたいですね｡
これをやってくれるのは､ とてもとてもありがたいことです｡
入力に関する知識を発展させ､ 最も必要とされるであろうフィールドをいくつか追加してみましょう｡
普段は誰かの誕生日を知りたい｡
そこで､ ここに誕生日を追加しよう｡
そして､ この入力タイプには､ typeをやってみましょう｡
日付
ですから､ これを保存して更新すると､ これを見てください｡
日付指定も可能です｡
だから､ この中にあるものは何でも選べるんです｡
わかりました｡
他に必要なものは？
また､ 性別も必要です｡
そこで､ 入力､ タイプを行います｡
そして､ ジェンダーに対しても｡
まあ､ 性別の入力タイプは特にないのですが､ ラジオというのがありますね｡
そしてラジオはその名の通り､ ラジオボタンです｡
だから今
更新をクリックすると､ ラジオボタンが1つ表示されますが､ 理想的には選択肢があることが望ましいですよね？
では､ どうすればいいのか｡
だから､ ラジオの場合は､ 男性なのか女性なのか､ 性別の中で持っておこうということも必要です｡
こっちのセリフで一区切りして､ こう言うんです｡
入力タイプはラジオ､ 我々はメールとします｡
そして､ 私たちも望んでいます｡
女性です｡
そして､ 私たちも望んでいます｡
その他
そして､ これをリフレッシュすると､ 男性､ 女性､ その他があります｡
しかし､ ここに問題があると思いますね｡
ラジオボタンをクリックするだけなのに､ 選択解除ができない｡
そして､ 理想的には1つしか選択できないようにすることです｡
そして今､ ラジオボタンのあり方は､ 互いの存在を知らない｡
つながっていること､ 家族であること､ そして一人しか選べないことを､ しっかりと伝えていきたいと思っています｡
では､ どうすればいいのか｡
その方法は､ name属性で行います｡
だから､ 名前にはジェンダーと言うことにしています｡
そして､ この名前属性は､ すべてのラジオボタンで一致する必要があり､ 性別の入力フィールドの一部と一緒になっていることがわかるようにします｡
そこで､ ここで保存して更新すると
これで､ 1つしか選択できないことがおわかりいただけると思います｡
よし､ 完璧だ｡
他に何を持てばいいのか？
まあ､ ペットを飼っているかどうかをどうしても知りたいとしましょう｡
ペットもそうですね｡
入力型にする
まあ､ ペットは複数飼えるので､ ラジオボタンではないでしょうけど｡
チェックボックスが欲しい｡
チェックボックスは､ 猫を飼いたい､ あるいは猫と書いて､ 飼いたいと思うわけです｡
今日も打てる｡
チェックボックス､ そして犬を飼いたい｡
だから､ それを保存しておこう｡
リフレッシュして見よう｡
ペットを飼っていますが､ 今回はチェックボックス､ ということです｡
複数選択できる