input要素・inputタグとは

フォームのコントロールを表現するinput要素

コントロールの形式は type属性で指定します。

type属性で指定可能なコントロール一覧

text

テキストを入力するコントロールを作成する。

password

テキスト入力と同様だが、入力テキストは、連続したアスタリスク表示(例：****）などで表示される。

checkbox

チェックボックスを作成する。複数選択可能な場合に用いられる。

radio

ラジオボタンを作成する。複数項目から1つだけ決定させたい場合に用いられる。

submit

submitボタンを作成する。このボタンが押されたタイミングで、fomタグのaction属性で指定されたURIにフォームデータが送信される。

reset

リセットボタンを作成する。このボタンが押されたタイミングで、formタグ内コントロールの入力がキャンセルされる。

file

ファイル選択コントロールを作成する。

hidden

隠しコントロールを作成する。このコントロールはブラウザ上に表示されない。データ値はfomタグのaction属性で指定されたURIに送信される。

image

submitボタンに画像を利用し、見た目を豊かにすることができる。 src属性値でボタンを装飾する画像URIを指定する。

button

押しボタンを作成する。onclickイベントと併用される。

HTMLと実際の画面出力例

<p><label>text</label><input maxlength="16" name="text" type="text" value="text" /></p>
<p><label>password</label><input maxlength="16" name="password" type="password" value="password" /></p>
<p><label>checkbox</label><input checked="checked" name="checkbox1" type="checkbox" value="check1" /></p>
<p><input name="checkbox2" type="checkbox" value="check2" /></p>
<p><label>radio</label><input name="radio" type="radio" value="radio1" /></p>
<p><input checked="checked" name="radio" type="radio" value="radio2" /></p>
<p><label>submit</label><input name="submit" type="submit" /></p>
<p><label>reset</label><input name="reset" type="reset" /></p>
<p><label>file</label><input name="file" type="file" /></p>
<p><label>hidden</label><input name="hidden" type="hidden" /></p>
<p><label>image</label><input name="image" src="http://taghtml.com/wp-content/themes/taghtml/images/quote.gif" type="image" /></p>
<p><label>button</label><input name="button" type="button" value="original button" /></p>

attribute（属性）について

type = text|password|checkbox|radio|submit|reset|file|hidden|image|button
作成するコントロールの形式を指定する。 デフォルト値はtextである。

name = cdata
コントロール名を指定する。

value = cdata
コントロール初期値を指定する。 type属性が “radio” か “checkbox” 以外であれば省略可能。

size = cdata
コントロールの初期幅指定を示す。この幅はピクセル値を指定する。だたしtype属性が”text”または”password”の場合、文字数を示す整数値を指定する。

maxlength = number
type属性の値が”text”または”password”の場合、入力可能な最大文字数を指定する。デフォルト値は無制限である。checkedtype属性値が”radio”または”checkbox”の場合、“ON”であることを指定する。

src = uritype
属性値が”image”の場合、画像URIを指定する。

type = text|password|checkbox|radio|submit|reset|file|hidden|image|button作成するコントロールの形式を指定する。 デフォルト値はtextである。name = cdataコントロール名を指定する。value = cdataコントロール初期値を指定する。 type属性が “radio” か “checkbox” 以外であれば省略可能。size = cdataコントロールの初期幅指定を示す。この幅はピクセル値を指定する。だたしtype属性が”text”または”password”の場合、文字数を示す整数値を指定する。maxlength = numbertype属性の値が”text”または”password”の場合、入力可能な最大文字数を指定する。デフォルト値は無制限である。checkedtype属性値が”radio”または”checkbox”の場合、“ON”であることを指定する。src = uritype属性値が”image”の場合、画像URIを指定する。