こんにちは！駆け出しエンジニアのまるです👓🦍
前回の記事では、HTMLタグの基本について解説しました。
そこで今回は、「HTMLフォーム 入門」として、
Webページに欠かせないフォームの作り方を初心者向けに解説します。
お問い合わせフォームや会員登録フォームなど、
ユーザーに入力してもらう場面で必ず登場するのが「HTMLフォーム」です。
まずは難しいことを考えずに、
「名前」「メール」「メッセージ」を入力できる
いちばんシンプルなフォームを作ってみましょう✨️
フォームとは？
まず、フォームとは、
Webページからユーザーが情報を入力し、送信できる仕組みのことです。
たとえば、次のような場面で使われています。
- お問い合わせページの「お名前・メール・内容」入力欄
- 会員登録やログイン画面
- ショッピングサイトの購入画面
このように、フォームがあることで
Webページは「見るだけのページ」から
「やり取りできるページ」へと進化します。
基本フォームのコード例
それでは、まず完成形のコードを見てみましょう👇️
<form action="#" method="post">
<label>お名前：<input type="text" name="name"></label><br>
<label>メール：<input type="email" name="email"></label><br>
<label>メッセージ：<textarea name="message"></textarea></label><br>
<input type="submit" value="送信">
</form>このコードを書くことで、
「名前・メール・メッセージ」を入力できる
基本的なHTMLフォームを作ることができます。
フォーム全体の仕組みを理解しよう
まずは、フォーム全体の仕組みから見ていきましょう。
<form>タグ
フォームは、<form>タグで全体を囲みます。
これは、入力欄をまとめる”大きな箱”のような存在です。
<form action="#" method="post">ここで使われている属性は、次の２つです。
- action=”#”
→ 入力内容の送信先（今回はまだ学習前なので仮で＃） - method=”post”
→ 情報の送り方（フォームでは基本的にこの書き方でOK）
👉フォームを作る時は、まず<form>で囲む
これだけ覚えておけばOKです。
文字を入力する欄を作る
次に文字を入力する欄を見ていきましょう。
<input type=”text” name=”name”>
<input type="text" name="name"></label>これは、１行の文字入力欄です。
「お名前」や「ユーザー名」を入力するときによく使われます。
<input type=”email”>
<input type="email" name="email">こちらは、メールアドレス専用の入力欄です。
- ＠が入っていないとエラーになる
- メール形式かどうかをブラウザがチェックしてくれる
つまり、普通のtextより少し賢い入力欄です。
<textarea>
<textarea name="message"></textarea>これは、複数行の文章を入力できる欄です。
そのため、
お問い合わせ内容やコメントなど、
長い文章を書くときに使われます。
送信ボタンを作る
最後に、送信ボタンを作ります。
<input type=”submit”>
<input type="submit" value="送信">このボタンを押すと、
フォームに入力した内容が送信されます。
なお、今回は送信先をまだ作っていないので、
「送信しても何も起こらない」状態でOKです。
<br>について（ちょっと補足）
ここで、コードに出てきた<br>について補足しておきます。
<br>は、改行をするためのタグです。
<br>今回は入力欄を縦に並べるために使っていますが、
後でCSSを使うようになると、<br>はあまり使わなくなります。
👉️今は「見やすく並べるための方法」くらいの理解でOKです。
ブラウザでの表示イメージ
このコードをブラウザで表示すると、
- 「お名前」「メール」「メッセージ」の入力欄
- その下に「送信ボタン」
が縦に並んだ、シンプルなフォームが表示されます。
👉️ここで「入力できた！」という体験がとても大事です✨️
まとめ｜まずは”入力できるフォーム”を作れればOK
今回は、HTMLフォーム入門として、
基本中の基本となる校正を学びました。
- <form>：フォーム全体を囲む
- <input type=”text”>：一行入力
- <input type=”email”>：メールアドレス入力
- <textarea>：複数行入力
- <input type=”submit”>：送信ボタン
フォームを使うことで、
Webページは「読むだけ」から「参加できる」ページに変わります。
フォームはWebページに命を吹き込む道具なんだ！
次回は、
チェックボックスやラジオボタンといった
「選べるフォーム」の作り方を紹介します✨️
少しずつできることを増やしていきましょう！
コメント