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と実際の画面出力例

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を指定する。

[attr]

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を指定する。

[/attr]

コメントを残す

メールアドレスが公開されることはありません。