こんにちは！40代プログラミング初心者のAIATTOです。
今日はHTML学習の7章「フォームを理解しよう」に挑戦しました。
フォームと聞いて最初に思い浮かんだのは、昔の紙の申込書や履歴書でしたが、Webのフォームはもっとインタラクティブで、まるで人との対話のような感覚でした！
今日学んだフォームの世界
フォームって何だろう？
最初は「フォーム」という言葉にピンときませんでしたが、実際に作ってみると「あ、これって普段使ってるアレだ！」と気づきました。ネットショッピングの会員登録、お問い合わせページ、アンケート調査…私が今まで何気なく使っていたものが、実はHTMLのフォーム機能だったんですね。
formタグから始まる冒険
最初に習ったのが<form>タグ。これがフォーム全体の「箱」みたいなものだと理解しました。何も表示されないので「本当にこれで合ってるの？」と不安になりましたが、これから中身を詰めていくんだと分かって安心しました。
テキストボックスで名前を入力
html
<input type="text" placeholder="名前を入力してください">
placeholder属性を初めて知った時の感動は忘れられません！薄い色で「名前を入力してください」と表示されるのを見て、「これって親切な機能だなあ」と思いました。ユーザーの立場に立った設計って、こういうことなんですね。
ラベルでユーザビリティアップ
<label>タグを学んで、フォームが一気に分かりやすくなりました。ただのテキストボックスが「氏名」という項目になると、急に本格的なフォームらしくなって嬉しかったです。
セレクトボックスの便利さを実感
<select>と<option>タグの組み合わせは最初少し複雑に感じましたが、実際に年代選択のプルダウンを作ってみると「これは便利！」と実感。選択肢が多い時は、この方がスッキリしますね。
テキストエリアで長文対応
<textarea>は複数行入力できるのが新鮮でした。お問い合わせ内容のような長い文章を書く時に必要不可欠ですね。テキストボックスとの使い分けがようやく理解できました。
ラジオボタンの「1つだけ」ルール
性別選択でラジオボタンを使いましたが、name属性を統一することで「1つだけ選択」が実現されるのは面白い仕組みでした。最初、なぜname="gender"を全部に付けるのか分からなかったのですが、実際に動かしてみて納得！
チェックボックスで同意確認
利用規約への同意チェックボックス。これは普段よく見かけるので、作れるようになって嬉しかったです。「はい」「いいえ」の2択をシンプルに表現できる良い仕組みですね。
送信ボタンとリセットボタン
最後に<input type="submit">と<input type="reset">を学習。送信ボタンはフォームの締めくくりとして重要だし、リセットボタンは「やり直したい」という人の気持ちに寄り添う機能だなと思いました。
今日の発見と感動ポイント
一番驚いたのは、フォームが「ユーザーとの対話」だということ。今まで何気なく入力していたフォームが、実は開発者がユーザーのことを考えて設計した「おもてなし」の塊だったんですね。
placeholder属性でヒントを出したり、ラベルで分かりやすく説明したり、適切な入力形式を選んだり…すべてがユーザーの使いやすさを考えた工夫でした。
学習を通じて感じたこと
40代になってからプログラミングを始めて、「今更感」を感じることもありましたが、人生経験があるからこそ「ユーザー目線」で物事を考えられるのかもしれません。今まで使う側だった私が、作る側の気持ちを理解できるようになったのは、大きな成長だと思います。
フォーム一つとっても、奥が深くて、まだまだ学ぶことがたくさんありそうです。次回はHTML/CSS応用編で、実際にフォームのデータを送信する仕組みを学ぶそうなので、今から楽しみです！
今日の学習で改めて実感したのは、「技術は人のためにある」ということ。
単にコードを書くだけでなく、使う人の立場に立って考える大切さを学びました。
継続12日目突破！
毎日少しずつでも前進している実感があります。
今日もフォーム作成を通じて、また一歩Webの世界に近づけた気がします。
・今日の名言： 「技術は人のためにある。フォーム一つにも、ユーザーへの思いやりが詰まっている」
・学習時間： 2時間30分
・理解度： 80%（各フォーム部品の基本的な作り方は理解できましたが、実際のWebサイトで使うにはaction属性やデータ送信の仕組みをもっと学ぶ必要があると感じています）
・感動度： 95%（フォームがユーザーとの対話だと気づいた瞬間は本当に感動的でした！技術の向こう側にある人への思いやりを実感できました）
