HTML チュートリアル > HTML 基礎知識 チュートリアル > フォームに関するHTMLタグ

HTMLでのフォームに関するタグの使い方を、サンプルを使って解説。

フォームに関するHTMLタグ

スポンサード リンク

HTMLのフォームは、異なる種類のユーザーの入力を選択するために使用されます。

フォームのサンプル

テキストフィールドのサンプル
このサンプルは、HTMLページにテキストフィールドを作る方法をデモンストレーションします。ユーザーはテキストフィールドにテキストを書くことができます。

パスワードフィールドのサンプル
このサンプルは、HTMLページにパスワードフィールドを作る方法をデモンストレーションします。

フォーム

フォームとは、form要素を含むことができるエリアです。

form要素は、フォームにユーザーが情報(テキストフィールド、テキストエリアフィールド、プルダウンメニュー、ラジオボタン、チェックボックスなど)を入力することを可能にする要素です。

フォームは、<form>タグによって定義されます。

<form>
<input>
<input>
</form>

input要素

最も使用されるフォームタグは、<input>タグです。入力のタイプはtype属性で指定します。一般的に使用される入力タイプを以下に示します。

テキストフィールド

ユーザーに文字や数字などを入力させたい場合、テキストフィールドを使用します。

<form>
姓:
<input type="text" name="myouji">
<br>
名:
<input type="text" name="namae">
</form>

ブラウザでは以下のように表示されます。

姓:
名:

フォーム自体は目には見えません。さらにほとんどのブラウザでは、テキストフィールドの幅がデフォルトで20文字であることに注意してください。

ラジオボタン

ユーザーに限られた数の選択肢のうちの1つを選択させたい場合、ラジオボタンを使用します。

<form>
<input type="radio" name="seibetsu" value="otoko"> 男
<br>
<input type="radio" name="seibetsu" value="onna"> 女
</form>

ブラウザでは以下のように表示されます。


1つの選択肢だけを選ぶことができます。

チェックボックス

ユーザーに限られた数の選択肢のうちの1つ以上のオプションを選択させたい場合、チェックボックスを使用します。

<form>
<input type="checkbox" name="bike">
私はバイクを持っています
<br>
<input type="checkbox" name="car">
私は車を持っています
</form>

ブラウザでは以下のように表示されます。

私はバイクを持っています
私は車を持っています

フォームのaction属性とsubmit(送信)ボタン

ユーザーがsubmit(送信)ボタンをクリックした場合、フォームの内容は別のファイルへ送られます。フォームのaction属性は、内容を送るファイルの名前を定義します。action属性に定義されたファイルは、入力された情報を受け取ります。

<form name="input" action="form.cgi" method="get">
ユーザー名:
<input type="text" name="user">
<input type="submit" value="submit(送信)">
</form>

ブラウザでは以下のように表示されます。

ユーザー名:

上記のテキストフィールドで文字を入力し、submit(送信)ボタンをクリックすれば、「form.cgi」ファイルに入力された情報が送られます。これはサンプルですので、実際は何も起こりません。

フォームのサンプル集

チェックボックスのサンプル
このサンプルは、HTMLページにチェックボックスを作成する方法をデモンストレーションします。ユーザーはチェックボックスを選択するかしないかを選ぶことができます。

ラジオボタンのサンプル
このサンプルは、HTMLページにラジオボタンを作成する方法をデモンストレーションします。

シンプルなドロップダウンメニューサンプル
このサンプルは、HTMLページにシンプルなドロップダウンメニューを作成する方法をデモンストレーションします。ドロップダウンメニューは選択可能なリストです。

選択されたドロップダウンメニューサンプル
このサンプルは、あらかじめ選択された値を備えたシンプルなドロップダウンメニューを作成する方法をデモンストレーションします。

テキストエリアのサンプル
このサンプルは、テキストエリア(複数行のテキスト入力)を作る方法をデモンストレーションします。ユーザーはテキストエリアでテキストを書くことができます。テキストエリアでは、無制限に多くの文字を書くことができます。

ボタンのサンプル
このサンプルは、ボタンを作成する方法をデモンストレーションします。ボタンにおいては、自分で好きな文字を定義することができます。

フォームのグループ化サンプル
このサンプルは、フォームデータをグループ化する方法をデモンストレーションします。

入力フィールドとsubmit(送信)ボタンを備えたフォームサンプル
このサンプルは、HTMLページにフォームを加える方法をデモンストレーションします。フォームには、2つの入力フィールドおよびsubmit(送信)ボタンを含んでいます。

チェックボックスとsubmit(送信)ボタンを備えたフォームサンプル
このフォームは、2つのチェックボックスおよびsubmit(送信)ボタンを含んでいます。

ラジオボタンとsubmit(送信)ボタンを備えたフォームサンプル
このフォームは、2つのラジオボタンおよびsubmit(送信)ボタンを含んでいます。

フォームに関するHTMLタグ一覧表

タグ説明
<form>ユーザー入力のためのフォームを定義します
<input>入力フィールドを定義します
<textarea>テキストエリア(複数行)を定義します
<label>ラベルの管理を定義します
<fieldset>フィールドセット(フォームのグループ化)を定義します
<legend>フィールドセットの説明文を定義します
<select>選択可能なリスト(プルダウンメニュー)を定義します
<optgroup>選択肢のグループを定義します
<option>プルダウンメニューの選択肢を定義します
<button>ボタンを定義します
<isindex>非推奨。代わりに<input>タグを使います
スポンサード リンク