LESSON 03 / 03 約4分
入力欄を作ってみよう
まずは仕組みをつかもう。細かい書き方は覚えなくて大丈夫。
01 これは何？
フォーム＊1は利用者が情報を入力する場所です。inputは短い入力欄、textareaは長い文章の欄、buttonは操作ボタンです。labelで入力欄の名前を示すと、何を書く場所かが分かりやすくなります。
＊1 フォーム：入力欄やボタンをまとめた仕組み。
02 なぜ必要？
投稿サイトには、本文を書く欄が必要です。HTMLで入力欄は作れますが、保存にはPHPなどの処理が別に必要です。まずは入力しやすい画面を作り、その後に入力確認、送信、保存を順に結び付けていきます。
03 最小限のコード・図
<form>
<label for="message">投稿本文</label>
<textarea id="message" name="message"
maxlength="280" required></textarea>
<button type="button">投稿する（画面の見本）</button>
</form>04 ここだけ理解する
- labelのforと入力欄のidを合わせる。
- nameは送信する値の名前になる。
- このボタンは画面の見本。送信・保存はまだ行わない。
05 覚えなくていいこと
入力欄の種類を全部覚えなくてOK。必要な入力内容をAIに伝えましょう。
ASK AI
06 AIに聞いてみよう
質問文をコピーして、ChatGPTやCodexなどに貼り付けてみましょう。
280文字までの投稿フォームをHTMLで作ってください。今回は画面だけにし、ボタンでは送信しないでください。label、name、requiredの役割と、サーバーでも入力確認が必要な理由を説明してください。
07 AIの回答を見るポイント
- 入力欄の名前と欄が正しく結び付いているか。
- HTMLの入力制限だけで安全だと説明していないか。
08 だいたい分かったら、次へ
「理解できた」はいつでも取り消せます。記録せずに次へ進んでも大丈夫です。