html フォーム 作成

HTML フォーム 作成の基本ガイド

この記事では、HTMLを使ってフォームを作成する方法を初心者向けに解説しました。フォームの基本的な概念から、formタグ、inputタグ、textareaタグ、selectタグなど、フォーム作成に必要なHTMLタグの使い方を、コード例を交えて説明しました。テキストフィールド、ラジオボタン、チェックボックス、セレクトボックスといった様々なフォーム要素の作成方法、ラベルとの連動、プレースホルダーの設定、初期値の設定方法などを学び、簡単な問い合わせフォームの作成例を通して、HTMLフォーム作成の基本を理解できるようになっています。

【初心者向け】0からformがわかる｜HTMLでのフォーム作成

このガイドでは、HTMLを使ってフォームを作成する方法を、基本から丁寧に解説します。

html フォーム 作成 - フォームとは？

ウェブサイトでユーザーが情報を入力・処理するための要素がフォームです。問い合わせフォーム、検索フォーム、ログイン画面など、様々な場面で利用されます。HTMLフォーム作成の基本を理解することは、Web制作の第一歩と言えるでしょう。

html フォーム 作成 - 学習に必要なステップ

HTMLフォーム作成は、表示とデザインの調整、そして動作処理の2つのステップで学習します。このガイドでは、まずHTMLとCSSを使った表示とデザイン調整に焦点を当てます。

html フォーム 作成 - 各項目の名前

HTMLフォーム作成で使用する主な項目は以下の6種類です。それぞれの機能を理解しましょう。

  • テキストフィールド: 1行のテキストを入力

  • セレクトボックス: 複数の選択肢から1つを選択

  • ラジオボタン: 複数の選択肢から1つを選択

  • チェックボックス: 複数の選択肢から複数を選択

  • テキストエリア: 複数行のテキストを入力

  • 送信ボタン: 入力内容を送信

html フォーム 作成 - 欠かせないformタグ

HTMLフォーム作成にはformタグが必須です。

<form action="処理を行うURL" method="送信方法">
  <!-- フォームの要素を記述 -->
</form>

action属性には、フォームデータの送信先URLを指定します。method属性には、送信方法（getまたはpost）を指定します。

html フォーム 作成 - inputでテキストフィールドをつくる

テキストフィールドは、<input>タグで作成します。

<input type="text" name="username" placeholder="ユーザー名">

type="text"でテキストフィールドを指定します。name属性は、データを送信する際に使用する名前です。placeholder属性は、入力欄に薄い文字でヒントを表示します。 type属性には、number（数字入力）、email（メールアドレス入力）なども指定できます。

html フォーム 作成 - labelで項目とフィールドを連動

<label>タグを使うと、項目名をクリックした際に対応する入力フィールドがフォーカスされます。

<label for="username">ユーザー名:</label>
<input type="text" id="username" name="username">

labelタグのfor属性とinputタグのid属性を同じ値にすることで連動します。

html フォーム 作成 - textareaでテキストエリアを表示する

複数行のテキスト入力には、<textarea>タグを使います。

<textarea name="message" rows="4" cols="50"></textarea>

rows属性で行数、cols属性で列数を指定します。resize: both;というCSSを適用することで、ユーザーがテキストエリアのサイズを変更できるようになります。

html フォーム 作成 - placeholderで薄い文字を表示する

placeholder属性は、入力フィールドに薄い文字でヒントを表示します。

<input type="text" name="search" placeholder="検索キーワードを入力">

html フォーム 作成 - selectでセレクトボックスを表示

セレクトボックスは、<select>タグと<option>タグで作成します。

<select name="country">
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
</select>

value属性は、選択された値として送信されるデータです。

html フォーム 作成 - radioでラジオボタンを表示

ラジオボタンは、<input type="radio">で作成します。

<input type="radio" id="male" name="gender" value="male">
<label for="male">男性</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">女性</label>

同じname属性を持つラジオボタンは、1つしか選択できません。

html フォーム 作成 - checkboxでチェックボックスを表示

チェックボックスは、<input type="checkbox">で作成します。

<input type="checkbox" id="agree" name="agree" value="1">
<label for="agree">同意する</label>

html フォーム 作成 - nameでグループ化する

name属性は、送信されるデータの名前を指定するだけでなく、ラジオボタンやチェックボックスをグループ化する役割も持ちます。同じname属性を持つラジオボタンは、1つしか選択できません。

html フォーム 作成 - submitで送信ボタンを表示

送信ボタンは、<input type="submit">で作成します。

<input type="submit" value="送信">

html フォーム 作成 - resetでリセットボタンを表示

リセットボタンは、<input type="reset">で作成します。

<input type="reset" value="リセット">

html フォーム 作成 - 初期値を設定する

テキストフィールドやテキストエリアはvalue属性、セレクトボックスはselected属性、ラジオボタンとチェックボックスはchecked属性で初期値を設定できます。

<input type="text" name="name" value="山田太郎">
<select name="country">
  <option value="jp" selected>日本</option>
</select>
<input type="radio" name="gender" value="male" checked>

html フォーム 作成 - 簡単なフォームを作ってみよう

以下のコードは、簡単な問い合わせフォームの例です。

<form action="submit.php" method="post">
  <label for="name">お名前:</label><br>
  <input type="text" id="name" name="name"><br><br>

  <label for="email">メールアドレス:</label><br>
  <input type="email" id="email" name="email"><br><br>

  <label for="message">お問い合わせ内容:</label><br>
  <textarea id="message" name="message"></textarea><br><br>

  <input type="submit" value="送信">
</form>

html フォーム 作成 - 要点まとめ

HTMLフォーム作成には、formタグ、inputタグ、labelタグ、そしてname属性が重要です。これらの要素を理解することで、様々なフォームを作成できます。

参考文献

詳細な情報については以下のリンクを参照してください。
MDN Web Docs - HTMLフォーム

関連QA

Q1: HTMLフォームの送信先はどうやって決めるの？

A1: フォームタグのaction属性に送信先のURLを指定します。

Q2: フォームのデザインをカスタマイズするには？

A2: CSSを使用してフォームのスタイルを変更することができます。

Q3: GETメソッドとPOSTメソッドの違いは何ですか？

A3: GETメソッドはデータをURLに表示しますが、POSTメソッドはデータをボディに含めて送信し、より安全です。