HTML フォームの使い方や設置

HTML フォームの設置

HTML form 要素やフォームの部品などの使い方や設置方法に関する説明やサンプルを掲載しています。

更新日：2022年03月09日

作成日：2015年08月13日

フォームはお問い合わせやアンケートなどで、ユーザーが入力した内容をサーバー上のプログラムにデータとして送信するための仕組みです。

フォームに関連付けられるプログラムは、原則として１つだけです。１つのフォームの中で送信ボタンを複数設置するような使い方はできません。そのような場合は、フォームを分けて設計する必要があります。

HTML5 では新しいフォーム関連要素や検証関連の属性が追加されています。

参照：HTML5 フォーム関連要素

form 要素

フォームの最上位要素として form 要素があります。form 要素でフォームの範囲を以下のように定義します。

<form>
・・・
フォームの内容
・・・
</form>

フォームをプログラムと関連付けるために、action 属性と method 属性を指定します。

action 属性では、どこにデータを送るかを指定します。言い換えると、データを受け取るプログラムを指定します。

method 属性では、データの送信方法を指定します。

action 属性: action = "URL"
フォームの内容を処理するプログラムの URL （データの送信先）を指定します。※HTML5 からは自分自身に送信する場合は action 属性自体を省略します。form タグの action 属性

method 属性

method = "HTTP メソッド"
フォームの内容を処理（送信）する方法を以下のいずれかの値を指定します。詳細は「HTTP 通信」を参照してください。

post ：フォームの本文として送信。問い合わせフォームやアンケートなどは通常はこちらを指定します。
get ：フォームの内容を URL に ? 区切りで追加して送信（デフォルト）

<form action="contact.php" method="post" >
・・・
フォームの内容
・・・
</form>

その他の属性

enctype="MIMEタイプ": 送信の際のデータ形式（MIMEタイプ）を指定します。この属性で Content-Type HTTP ヘッダの値を指定できます。デフォルト値は application/x-www-form-urlencoded です。ファイルを送信する場合は、 multipart/form-data に設定します。

accept-charset="文字セット": プログラム等のデータの受け側で、受付可能な文字セットを指定します。半角カンマ区切りで、複数指定することができます。

accept="MIMEタイプ": プログラム等のデータの受け側で、処理可能な MIME タイプを指定します。

name="名前（識別子）": スクリプト言語（プログラム）などから参照できるよう名前（識別子）を指定します。名前にはハイフンを使わないようにします。

target="フレーム名": フォーム送信の結果を表示するフレーム、またはウィンドウの名前を指定します。

HTML5 では以下の属性が追加されています。

autocomplete

input 要素がデフォルトで、ブラウザによる値の入力補完を受けるかを指定します。この設定はフォームに属する要素の autocomplete 属性で上書きできます。以下の値が指定可能です。

off: ユーザは、フォームを使用する度に全ての値を入力するか、もしくは独自の入力補完を使用する必要があります。ブラウザが入力補完をサポートする事はありません。
on: ブラウザはユーザが以前に入力した値に基づき、これを自動補完の為の候補として使用する事ができます。

novalidate: フォームが送信された時にバリデート（検証）しない事を示す真偽値です。もしこの属性が指定されていない（つまりバリデートされる）場合、この設定の初期値は <button> もしくは <input> の formnovalidate 属性によって上書きする事ができます。

form タグの action 属性

<form>タグの action属性が「""」（空）である場合は、自分自身に送信することを意味します（HTML5 より前の場合）。HTML5からは自分自身に送信する場合は action 属性自体を省略します。

<form id="my_form" method="post">

$_SERVER['PHP_SELF']も自分自身への送信になりますが、$_SERVER['PHP_SELF']を action 属性値として直接 <form> タグに記述すると XSS 脆弱性となるので、絶対に避けてください。「""」（空）にするか、以下のように htmlspecialchars() 関数でエスケープします。

<form method="post" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF'], ENT_QUOTES, 'UTF-8'); ?>">

自分自身に送信する場合、HTML5 からは action 属性を省略します。HTML5 で action 属性の値を空にすると W3C の Validator で「Error: Bad value for attribute action on element form: Must be non-empty」のようなエラーになります。

textarea 要素

複数行のテキスト入力欄を作成する場合は、インライン要素の textarea 要素を利用できます。

1行テキスト入力フィールド（input 要素 type="text"）との違いは、入力欄内で任意の改行ができることです。

また、textarea 要素は input 要素とは異なり、開始タグと終了タグのペアで使います。タグの間に記述された内容が初期値として使われます。データの名前を指定する name 属性のほかに、入力エリアの行数、列数を示す rows 属性と cols 属性を指定します。

name 属性: テキスト入力欄の（フォーム部品を識別するための）名前を指定します。この属性の値は、入力されたデータ（または初期値）とセットで送信されます。

rows 属性: 入力欄の高さを行数で指定します。入力内容がこの高さを超えた場合は、入力欄にスクロールバーが表示されます。この属性を指定した場合でも、ブラウザにより見た目の高さは異なります。

cols 属性: 入力欄の横幅を文字数で指定します。この属性を指定した場合でも、ブラウザにより見た目の高さは異なります。

<textarea name="comment" rows="3" cols="30">この文字列が初期値として表示されます。</textarea>

その他の属性

disabled （disabled="disabled"）: この属性が指定された部品は、選択や書き換えができなくなり、データもサーバーに送信されなくなります。

readonly （readonly="readonly"）: この属性が指定された部品は、書き換えだけができなくなります（選択は可能）。データはサーバーに送られます。

select 要素 / option 要素

セレクトメニューを作成するには、インライン要素の select 要素と option 要素を利用します。セレクトメニューはドロップダウンメニュー、プルダウンメニュー等と呼ばれる項目リストで、複数の項目からユーザーが任意の項目を選択できます。

メニューの選択肢は option 要素を使って記述します。選択された option 要素の内容が、select 要素の name 属性で指定した名前のデータとして送信されます。

select 要素

select 要素は、セレクトメニュー全体を定義する要素で、以下のような属性を指定できます。

name = "名前": フォーム部品を識別するための名前を指定します。この属性の値は、option 要素の値とセットで送信されます。

size = "行数": メニューの表示行数を指定します。この属性の値に 1 を指定するとプルダウン形式のメニューになり、2 以上を指定するとリスト形式のメニューになります（この属性を指定しない場合は、1 を指定した場合と同じになります）。行数を超える項目の選択のためにスクロールバーが自動的に表示されます。; 既定値は multiple 属性を指定していない場合は 1 で、multiple 属性を指定している場合は 4 です。

<select name="places1" size="1">
  <option value="manhattan">Manhattan</option>
  <option value="brooklyn">Brooklyn</option>
  <option value="queens">Queens</option>
  <option value="bronx">Bronx</option>
  <option value="staten">Staten Island</option>
</select>

size = 1 または size の指定なし

<select name="places2" size="3">
  <option value="manhattan">Manhattan</option>
  <option value="brooklyn">Brooklyn</option>
  <option value="queens">Queens</option>
  <option value="bronx">Bronx</option>
  <option value="staten">Staten Island</option>
</select>

multiple （multiple="multiple"）: この属性を指定すると、メニューの中から複数の項目を選択できるようになります。（Shift または Ctrl キーを押しながらクリックすると、複数を選択することができます。）; また、この属性を指定するとリスト形式のメニューになり既定の size は 4 になります。必要に応じて表示される項目数を size 属性で調整します。

<select name="places3" size="5" multiple>
  <option value="manhattan">Manhattan</option>
  <option value="brooklyn">Brooklyn</option>
  <option value="queens">Queens</option>
  <option value="bronx">Bronx</option>
  <option value="staten">Staten Island</option>
</select>

option 要素

select 要素の子要素として、各項目を option 要素で定義します。以下のような属性を指定できます。

value="値": その項目が選択されたときにサーバーに送信される値を指定します。この値が指定されていない場合は、option 要素の内容（option 要素内のテキスト）が送信されます。

label="ラベル": この属性の値は、メニューの選択肢として表示されますが、実際にはこの属性に対応しているブラウザは少ないようです。この属性を省略した場合、またはこの属性に対応していないブラウザでは、option 要素内のテキストがメニューの選択肢として表示されることになります。

selected（selected="selected"）: その項目を初期状態で選択されている状態にします。select 要素に multiple 属性が指定されている場合は、複数の選択肢に selected 属性を指定することができます。

disabled （disabled="disabled"）: この属性が指定された部品は、選択することができなくなります。

5 Boroughs of New York<br>
<select name="places1" size="1">
  <option value="manhattan">Manhattan</option>
  <option value="brooklyn">Brooklyn</option>
  <option value="queens">Queens</option>
  <option value="bronx">Bronx</option>
  <option value="staten">Staten Island</option>
</select>

5 Boroughs of New York

optgroup 要素

optgroup 要素を利用すると、セレクトメニューの項目（option 要素）をグループ化することができます。項目が多数ある場合に optgroup 要素でグループ化することで、使いやすいメニューにすることができます。以下が指定できる属性です。

label="ラベル": そのグループのラベルを指定します。値は、グループのラベルとして表示されます。（必須）

disabled （disabled="disabled"）: この属性が指定された部品は、選択することができなくなります。（あまり意味のない属性？）

以下はサンプルです。

New York Area<br>
<select name="places5" size="1">
  <optgroup label="Manhattan">
    <option value="uws">Upper West Side</option>
    <option value="ev">East Village</option>
    <option value="gramercy">Gramercy Park</option>
    <option value="les">Lower East Side</option>
  </optgroup>
  <optgroup label="Brooklyn">
    <option value="williamsburg">Williamsburg</option>
    <option value="gp">Green Point</option>
    <option value="flatbush">Flatbush</option>
    <option value="Red Hook">Red Hook</option>
  </optgroup>
</select>

New York Area

コントロールの名前（name 属性）

a 要素の name 属性は、文書の中での位置を特定するものなので、id 属性と同様に扱われ、一つの文書内で同じ名前を複数回使うことはできません。

input 要素などのフォームのコントロールの name 属性は、そのコントロールが属する form 要素の範囲内だけで名前を指定します。

そのため、同じ文書内に複数のフォームを使う場合、それぞれの input 要素の name 属性が重複しても問題ありません。次は正しい名前の使い方の例です。

<form method="post" action="contact.php" id="form1">
 <p>お名前：<input type="text" name="username" />
 ...
</form>
...
<form method="post" action="mail_mz.php" id="form2">
 <p>受信者名：<input type="text" name="username" />
 ...
</form>

また、このラジオボタンやチェックボックスのように、同じ form 要素内でも、同一グループに属することを示すために名前を重複させる場合があります。テキスト入力フィールドの場合は、名前が重複すると項目の区別ができなくなるので重複させないようにします（※敢えて同じ名前を付けてグループとして扱うこともできます）。

※ HTML では name 属性の値にハイフンを使用することはできますが、JavaScript や PHP で操作する場合、プログラム上でハイフンは使えないのでフォーム要素やフォームコントロールの name 属性にはハイフンを使わないようにします（アンダーバーやキャメルケースにします）。

コントロールのラベル（label 要素）

コントロールには、name 属性や id 属性で識別子を指定できますが、これらの識別子はデータ送信（プログラム）上の識別子で、表示上は確認することができません。

送信ボタンやセレクトメニューの項目のように直接ラベルを指定できるコントロールもありますが、ほとんどのコントロールにはラベルがありません。

label 要素を利用することで、コントロールにラベルをつけることができます。そして label 要素で特定のテキスト（文字列）をラベルとして定義することで、コントロールと関連付けすることができます。

label 要素を使うと、ラベルのテキスト（文字列）をクリックすることでコントロールが反応する（ラジオボタンが選択されたり、チェックボックスにチェックが入る等）というメリットがあります。

コントロールのラベル付けには、以下の２つの方法があります。

明示的なラベル付け

label 要素の for 属性に、コントロールの id 属性と同じ値を指定する方法です。

<p><label for="email">E-mail: </label><br>
    <input type="text" name="email" id="email" value="" size="20">
</p>

E-mail:

フォームのコントロールの name 属性は、所属するフォームの中だけでの識別名で、id 属性とは名前空間を共有しません（id 属性は常に文書中で重複不可です）。以下の例では name 属性と id 属性には異なる値を使っています。

<div>
  <input type="radio" name="contact" id="email_contact" value="email">
    <label for="email_contact"> Email </label>  
  <input type="radio" name="contact" id="phone_contact" value="phone">
    <label for="phone_contact"> Phone </label>  
  <input type="radio" name="contact" id="mail_contact" value="mail">
    <label for="mail_contact"> Mail </label> 
</div>

Email Phone Mail

for="ID名" (for 属性): 関連付ける部品の識別名（id 属性の値）を指定します。

「明示的なラベル付け」には以下のようなメリットがあります。

一つのコントロールに複数のラベルをつける（複数の label 要素が for 属性で同じ id を参照する）ことができます。
label 要素とコントロールの間に他の要素があっても構いません。

暗黙的なラベル付け

コントロールを label 要素で囲む方法です。

<p>
  <label>E-mail: <br>
  　　<input type="text" name="email" id="email" value="" size="20">
  </label>
</p>

E-mail:

<div class="margin_top30 margin_bottom30">
  <label><input type="radio" name="contact" value="email"> Email </label>  
  <label><input type="radio" name="contact" value="phone"> Phone </label>  
  <label><input type="radio" name="contact" value="mail"> Mail </label> 
</div>

Email Phone Mail

「明示的なラベル付け」との違いは以下のようなものがあります。

１つのコントロールに複数のラベルをつけることができない。
フォームのコントロールを table 要素を使って整列しているような場合には使えない（label 要素の内容はインライン要素に限られます）。
対応していないブラウザがある。

コントロールのグループ化（fieldset 要素）

フォーム内の複数のコントロールやラベルをグループ化して、フォームを構造化することができます。

コントロールをグループ化するには、fieldset 要素でグループ化する範囲を定義します。多くのブラウザでは、fieldset 要素の周りに自動的に線が引かれます。

legend 要素

fieldset 要素の直後に legend 要素を指定することで、グループ名をキャプションとして表示させることができます。但し、legend 要素は fieldset 要素の直後に一度しか出現することはできません。

<form method="post" id="form_sample3">
  <fieldset>
    <legend>Required</legend>
    <div>
    <label for="your_name">Name: </label><br>
      <input type="text" name="your_name" id="your_name" value="" size="20">
    </div>
    <div>
    <label for="your_email">E-mail: </label><br>
      <input type="text" name="your_email" id="your_email" value="" size="20">
    </div>
  </fieldset>
  <fieldset>
    <legend>Options</legend>
    <div>
      <input type="radio" name="contact" id="email_ct" value="email">
        <label for="email_ct"> Email </label>  
      <input type="radio" name="contact" id="phone_ct" value="phone">
        <label for="phone_ct"> Phone </label>  
      <input type="radio" name="contact" id="mail_ct" value="mail">
        <label for="mail_ct"> Mail </label> 
    </div>
  </fieldset>
  <div>
    <input type="submit" value="Submit"> <input type="reset" value="Reset">
  </div>
</form>

フォームのアクセシビリティ

コントロールに tabindex 属性や accesskey 属性を指定することにより、アクセシビリティの高いフォームを作成することができます。

tabindex 属性

一般にキーボードである項目を選択するためには、TABキーなどで順番に項目を移動していくか、何らかのショートカットキーと組み合わせて直接項目を指定します。

TABキーなどによる選択は、通常、選択可能項目を文書の先頭から順番に移動していくことになりますが、この選択順序を変更すると都合がよい場合があります。

tabindex 属性はひとつの文書全体での選択順序を指定するもので、0〜32767の範囲の任意の数字を割り当てます。番号が小さいものから順番に選択されます。番号が0 または tabindex 属性を割り当てていない要素は、そのあとで順次選択対象になります。

tabindex 属性に負の値（通常は tabindex="-1"）を指定すると、その要素にはキーボードの順次ナビゲーションでは到達できないようになります。言い換えると、その要素にフォーカスが移動しなくなります。（クリックなどの操作でフォーカスすることはできます）。無効にした入力欄などに指定します。（developer.mozilla.org）

tabindex 属性はinput, select, textarea といったフォームコントロールの他に、a 要素や object 要素, button 要素, area 要素にも割り当てることができます（HTML5 では、の全ての要素に指定することができます）。

<form method="post" id="form_sample4">
  <p>Name: <br>
    <input type="text" name="yourname" value="" size="20" tabindex="1">
    <a href="#" class="noscroll" tabindex="3"> ヒント</a>
  </p>
  <p>E-mail: <br>
    <input type="text" name="youremail" value="" size="20" tabindex="2">
    <a href="#" class="noscroll" tabindex="4"> ヒント</a>
  </p>
  <p>
    <input type="submit" value="Submit">
  </p>
</form>

tabindex 属性を上記のように指定した場合

tabindex 属性の指定なしの場合

accesskey 属性

accesskey 属性を使うと、TABキーで順番に選択する代わりに、特定の文字（数字）キーとショートカットキー（ブラウザによって異なる）の組合せで直接その要素を選択（あるいは実行）させることができます。

accesskey 属性は、例えば次のような用途に使用することができます。

キーボードの操作でリンク先を開く。
キーボードの操作で入力欄を選択する。
キーボードの操作でコマンドを実行する。

この属性が使えるのは、a, area, button, input, label, legend, textarea の各要素です（HTML5 では、の全ての要素に指定することができます）。

accesskey 属性の値には、その要素に割り当てるアクセスキーを指定します。

例えば、ラジオボタンに accesskey 属性を割り当てると、ショートカットキーでボタンを選択することができます。

<input type="radio" name="area" value="mhtn" accesskey="m" /> Manhattan[m]
<input type="radio" name="area" value="brkl" accesskey="b" /> Brooklyn[b]
<input type="radio" name="area" value="qns" accesskey="q" /> Queens[q]

accesskeyを働かせる「ショートカットキー」は、機種やブラウザによって異なります。

Windowsの場合のショートカットキーは、以下を参考にしてください。

IEの場合：キーボードの Alt を押しながら該当キーを押し、その後 Enter キーを押す。
Chrome と Safari の場合：キーボードの Alt キーを押しながら該当キーを押す。
Firefox の場合：キーボードの Alt + Shift キーを押しながら該当キーを押す。

Manhattan[m] Brooklyn[b] Queens[q]

アクセスキーを設定する際には、ブラウザのアクセスキー（またはショートカットキー）と競合しないように注意する必要があります。

フォームのレイアウト

フォームのコントロールの要素はインライン要素なので、それらを続けて記述すると改行されずおかしな表示になってしまいます。そのためコントロールの要素は、何らかのブロックレベル要素で囲んでマークアップする必要があります。

1番簡単なのは、p 要素を利用する方法ですが、その他に div 要素や dl 要素、ul 要素を使ってマークアップする方法があります。

すでに、今までのサンプルで p 要素と div 要素を使った方法は行っているので、以下は dl 要素を使ったマークアップの例です。

ラベルを dt 要素、コントロールを dd 要素で定義することで、フォームを明確に構造化することができます。

<form method="post" id="form_sample6">
  <dl>
    <dt><label for="name">お名前 </label></dt>
    <dd><input type="text" name="name" id="name" value="" size="20"></dd>
    <dt><label for="email">E-mail </label></dt>
    <dd><input type="text" name="email" id="email" value="" size="20"></dd>  
    <dt><label for="comment">コメント </label></dt>
    <dd><textarea name="comment" id="comment" rows="5" cols="30">ご意見やご質問を入力してください。</textarea></dd>  
    <dd><input type="submit" value="送信"></dd>
  </dl>
</form>

dd 要素は、通常インデントして表示されるので、必要であれば dd 要素の margin-left を調整します。

また、コントロールの上下のスペースも margin で調節できます（dt 要素、dd 要素のどちらに指定してもかまいません）。

CSS

#form_sample6 dd {
  margin: 10px 0 20px;
}

コントロールの幅

<input type="text"> の幅は size 属性、textarea 要素の幅は cols 属性で指定することができますが、ブラウザによって表示が異なってしまいます。そのためこれらの要素には CSS の width プロパティを指定することで幅を調整します。

その際には、クラスセレクタを利用するのが便利です。

<form method="post" id="form_sample7">
  <dl>
    <dt><label for="name">お名前 </label></dt>
    <dd><input class="form_med" type="text" name="name" id="name" value="" size="20"></dd>
    <dt><label for="email">E-mail </label></dt>
    <dd><input class="form_med" type="text" name="email" id="email" value="" size="20"></dd>  
    <dt><label for="comment">コメント </label></dt>
    <dd><textarea class="form_long" name="comment" id="comment" rows="5" cols="30">ご意見やご質問を入力してください。</textarea></dd>  
    <dd><input type="submit" value="送信"></dd>
  </dl>
</form>

以下は、幅を % で指定していますが、デザインに合わせて幅の単位等を指定します。

.form_med {
  width: 60%;
}
.form_long {
  width: 90%;
}

ボーダーの指定

コントロールのボーダーは、border 関連プロパティで設定できます。

また、padding プロパティでパディングを指定することで、ボーダーと内容領域の間の余白を調整することができます。

.form_med, .form_long {
  border-top: 1px solid #888;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  border-left: 1px solid #888;
  border-radius: 4px;
  padding: 5px;
}

フォントの指定

テキストエリアは、等幅フォントにすることがよくあります。その場合は、textarea 要素に font-family プロパティで「monospace」や「Carrier New」などのフォント指定することで、テキストエリアが等幅フォントで表示されます。

textarea {
  font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
}

:focus 擬似クラスの指定

:focus 擬似クラスを利用すると、コントロールがフォーカスされた時のスタイルを指定することができます。

.form_med:focus, .form_long:focus {
  border-color: #aadbe8;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(102, 175, 233, 0.6);
  background-color: #fcfcfc;
}

fieldset 要素と legend 要素のスタイル

多くのブラウザで fieldset 要素の周りには自動的にボーダーが引かれ、legend 要素は fieldset 要素の上部のボーダー上に表示されます。

fieldset 要素のボーダーは、CSS のボーダー関連のプロパティで調整することができます。

legend 要素は width, border, text-align, background 等のプロパティを使ってスタイルを指定することができます。

<form method="post" id="form_sample10">
  <fieldset>
  <legend>お問い合わせ</legend>
  <dl>
    <dt><label for="name">お名前 </label></dt>
    <dd><input class="form_med" type="text" name="name" id="name" value="" size="20"></dd>
    <dt><label for="email">E-mail </label></dt>
    <dd><input class="form_med" type="text" name="email" id="email" value="" size="20"></dd>  
    <dt><label for="comment">コメント </label></dt>
    <dd><textarea class="form_long" name="comment" id="comment" rows="5" cols="30">ご意見やご質問を入力してください。</textarea></dd>  
    <dd><input type="submit" value="送信"></dd>
  </dl>
  </fieldset>
</form>

fieldset {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
legend {
  padding: 5px;
  border: 1px solid #B5CEBE;
  width: 200px;
  text-align: center;
  background-color:#F2FBF7;
  font-weight: bold;
  position: relative;
}

dt 要素と dd 要素を並べるレイアウト

以下のように dt 要素のスタイルを指定することで、dt 要素と dd 要素を並べたレイアウトができます。

display に block を指定
float に left を指定
clear に left を指定
width に適当な幅を指定（表示する文字による）
text-align に right を指定

その他、マージン等を指定して調整します。また、送信ボタンの位置を調整するために、この例ではクラスを付けてマージンを設定しています。

dt{
  display: block;
  float: left;
  clear: left;
  width: 70px;
  margin: 0 10px 4px 0;
  padding: 0;
  border: 0;
  text-align: right;
  line-height: 36px;
}
dd.submit {
  margin-left: 70px;
}

<form method="post" id="form_sample11">
  <fieldset>
  <legend>お問い合わせ</legend>
  <dl>
    <dt><label for="name">お名前 </label></dt>
    <dd><input class="form_med" type="text" name="name" id="name" value="" size="20"></dd>
    <dt><label for="email">E-mail </label></dt>
    <dd><input class="form_med" type="text" name="email" id="email" value="" size="20"></dd>  
    <dt><label for="comment">コメント </label></dt>
    <dd><textarea class="form_med" name="comment" id="comment" rows="5" cols="30">ご意見やご質問を入力してください。</textarea></dd>  
    <dd class="submit"><input type="submit" value="送信"></dd>
  </dl>
  </fieldset>
</form>

Web Design Leaves

HTML フォームの設置

form 要素

form タグの action 属性

input 要素

type 属性

name 属性

value 属性

size 属性

その他の属性

チェックボックスとラジオボタンの関連付け