【HTML入門】初心者でもformがわかる！0からフォーム作成

HTML フォームの基本構造

HTMLにおいて、フォームはユーザーからの情報を受け取るための重要な要素です。フォームを作成するためには、<form>タグと<input>要素を使用します。

formタグとinput要素

フォームを作成するためには、まず<form>タグを使用します。このタグは、フォーム全体を囲むためのものであり、以下のように記述します。

<form>
　<!-- フォームの内容 -->
</form>

次に、<input>要素を使用してフォーム内の入力項目を作成します。この要素は、テキストボックスやチェックボックスなどの様々な種類の入力フィールドを作成するために使用されます。以下に一例を示します。

<form>
　<input type="text" name="username">
</form>

上記の例では、<input>要素のtype属性に”text”を指定しています。これにより、テキストボックスが表示されます。また、name属性には、この入力フィールドの名前を指定します。名前は、サーバー側で送信されたデータを処理する際に使用されます。

フォームの属性と値

フォームにはさまざまな属性と値を設定することができます。例えば、以下のような属性を使用することができます。

• action属性
  フォームが送信された際にデータを送信するURLを指定します。例えば、<form action="/submit-form">のように記述します。
• method属性
  フォームのデータ送信方法を指定します。一般的には、”GET”または”POST”を指定します。”GET”はURLパラメータとしてデータが送信されるため、主にデータの取得に使用されます。一方、”POST”はリクエストの本文にデータが含まれるため、主にデータの送信に使用されます。

<form action="/submit-form" method="POST">
　<!-- フォームの内容 -->
</form>

これらはフォームの基本的な構造と属性です。上記の例を参考にしながら、自分だけのフォームを作成してみましょう。HTMLの基本を学びながら、より複雑なフォームを作成することも可能です。

HTMLでのテキスト入力フォームの作成

テキスト入力フォームは、ユーザーがテキスト情報を入力するための項目です。

以下では、テキスト入力フォームの作成と関連する属性について説明します。

テキスト入力フィールドの作成

テキスト入力フィールドは、ユーザーがテキストを入力するための領域です。以下のように、<input>要素を使用してテキスト入力フィールドを作成します。

<form>
　<input type="text">
</form>

上記の例では、<input>要素のtype属性に”text”を指定しています。これにより、テキスト入力フィールドが表示されます。ただし、このままではユーザーがどの項目に対してテキストを入力すべきかわかりません。

テキスト入力フィールドの属性と値

テキスト入力フィールドには、さまざまな属性と値を設定することができます。例えば、以下のような属性を使用することができます。

• name属性
  テキスト入力フィールドの名前を指定します。この名前は、フォームの送信時に入力されたテキストの値を識別するために使用されます。
• placeholder属性
  テキスト入力フィールドに表示されるプレースホルダーテキストを指定します。プレースホルダーテキストは、ユーザーに対して入力するべき内容を示すヒントとして表示されます。
• value属性
  テキスト入力フィールドの初期値を指定します。例えば、<input type="text" value="John Doe">のように記述すると、初期値として”John Doe”が表示されます。

<form>
　<input type="text" name="username" placeholder="ユーザー名を入力してください" value="">
</form>

ラベルの追加

テキスト入力フィールドに対して、その入力項目のラベルを追加することもできます。これにより、ユーザーがどの情報を入力すべきかが明確になります。

ラベルは、<label>要素を使用して作成します。以下の例では、”ユーザー名”というラベルを追加しています。

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

上記の例では、<label>要素のfor属性には、対応するテキスト入力フィールドのid属性と同じ値を指定しています。これにより、ラベルとテキスト入力フィールドが関連付けられ、クリックされたときに正しいフィールドが選択されます。

これらの要素と属性を使って、自分だけのテキスト入力フォームを作成してみましょう。HTMLの基本を学びながら、より複雑なフォームを作成することも可能です。

【HTML フォーム】ラジオボタンとチェックボックスの作成

ラジオボタンとチェックボックスは、ユーザーが選択肢を選ぶための項目です。

以下では、ラジオボタンとチェックボックスの作成方法について説明します。

ラジオボタンの作成

ラジオボタンは、ユーザーが複数の選択肢から1つだけを選ぶための項目です。以下のように、<input>要素のtype属性に”radio”を指定してラジオボタンを作成します。

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

上記の例では、2つのラジオボタンを作成し、それぞれにname属性で”gender”を指定しています。これにより、2つのボタンは同じグループとして扱われ、ユーザーはどちらか一方を選ぶことができます。また、value属性には、選択されたボタンに関連する値を指定します。

チェックボックスの作成

チェックボックスは、ユーザーが複数の選択肢を選ぶための項目です。以下のように、<input>要素のtype属性に”checkbox”を指定してチェックボックスを作成します。

<form>
　<input type="checkbox" name="hobby" value="reading"> 読書
　<input type="checkbox" name="hobby" value="sports"> スポーツ
　<input type="checkbox" name="hobby" value="music"> 音楽
</form>

上記の例では、3つのチェックボックスを作成し、それぞれにname属性で”hobby”を指定しています。ユーザーは複数のボックスを選択できます。選択されたボックスの値は、フォームが送信されたときにサーバーに送信されます。

これらの要素を組み合わせることで、複数のラジオボタンやチェックボックスを作成することもできます。また、それぞれの要素にはさまざまな属性と値を追加することも可能です。試してみながら、自分だけのフォームを作成してみましょう。HTMLの基本を学びながら、より複雑なフォームを作成することも可能です。

【HTML フォーム】セレクトボックスの作成

セレクトボックスは、ユーザーがリストから1つの選択肢を選ぶための項目です。以下では、セレクトボックスの作成方法について説明します。

セレクトボックスの基本構造

セレクトボックスは、ユーザーが複数の選択肢から1つを選ぶための項目です。以下のように、<select>要素と<option>要素を使用してセレクトボックスを作成します。

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

上記の例では、<select>要素でセレクトボックスを作成し、<option>要素で選択肢を追加しています。各<option>要素のvalue属性には、選択された項目に関連する値を指定します。また、<option>要素の間に記述されたテキストが、実際に表示される選択肢のテキストとなります。

オプションの追加

セレクトボックスには複数の選択肢を追加することができます。以下の例では、さらに選択肢を追加しています。

<form>
　<select name="city">
　　<option value="tokyo">東京</option>
　　<option value="osaka">大阪</option>
　　<option value="kyoto">京都</option>
　　<option value="sapporo">札幌</option>
　</select>
</form>

上記の例では、4つの選択肢を追加しました。ユーザーはこれらの選択肢から1つを選ぶことができます。

セレクトボックスには他にもさまざまな属性やオプションがあります。例えば、selected属性を使用すると、最初から特定の選択肢が選択された状態で表示されるようにすることができます。

これらの要素と属性を使って、自分だけのセレクトボックスを作成してみましょう。HTMLの基本を学びながら、より複雑なフォームを作成することも可能です。

【HTML フォーム】送信ボタンの作成

送信ボタンは、フォームのデータをサーバーに送信するためのボタンです。以下では、送信ボタンの作成とフォームデータの送信先の指定について説明します。

送信ボタンの追加

フォームを作成する上で欠かせないのが、送信ボタンです。ユーザーがフォームの内容を送信するためのボタンを作成する方法を学びましょう。

以下のように、<input>要素のtype属性に”submit”を指定して送信ボタンを作成します。

<form>
　<!-- フォームの内容 -->
　<input type="submit" value="送信">
</form>

上記の例では、”送信”というテキストが表示される送信ボタンが作成されます。ユーザーがこのボタンをクリックすると、フォームの内容が送信されます。

フォームデータの送信先の指定

フォームのデータを送信する先のURLを指定するためには、<form>要素のaction属性を使用します。以下の例では、フォームの内容を”/submit-form”というURLに送信しています。

<form action="/submit-form">
　<!-- フォームの内容 -->
　<input type="submit" value="送信">
</form>

上記の例では、action属性に”/submit-form”を指定しています。このURLは、フォームが送信されたときにデータが送信される先のサーバーサイドのスクリプトやエンドポイントを指定するために使用されます。

これらの要素と属性を使って、自分だけのフォームを作成してみましょう。送信ボタンを追加し、フォームデータの送信先を指定することで、ユーザーからの入力データをサーバーサイドで処理することができます。HTMLの基本を学びながら、より複雑なフォームを作成することも可能です。

HTML フォームのスタイリング

CSSを使用したスタイリング

HTMLフォームの見た目をカスタマイズするためには、CSS（Cascading Style Sheets）を使用します。以下の方法でフォームのスタイリングを行いましょう。

1. CSSを定義する
   HTMLの<style>要素内にCSSスタイルを定義します。または、外部のCSSファイルを作成し、<link>要素を使用してHTMLに読み込むこともできます。
2. セレクタを指定する
   スタイルを適用する要素を指定するために、CSSセレクタを使用します。たとえば、フォーム全体をスタイリングするには、<form>要素のセレクタを指定します。
3. スタイルプロパティを設定する
   セレクタ内でスタイルプロパティを指定します。たとえば、背景色やフォントのスタイル、ボーダーのスタイルなどを設定することができます。

例えば、以下のようにCSSを使用してフォームの背景色とフォントサイズを変更することができます。

<style>
　form {
　　background-color: lightblue;
　　font-size: 16px;
　}
</style>

<form>
　<!-- フォームの内容 -->
　<input type="text" name="name" placeholder="名前を入力してください">
　<input type="submit" value="送信">
</form>

フォームのレイアウト

フォームのレイアウトをカスタマイズするためには、CSSのレイアウトプロパティを使用します。たとえば、フォーム内の要素を横並びに配置する場合は、display: inline-block;を使用することができます。

以下の例では、2つの入力フィールドを横並びに配置しています。

<style>
　form {
　　background-color: lightblue;
　　padding: 10px;
　}
　input {
　　display: inline-block;
　　margin-right: 10px;
　}
</style>

<form>
　<input type="text" name="name" placeholder="名前を入力してください">
　<input type="email" name="email" placeholder="メールアドレスを入力してください">
　<input type="submit" value="送信">
</form>

上記の例では、<form>要素と<input>要素に対してスタイルを指定しています。フォームの背景色や余白、入力フィールドの横並びなどのスタイルを指定することで、フォームを自由にカスタマイズすることができます。

これらの方法を使用して、自分だけのフォームをスタイリングしてみましょう。CSSを使ってフォームの外観やレイアウトを調整することで、より魅力的なフォームを作成することができます。

プログラミングスクールなら
忍者CODE

質問に答えて簡単１分の適正プラン診断！

HTML フォームのバリデーション

必須フィールドの設定

フォームのバリデーションとは、ユーザーがフォームに必要な情報を入力することを確認する仕組みです。必須フィールドを設定することで、ユーザーが欠けている情報を入力するように促すことができます。

以下のように、<input>要素のrequired属性を使用して必須フィールドを設定します。

<form>
　<input type="text" name="name" required>
　<input type="email" name="email" required>
　<input type="submit" value="送信">
</form>

上記の例では、”名前”と”メールアドレス”の入力フィールドにrequired属性を追加しました。これにより、ユーザーはこれらのフィールドを入力する必要があります。もし必須フィールドが入力されていない場合、フォームの送信はブラウザによってブロックされます。

入力値の検証

フォームのバリデーションは、入力された値が正しい形式や範囲になっているかどうかを検証することもできます。HTML5では、いくつかの入力タイプに対して検証を行うための属性が提供されています。

例えば、以下のように、<input>要素のtype属性に”email”を指定することで、メールアドレスの形式が正しいかどうかを検証することができます。

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

上記の例では、”メールアドレス”の入力フィールドにtype="email"を設定しました。これにより、ブラウザは入力された値がメールアドレスの形式に適合しているかどうかを検証します。もし適合していない場合、フォームの送信はブロックされます。

これらの方法を使用して、フォームのバリデーションを設定してみましょう。必須フィールドを指定し、入力値の形式や範囲を検証することで、ユーザーから正しい情報を受け取ることができます。

HTML フォームの応用

フォームデータの保存

フォームを送信したデータをサーバーサイドで保存することは非常に重要です。サーバーサイドの処理やデータベースとの連携を行うことで、フォームからのデータを永続的に保存することができます。

フォームデータを保存するためには、サーバーサイドのプログラミング言語（例: PHP、Node.js、Pythonなど）を使用する必要があります。この記事では具体的なサーバーサイドの実装方法には触れませんが、フォームデータを保存するための一般的な手順を紹介します。

1. サーバーサイドのプログラムを作成する
   フォームデータを受け取り、データベースやファイルに保存するためのサーバーサイドのプログラムを作成します。
2. フォームのaction属性を指定する
   フォームのaction属性にサーバーサイドのプログラムが処理を受け取るエンドポイントを指定します。
3. フォームデータをサーバーサイドに送信する
   フォームのデータを送信するために、通常はフォームの送信ボタンをクリックします。このとき、指定したaction属性に設定されたURLに対して、フォームデータが送信されます。

AJAXを使用した非同期送信

フォームの送信をページのリロードなしに行いたい場合、AJAX（Asynchronous JavaScript and XML）を使用して非同期送信を行うことができます。これにより、ユーザーがフォームを送信した後もページの再読み込みを行わずに結果を表示することができます。

Ajaxとは、あるWebページを表示した状態のまま、別のページや再読込などを伴わずにWebサーバ側と通信を行い、動的に表示内容を変更する手法。ページ上でプログラムを実行できるプログラミング言語JavaScriptの拡張機能を用いる。
引用：IT用語辞典 e-Words

AJAXを使用した非同期送信の実装には、JavaScriptとサーバーサイドのプログラムが必要です。JavaScriptのライブラリやフレームワーク（例: jQuery、Axios、Fetch APIなど）を使用すると、簡単にAJAXリクエストを行うことができます。

以下の例では、Fetch APIを使用して非同期でフォームデータを送信し、サーバーサイドからの応答を取得して表示しています。

<script>
　function submitForm() {
　　const form = document.querySelector('form');
　　const formData = new FormData(form);

　　fetch('/submit-form', {
　　　method: 'POST',
　　　body: formData
　　})
　　.then(response => response.json())
　　.then(data => {
　　　// 応答データを処理して表示する
　　　console.log(data);
　　})
　　.catch(error => {
　　　// エラーハンドリング
　　　console.error(error);
　　});
　}
</script>

<form>
　<!-- フォームの内容 -->
　<button type="button" onclick="submitForm()">送信</button>
</form>

上記の例では、submitFormというJavaScript関数が呼び出され、フォームデータが非同期で送信されます。サーバーサイドのプログラムは/submit-formエンドポイントにあるものとしています。

これらの方法を使用して、フォームデータを保存したり、非同期で送信したりすることができます。サーバーサイドのプログラムやJavaScriptの知識が必要になる場合もありますが、基本的な考え方を理解することで、より高度なフォームの処理を行うことができるでしょう。

挫折することなくHTMLを習得するなら

独学？スクール？

ここまで、HTMLとは何なのか？について概念的な話から各要素の役割、各要素の使い方なども交えて紹介してきました。

ただ、実際学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

まとめ

この記事では、HTMLのフォーム作成について学びました。以下、まとめになります。

• フォームの基本構造は、<form>タグとその内部に配置する入力要素で構成されます。
• テキスト入力フィールドやラジオボタン、チェックボックス、セレクトボックスなど、さまざまな入力要素を作成する方法を学びました。
• 各入力要素には属性を設定することができ、属性には値を指定することで振る舞いやスタイルを変更できます。
• フォームデータの送信には、送信ボタンを作成し、<form>タグのaction属性を使用して送信先の指定を行います。
• CSSを使用してフォームをスタイリングする方法や、フォームのレイアウトについても学びました。
• 必須フィールドの設定や入力値の検証により、ユーザーが正しいデータを入力することを確認できます。
• フォームデータの保存には、データベースやファイルへの保存が一般的です。
• AJAXを使用することで、フォームデータの非同期送信が可能となり、ユーザーエクスペリエンスが向上します。

以上が、HTMLフォーム作成の基本的な内容と応用技術についてのまとめです。これらの知識を活用して、使いやすく魅力的なフォームを作成しましょう。