ボタンやテキストボックスのようなフォームのための部品は「input要素」と呼ばれ、inputタグによって表現されます。「input要素」はformタグの中に置かれ、formタグによって指定された方法で処理されます。inputタグには終了タグがありません。inputタグの基本的な書式は以下のとおりです。
<input type=タイプ name=名前 [ value=初期値 ]>
typeには以下のような値を使って部品のタイプを指定します。
type値 | 部品 | 対応HTMLバージョン |
"text" | テキストボックスの基本形 | - |
"password" | 入力された文字を*で表示 | - |
"search" | 検索文字列 | HTML5以降 |
"tel" | 電話番号 | HTML5以降 |
"email" | E-Mailアドレス | HTML5以降 |
"datetime" | 日時 | HTML5以降 |
"datetime-local" | ローカル日時 | HTML5以降 |
"month" | 年と月 | HTML5以降 |
"week" | 年と週番号 | HTML5以降 |
"date" | 日付 | HTML5以降 |
"time" | 時刻入力 | HTML5以降 |
"color" | 色の値 | HTML5以降 |
"number" | スピンコントロール付きの数値入力専用フィールド | HTML5以降 |
value値 | 意味 | 対応HTMLバージョン |
"submit" | 送信ボタン | - |
"reset" | それまでの入力をリセットする | - |
"image" | 画像ボタン | - |
"buttun" | 一般のボタン | HTML4.0以降 |
"file" | ファイル選択ダイアログを開くためのボタン | - |
"range" | スライダー | HTML5以降 |
value値 | 意味 | 対応HTMLバージョン |
"hidden" | 隠しフィールド | - |
「名前」には、このinput要素の名前を指定します。CGIにはこの名前の変数を使ってこのinput要素の値が渡されます。「値」には、このinput要素の初期値を指定します。
フォームがサーバーに送られるとき、フォームの内容は
name=
valueの組となって送られます。
nameはフォームの個々の部品(input要素)を特定するための名前です。value属性はそれぞれのinput要素の状態(入力された値など)を示します。
inputタグでvalue属性を指定すると、多くのinput要素ではその値が初期値として用いられます。たとえば、テキストボックス(type="text")でvalue="初期値"を指定すると、フォームが最初に表示されるときにテキストボックスに「初期値」と表示されます。しかし、そうでないものもあります。送信ボタン(type="submit")を作るときにvalue属性を指定すると、それはボタンに表示する文字列(ラベル)として用いられます。
最初に、name属性はフォームの個々のinput要素を特定すると書きましたが、例外もあります。たとえばラジオボタン(type="radio")は複数のinput要素で同じname属性を持つことができます。同じname属性のラジオボタンはグループとして扱われ、グループ内の1つのラジオボタンしか選択することはできません。
テキストボックス(type="text")やパスワード入力用テキストボックス(type="password")では、maxlength属性を使って入力可能な最大文字数を規定することができます。
テキストボックス(type="text")やパスワード入力用テキストボックス(type="password")では、size属性を使ってフィールドの大きさ(横方向の長さ)を指定することができます。
テキストボックス(type="text")やパスワード入力用テキストボックス(type="password")では、pattern属性で正規表現を指定することで、入力可能な文字を規定することができます。たとえば、pattern=".a"とすると、2文字で最後が「a」で終わる文字列しか入力できません。HTML 5.0以降。
HTML 5.0以降の仕様。テキストボックス(type="text")やパスワード入力用テキストボックス(type="password")では、placeholder属性を使うことでフォームが表示されたときに、入力フィールドに「ここに入力してください」などのメッセージを薄く表示することができます。以下はplaceholder属性を使ったテキストボックスの例です。
テキストボックス(type="text")やパスワード入力用テキストボックス(type="password")では、readonly属性を使うことでフィールドを読み取り専用(表示のみ)にすることができます。readonly属性は以下に示すように値を持ちません。
< input type="text" name="textbox" readonly value="書き込み不可">
HTML 5.0以降の仕様。テキストボックス(type="text")やパスワード入力用テキストボックス(type="password")では、required属性を使うことができます。required属性の指定されたinput要素が入力されないままフォームを送信しようとしても送信できません(おそらくブラウザが警告のメッセージを表示するはずです)。required属性は値を持ちません(=に続けて値を指定する必要はありません)。
HTML 5.0以降の仕様。「スピンコントロール付きの数値入力専用フィールド」(type="number")や「スライダー」(type="range")などでは入力可能な数値の範囲や、取り得る値の間隔を呈するためにmin属性、max属性、step属性を指定することができます。
minと
max属性によって値の取り得る範囲(上限と下限)を指定することができます。
step属性によって取り得る値の間隔を指定することができます。