HTML・CSS 100日チャレンジ、6日目。
今日学んだのは、HTMLのフォームについてです。
Webサイトを見ていると、名前やメールアドレスを入力したり、お問い合わせ内容を書いたりする「入力欄」をよく見かけますよね。
今までは何気なく使っていましたが、今日勉強してみて、
「この入力欄たちって、実はいくつかのHTMLタグを組み合わせてできているんだ……！」
と、地味に感動しました。
普段何気なく使っているお問い合わせフォームも、裏側ではHTMLのタグがそれぞれ役割を持って動いているんですね。
今日はまだ「フォームを作る」というより、それぞれのタグが何をしているのかを理解する段階。
自分の理解が追いつくように、一つずつ整理していきます。
HTMLのフォームとは？
まず、今日のテーマである「フォーム」。
フォームとは、Webサイト上でユーザーが情報を入力するための仕組みです。
たとえば、
- 名前
- メールアドレス
- 電話番号
- お問い合わせ内容
- アンケート
- パスワード
などを入力する場所ですね。
そして、こうした入力欄を作るために使うのが、今回学んだHTMLタグです。
今日学んだタグ
formタグinputタグtextareaタグlabelタグbuttonタグ
最初は「入力欄を作るだけで、こんなにタグがあるの？」と思いました。
でも、一つずつ役割を見ていくと、それぞれちゃんと意味があります。
formタグ：フォーム全体をまとめる箱
まずはformタグ。
私の今の理解では、フォーム全体をまとめておく親分のようなタグです。
<form>
<!-- ここに入力欄やボタンを入れる -->
</form>
この中に、名前の入力欄やメールアドレスの入力欄、お問い合わせ内容、送信ボタンなどを入れていきます。
さらにformタグには、
action：入力されたデータの送信先method：データの送信方法（GET・POST）
などを指定できます。
ただ、ここはまだ実際にフォームを送信するところまで学習していないので、今は
「そういう設定があるんだな」
くらいで一旦ストップ。
分からないところを全部その日に理解しようとしなくてOK。
今の段階では「formタグはフォーム全体を囲むもの」と分かれば十分です。
100日チャレンジでは、先取りして全部覚えようとするより、今やっているカリキュラムを一つずつ理解することを大事にしています。
inputタグ：一行の入力欄を作る
次にinputタグ。
これは、フォームでよく見る一行の入力欄を作るためのタグです。
例えば名前なら、
<label>名前</label>
<input type="text">
メールアドレスなら、
<label>メールアドレス</label>
<input type="email">
こんな感じです。
inputタグの面白いところは、typeによって入力欄の種類や動きが変わること。
type=”text”
<input type="text">
普通の文字を入力するための入力欄です。
名前や住所など、さまざまな文字を入力できます。
type=”email”
<input type="email">
メールアドレスの入力を想定したタイプです。
ブラウザ側で、入力内容がメールアドレスとして適切な形式かどうかをある程度チェックしてくれます。
「ただ文字を入力するだけじゃないんだ！」
と、ここはちょっと面白かったところです。
inputタグにはまだまだ種類があるらしい
今回使ったのはtextとemailだけ。
でも調べてみると、inputタグには他にもいろいろなtypeがあります。
例えば、
<input type="tel" placeholder="電話番号">
<input type="date">
<input type="checkbox">
<input type="radio">
など。
電話番号や日付、チェックボックス、ラジオボタンなど、見たことのあるフォームの部品がたくさん出てきます。
「え、フォームって全部同じinputじゃないの？」
「そうなんです。typeを変えることで、用途に合わせた入力欄を作れるんですよ。」
HTMLって、思っていたより細かく役割分担されているんですね。
今回はまだ触っていないtypeも多いので、今後実際に使いながら覚えていきたいと思います。
textareaタグ：複数行の入力欄を作る
次はtextareaタグ。
お問い合わせフォームなどで、長めの文章を入力してもらうときに使うタグです。
<label>お問い合わせ内容</label>
<textarea></textarea>
例えば、
「お問い合わせ内容を入力してください」
というような大きな入力欄を作るときに使います。
そして、ここで私はちょっとつまずきました。
textareaには閉じタグが必要だった
inputタグと同じような感覚で書いていた私は、
「textareaも入力欄だから、閉じタグはいらないんじゃない？」
と、勝手に思い込んでいました。
ところが、
<textarea>
だけではなく、
<textarea></textarea>
と書く必要があります。
「なんかレイアウトがおかしい……」
としばらく悩んで、
「あれ？閉じタグがないぞ」
と気づきました。
しかも、このミスを2回やりました。
エラーメッセージが出てくれるわけではないので、
「なんか下の要素の位置がおかしい」
という見た目の違和感から原因を探すことに。
こういう小さなミスを実際に経験すると、逆に覚えやすいですね。
「textareaは閉じタグが必要」
これは今日しっかり覚えました。
labelタグ：この入力欄は何を書く場所？
次はlabelタグ。
labelは、入力欄に対して
「ここには何を入力してください」
と説明する役割を持つタグです。
例えば、
<label>名前</label>
<input type="text">
というように使います。
今の私の理解では、
label＝入力項目の説明
という感じです。
名前なら「名前」、メールアドレスなら「メールアドレス」と表示して、ユーザーが何を入力すればいいのか分かるようにします。
labelとinputは紐づけることができる
ここは今回、少しだけ先取りして調べたところです。
labelにはfor属性、inputにはid属性を設定して、2つを紐づけることができます。
例えば、
<label for="name">名前</label>
<input type="text" id="name">
という書き方です。
こうすると、ラベル部分をクリックしたときにも入力欄にフォーカスが当たるなど、より使いやすいフォームにできます。
スクリーンリーダーを使う人にとっても、入力項目と入力欄の関係が分かりやすくなるそうです。
ただし、ここはまだカリキュラムで本格的に学んでいない部分。
なので今回は、
「labelとinputはfor属性・id属性で紐づけることができる」
というところまで覚えておくことにしました。
実際に手を動かして練習するのは、DAY7以降にしておきます。
先に進みすぎて混乱するより、今は基本をしっかり身につけることを優先します。
buttonタグ：送信ボタンを作る
最後はbuttonタグ。
フォームでよく見る「送信」ボタンなどを作るためのタグです。
<button>送信</button>
これだけでもボタン自体は作れます。
名前を入力して、メールアドレスを入力して、お問い合わせ内容を書いて……
最後に「送信」。
普段何気なく押しているボタンも、HTMLではbuttonタグで作られているんですね。
ただし、「ボタンを表示すること」と「実際にデータを送信して処理すること」は別の話。
今回はまだ「見た目として送信ボタンを作る」ところまでです。
ここから先は、フォームを実際に動かすための知識が必要になってくるようなので、今後の楽しみにしておきます。
HTMLフォームを作ってみてつまずいたこと
今日一番苦戦したのは、
「タグを並べるだけの状態から、意味のある構造として考えること」
でした。
特にtextarea。
閉じタグを書き忘れてレイアウトが崩れたのは、今日だけで2回。
「なんか変だな？」
↓
「どこがおかしいんだろう？」
↓
「タグの閉じ忘れか！」
という感じで、一つずつ原因を探しました。
まだまだ「エラーを見てすぐ原因が分かる」というレベルではありません。
でも、こうやって実際にミスをすると、
「このタグには閉じタグが必要なんだ」
ということが頭に残ります。
今は、きれいなコードを書くことよりも、自分で間違えて、自分で原因を見つける経験も大事なのかなと思っています。
3児ママのHTML学習｜今日も30分だけ勉強
そして、今日も3児ママとしての現実的な話。
子ども3人のワンオペ育児をしながら、まとまった学習時間を確保するのは簡単ではありません。
今日も、
- 下の子のお昼寝中
- 上の子たちが学校・保育園に行っている時間
- 家事の合間
などの隙間時間をかき集めて、なんとか30分ほど勉強しました。
たった30分。
でも、100日チャレンジを始めてから、この「たった30分」の積み重ねが意外と大きいことに気づきました。
6日前の私は、h1やpタグくらいしか知らなかった。
それが今日は、
- フォームとは何か
formタグの役割inputタグの種類textareaの役割labelの意味buttonの役割
まで、なんとなくですが理解できるようになっています。
もちろん、まだまだ分からないことだらけです。
でも、
「昨日の自分より、ほんの少しだけ分かるようになった」
この感覚が、100日チャレンジを続けるモチベーションになっています。
今日の気づき・学んだこと
今日学んだことを、最後にまとめておきます。
formタグ
フォーム全体をまとめる親のようなタグ。
actionで送信先、methodで送信方法を指定できる。
inputタグ
一行の入力欄を作るタグ。
typeを変えることで、文字・メールアドレス・電話番号・日付など、用途に合わせた入力欄を作れる。
textareaタグ
複数行の入力欄を作るタグ。
お問い合わせ内容など、長い文章を入力するときに使う。
そして、inputと違って閉じタグが必要。
labelタグ
入力項目の説明をするタグ。
for属性とinputのid属性を使って紐づけることができる。
buttonタグ
送信ボタンなどのボタンを作るタグ。
今日一番印象に残ったこと
今日一番印象に残ったのは、
普段何気なく使っているフォームにも、たくさんのHTMLタグが使われている
ということでした。
名前を入力する。
メールアドレスを入力する。
お問い合わせ内容を書く。
最後に送信ボタンを押す。
私たちが普段当たり前のようにやっている操作も、HTMLの世界では一つ一つ役割が分かれているんですね。
そして、ちゃんと理解しようとすると、思っていた以上に奥が深い。
「ただ入力欄を作るだけじゃないんだな」
というのが、今日の一番の気づきでした。
今はまだ基本のタグを覚えるだけで精一杯ですが、焦らず一つずつ身につけていきたいと思います。
3人の子どもたちにも言いたい。
「一気に全部できなくていい。少しずつで大丈夫。」
……これ、今の自分にもそのまま言える言葉でした。
今日やったこと
- HTMLフォームについて学んだ
formタグについて学んだ- 名前の入力欄を作った
- メールアドレスの入力欄を作った
- お問い合わせ内容の入力欄を作った
buttonタグで送信ボタンを作ったinputのtypeについて調べたlabelとinputの紐づけについて少し先取りした
まだ実際に送信して動く状態までは作れていません。
でも、
「ただ入力欄が並んでいるだけ」から「それぞれ意味のあるHTMLタグで構成されている」
という見方ができるようになったのは、大きな一歩でした。
次回は、このフォームにCSSを使って見た目を整えていく予定です。
そして、今日気になったlabelのfor属性とinputのid属性の紐づけについては、DAY7以降の学習で改めて詳しく勉強していきます。
まだまだ初心者。
でも、初心者だからこそ「分からなかったこと」「つまずいたこと」も全部記録していきます。
HTML・CSS 100日チャレンジ、DAY6終了。
明日はDAY7。
引き続き、コツコツ頑張ります。
コメント