inputタグ/フォーム部品

<input>タグはラジオボタンやテキスト、チェックボックス等を配置するために使います。

説明

 <input>タグは<form>タグに囲まれた中で使い、フォーム部品であるラジオボタンやテキスト、チェックボックス等を配置します。配置されたラジオボタンの選択やテキスト等に入力した値をCGIやPHPのページに送信したり、JavaScriptを動作させたりする事が出来ます。

 例えば、以下の図のようびテキスト欄に文字を入力して実行ボタンを押すと、test.jsでJavaScriptが動作し、結果を表示したり出来ます。

inputのJavaScript利用例

構文

 <input>タグはHTMLボディー内に記述します。構文は以下の通りです。

<input type="部品種類" name="名前" value="値" size="サイズ" src="URLやファイル名">

 必須なのは赤字で示したtypeだけです。typeには以下の部品があります。

【typeの種類】
種類 説明
text テキスト入力欄を表示します。
password テキスト入力欄を表示しますが文字が伏字になります。
checkbox チェックボックスを表示します。
radio ラジオボタンを表示します。
submit 実行ボタンを表示します。
reset 元に戻すボタンを作成します。入力や選択が初期化されます。
hidden 何も表示されませんが、値としては存在します。
image 画像をボタンとして使います。

 nameは識別するための名前でJavaScriptの処理でnameを使って値を取り出したり出来ます。

 valueは部品の値です。例えばテキストを表示する時に最初から入力されているようにしたい場合やボタンにチェックが入った時に値を使う場合に利用します。

 sizeはテキスト等の幅を文字数で指定します。

 srcは図をボタンとして使った時の画像のURLやファイル名を指定します。

text利用例

 JavaScriptを実行する場合のtext利用例は以下の通りです。

<form action="#">
<input type="text" name="tex" value="30" size="20" onkeydown="if(event.keyCode == 13 || event.charCode == 13){return false;}">
</form>

 valueは初期値でテキスト欄に最初から30と入力されます。省略すると何も入力されていない状態が初期値となります。

 上記ではonkeydownの後にクリックした時のJavaScriptを記述しています。;で区切ると複数の処理を記述出来ます。処理としてはエンターキーが押された事を判断してreturn falseを実行するようにしています。JavaScriptでは処理が終わった際にページの再読み込みがされますが、return falseを追加する事で再読み込みがされません。

 上記を表示すると以下になります。

password利用例

 JavaScriptを実行する場合のpassword利用例は以下の通りです。

<form action="#">
<input type="password" name="pass" value="30" size="20" onkeydown="if(event.keyCode == 13 || event.charCode == 13){return false;}">
</form>

 上記を表示すると以下になり、●等の伏字になります。文字通りパスワード等を入力する時に使います。

 JavaScript自体はtextと同じ処理です。

checkbox利用例

 JavaScriptを実行する場合のcheckbox利用例は以下の通りです。

<form action="#">
<input type="checkbox" name="check1" value="30" onclick="alert('値は' + value + 'です');return false;">チェック1
<input type="checkbox" name="check2" value="60" onclick="alert('値は' + value + 'です');return false;">チェック2
</form>

 表示は以下になり、チェックボックスをチェックすると選択したチェックボックスの数字が表示されます。valueが値を示し、アラートを表示する時に読み込んでいます。

チェック1 チェック2

 ページを表示した時に最初からチェックしておきたい場合はchecked="checked"を追加します。

radio利用例

 JavaScriptを実行する場合のradio利用例は以下の通りです。

<form action="#">
<input type="radio" name="ra1" value="30" onclick="alert('値は' + value + 'です');return false;">選択1
<input type="radio" name="ra1" value="60" onclick="alert('値は' + value + 'です');return false;">選択2
</form>

 表示は以下になり、ラジオボタンを選択すると選択したラジオボタンの数字が表示されます。valueが値を示し、アラートを表示する時に読み込んでいます。

 ラジオボタンはname部分が同じものを1つの組とします。

選択1 選択2

 チェックボックスと同じでページを表示した時に最初から選択しておきたい場合はchecked="checked"を追加します。

submit利用例

 typeでsubmitを指定する時は、通常は他のタイプと合わせて使われます。以下はラジオボタン2つと合わせて利用した時にJavaScriptを動作させる記述例です。

<form action="#">
<input type="radio" name="radi1" value="30">30
<input type="radio" name="radi1" value="60">60
<input type="submit" name="sub" value="表示" onclick="チェックされた数字を取り出す計算">
</form>

 「チェックされた数字を取り出す計算」の部分は実際にはJavaScriptを記述します。表示すると以下になります。

30 60

 ラジオボタンをクリックしても何も動作せず、表示ボタンをクリックした時に選択しているラジオボタンの値がアラートで表示されます。

 ラジオボタンはnameが同じものを1組としてどれかしか選択出来ません。チェックボックスでは複数の選択が同時に出来ます。

 このように、text、password、hidden、radio、checkbox等と共に利用して、submitのボタンをクリックする事で処理を実行させるのが基本です。

reset利用例

 resetは元に戻すボタンを作成します。

 先ほどのsubmitの記述で</form>の前に以下を追加します。

<input type="reset" name="re" value="元に戻す">

 表示は以下になります。ラジオボタンを選択するとどちらか選択した状態になりますが、「元に戻す」ボタンをクリックする事でどちらも選択されていない状態に戻せます。

30 60

 これはラジオボタンだけでなく、テキスト等全てにおいて初期化可能です。例えば、テキストであれば入力した文字が空欄になります。

hidden利用例

 hiddenを指定した場合は何も表示されません。例えばsubmitと合わせて使うと以下の記述が出来ます。

<form action="#">
<input type="hidden" name="hideinput" value="30" size="20">
<input type="submit" name="sub" value="表示" onclick="alert('隠れた数字は' + hideinput.value + 'です');return false;">
</form>

 上記を表示すると以下になります。

 「表示」ボタンをクリックするとアラートでinputに指定したvalueの値を表示しています。このように値や文字を隠しておく時に利用出来ます。

image利用例

 図をボタンとして使います。記述例は以下です。

<form action="#">
<input type="image" name="testiname" value="30" src="../image/tag_chart_2.png" alt="test" onclick="alert('隠れた数字は' + value + 'です');return false;">
</form>

 上記を表示すると以下になります。

ディスプレイ

 <input>タグで囲むとインラインボックスを示すため、改行されません。このため、複数のチェックボックスやラジオボタン等を並べて表示出来ます。

 <input>タグを囲む<form>タグはブロックボックスのため、この枠の中で改行されます。

検索付「HTMLタグ早見表」に戻る

スマホ向け「HTMLタグ一覧」に戻る

  • このエントリーをはてなブックマークに追加