フォームの構成部品 input
空要素
ユーザーがデータの入力や選択、データの送信などをおこなうための部品となる要素です。
この要素は必ずしもフォームの内容として使用しなければならないわけではなく、通常のブロックレベル要素やインライン要素の中で、ユーザーインターフェイスのひとつとして使用することができます。
属性
type="形式"
input要素の形状を指定します。
形式
- text 1行のテキスト入力フィールド(初期値)
- password パスワード入力用フィールド
- checkbox チェックボックス
- radio ラジオボタン
- submit 送信ボタン
- reset リセットボタン
- button 汎用ボタン
- image src属性で指定した画像による送信ボタン
- file 送信するファイル選択
- hidden 表示されずにサーバーに送信するデータ
name="名前"
この部品の名前を指定します。
フォームのデータが送信される場合は、この名前とデータが組になって送信されます。
ラジオボタンやチェックボックスで共通する項目の選択肢として利用するものには、同じ名前を付けるようにしてください。
なお、form属性内で使用されるinput要素のname属性の有効範囲は、そのform要素内に限られます。
value="値"
type属性の値が「 text 」の場合は入力フィールドの初期値、「 file 」の場合は選択するファイル名の初期値を指定します。
また、type属性の値が「 submit 」「 reset 」「 button 」の場合は、ボタンのラベルとして表示させる文字を指定します。
type属性の値が「 checkbox 」「 radio 」の場合は、その項目が選択されている場合にサーバーに送信される値となります。
size="幅"
この部品の幅を指定します。
type属性の値が「 text 」または「 password 」の場合の入力可能な最大文字数を指定します。
checked="checked"
type属性の値が「 checkbox 」または「 rado 」の場合に、そのボタンが選択されている状態にします。
disabled="disabled"
その部品に対して、選択や変更などの操作をできないようにする場合に指定します。
この属性が指定されている部分のデータはサーバーに送信されません。
readonly="readonly"
その部品に対して、変更ができないようにする場合に指定します。
ただし、選択することは可能で、データはサーバーに送信されます。
accetp="MIMEタイプ"
type属性の値が「 file 」の場合に、サーバーのプログラムがデータとして処理可能なMIMEタイプを指定します。
「 , 」で区切って複数指定することができます。
この値を指定しておくことで、選択できるファイルを制限することが可能になります。
tabindex="Tab移動順"
タブキーを押して項目間を移動させる場合の、順序を指定します。指定できる値は0~32767の数字で、小さなものから順に移動します。
ただし、この属性が指定されていない要素は、この属性が指定されている要素の後に移動します。
同じ値が設定されている場合はより前にあるものが優先されます。
accesskey="ショートカットキー"
ショートカットキーを割り当てます。値としては文字コード中の任意の1文字を指定できます。
Windowsであれば「altキー」、Macintoshであれば「controlキー」を同時に押して利用します。
src="URI"
type属性の値が「 image 」の場合に、送信ボタンとして利用する画像のURIを指定します。
alt="代替テキスト"
type属性の値が「 image 」で画像を表示できない場合に、代わりに表示させるテキストを設定します。
usemap="URI"
type属性の値が「 image 」の場合に、map要素のidで指定されている名前を指定して、画像にクライアントサイド・イメージマップを対応させます。
汎用属性
class、id、title、style、lang、dir、xml:lang
<form method="POST" action="form.cgi">
<p>
text:<br />
<input size="20" type="text" name="text" maxlength="20" disabled="disabled" value="text" /><br />
password:<br />
<input size="20" type="password" name="password" maxlength="20" readonly="readonly" value="password" /><br />
checkbox:<br />
<input type="checkbox" name="checkbox" checked="checked" /><br />
radio:<br />
<input type="radio" name="radio" /><br />
submit:<br />
<input type="submit" value="submit" name="submit" /><br />
reset:<br />
<input type="reset" value="reset" name="reset" /><br />
button:<br />
<input type="button" value="button" name="button" /><br />
image:<br />
<input type="image" src="input.gif" alt="submit" name="image" /><br />
file:<br />
<input type="file" name="file" size="20" maxlength="20" disabled="disabled" readonly="readonly" /><br />
hidden:<br />
<input type="hidden" name="hidden" value="hidden" />
</p>
</form>