制作者の活動(PR)。

堀北真希ちゃんにうさみみを着けた制作者のオリジナルキャラクタ。次ぎ
主な作品

オリジナルキャラクタのイラスト例とそれを組み込んだアニメーション動画

<input>要素(入力欄, 選択肢, ボタンなど、フォームの一般的な入力対象)。

入力欄, 選択肢, ボタンなど、フォームの一般的な入力対象である<input>要素についての解説です。

<input>要素(入力欄, 選択肢, ボタンなど、フォームの一般的な入力対象)・目次。

<input>要素とは。

<input>要素とは、入力欄, 選択肢, ボタンなど、フォームの一般的な入力対象です。

<input>要素には以下の機能があります。

一行入力欄
一行テキストの入力欄です。
パスワード入力欄
パスワード専用の一行入力欄です。入力文字列は伏せ字になります。
チェックボックス
複数選択可能な選択肢の選択項目です。
ラジオボタン(ラヂヲボタン)
択一式選択肢の選択項目です。選択肢の中から常に一つだけが撰ばれます。
送信ボタン
フォームを送信するボタンです。
リセットボタン
フォームに入力された内容をリセットするボタンです。クリアボタンまたはキャンセルボタンとも言います。
ファイル選択欄
閲覧者側のローカルファイルを選択する欄です。選択されたローカルファイルはサーヴァに送信されます。
隠しフィールド
ある特定のクエリを送信するため、入力欄などを出さずにクエリに追加します。
ボタン
クライアントサイドスクリプトなどで利用するボタンで、フォームの送信やリセットは行いません。
画像送信ボタン
送信ボタンと同じですが、テキストではなく画像になります。

<input>要素は通常<form>要素の内容に使われますが、必ずしも<form>要素の内容にしなければいけない訳ではありません。

<input>要素を利用出来るHTML文書型。

<input>要素は、以下の文書型で利用出来ます。

<input>要素の実装上の注意。

ネットスケープ 4.x以前などの旧型ユーザエージェントでは、<form>要素内に書かれていない<input>要素が表示されないものがあります。

<input>要素が含まれるXHTML モジュール。

<input>要素はフォームモジュールに属します。

<input>要素の扱い。

<input>要素は置換インライン要素です。

また、<input>要素には内容が無いため空要素となります。

<input>要素の属性。

<input>要素には、以下の属性が定められております。

type属性

当該要素のタイプを指定します。

text
テキスト入力欄を作ります(デフォルト)。
password
パスワード入力欄を作ります。この場合、type="text"属性と同じ形の入力欄になりますが、入力文字が伏せ字になります。
checkbox
チェックボックスを作ります。各項目が選択欄となり、選択された場合のみクエリを送ります。
radio
ラジオボタン(ラヂヲボタン)を作ります。同じname属性値のラジオボタンの中から一つだけが選択されるようになります。
submit
送信ボタンを作ります。ボタンに書かれる文字列にはvalue属性値が使われます。
reset
リセットボタン(クリアボタン・キャンセルボタン)を作ります。ボタンに書かれる文字列にはvalue属性値が使われます。
file

ローカルファイルの選択入力となります。ファイル名の入力欄などが表示されます。

  • type="file"属性を利用する場合、<form>要素にはenctype="multipart/form-data"属性とmethod="post"属性が必要です。
  • 携帯電話ではtype="file"属性は一部を除いて利用出来ません。
hidden

入力欄を作りません。name属性とvalue属性で指定されたクエリを送ります。

  • HTMLのソースファイルに記述するので秘密の情報を入れるのには適しません。
image

画像に依る送信ボタンを作ります。画像のURIはsrc属性で、画像表示出来ない環境での代替文字はalt属性でそれぞれ指定します。

  • 旧式のユーザエージェントには代替文字列をname属性かvalue属性を利用するものがあります。
button
送信もリセットもしないボタンを作ります。主にonclick属性でクライアントサイドスクリプトを起動するボタンとして利用されます。ボタンに書かれる文字列にはvalue属性値が使われます。
name属性
クエリ名を指定します。
value属性

クエリ値を指定します。type属性により以下のような扱いになります。

text, password
入力欄関連の属性値が指定されている場合は、入力欄のデフォルト文字列となります。
submit, reset, button
ボタン関連の属性値が指定されている場合は、ボタンに書かれる文字列となります。
file
type="file"属性が指定されている場合は、デフォルトの送信ファイル名となります。
checkbox, radio, hidden, image
その他の属性値が指定されている場合は、送信されるクエリ値となります。
checked属性値
type="checkbox"属性またはtype="radio"属性が与えられている場合に、予め選択済みとします。XHTMLではchecked="checked"属性とします。
size属性
type="text"属性またはtype="password"属性が与えられている場合に入力欄の大きさを字数で表します。
maxlengh属性
type="text"属性またはtype="password"属性が与えられている場合に入力可能な最大字数で表します。
src属性
type="image"属性が与えられている場合に、画像へのURIを指定します。

以下に挙げる<input>要素の属性はHTML 3.2では使えません。

alt属性

type="image"属性が与えられている場合に、画像が表示出来ない環境での代替文字列を指定します。

disabeld属性値

当該入力欄を無効にします。

readonly属性値

当該入力欄を変更不可にします。

accept属性

type="file"属性が与えられている場合に受付可能なファイルのMIMEタイプを「,」で区切って指定します。

例えばGIF画像とJPEG画像のみを受け付ける場合はaccept="image/gif, image/jpeg"属性を与えます。

tabindex属性
TABキーによるフォーカス移動の優先順位を指定します。詳しくはtabindex属性(TABキー等でのフォーカス移動の優先順位)をご覧下さい。
accesskey属性
キーボードや携帯電話のダイヤルボタンでのアクセスを可能にします。詳しくはaccesskey属性(キーボード等でのアクセス)をご覧下さい。
onfocus属性
当該入力欄にフォーカスがあった際に起動するクライアントサイドスクリプトを指定します。詳しくはonfocus属性(当該要素がフォーカスされた際に起動するスクリプト)をご覧下さい。
onblur属性
当該入力欄からフォーカスが離れた際に起動するクライアントサイドスクリプトを指定します。詳しくはonblur属性(当該要素からフォーカスが外れた際に起動するスクリプト)をご覧下さい。
onselect属性

当該入力欄が閲覧者操作で選択された場合に起動するクライアントサイドスクリプトを記述します。

onchange属性

当該入力欄の値が閲覧者操作で変更された場合に起動するクライアントサイドスクリプトを記述します。

共通属性

<input>要素で使える共通属性には

があります。

usemap属性

当該要素をイメージマップと関連付けます。以下の値をusumap属性値として記述します。

HTML 4.01, ISO-HTML及びXHTML 1.0の場合

対応する<area>要素のURI。実際には同一ページ内の対応する<area>要素のname属性値またはid属性値の前に「#」をつけた文字列をusemap属性値に指定します。

  • 同一ページ内のものなので、URLは省略され「#」で始まるフラグメント名のみを記述する事になります。
XHTML 1.1の場合

対応する<area>要素のid属性値そのものをusemap属性値に指定します。

以下に挙げる<input>要素の属性はHTML 3.2, トランジッショナル文書型及びフレームセット文書型でのみ利用出来る属性で、排除勧告が出されております。

align属性

align属性はtype="image"属性が与えられた画像送信ボタンの配置を指定します。

値には以下の五つがあります。

left
左に寄せます。後続するテキスト類は、右に廻り込みます。
right
右に寄せます。後続するテキスト類は、左に廻り込みます。
middle
画像の上下方向の中央をテキストのベースラインに合わせます。
top
上端をテキストのベースラインに合わせます。
bottom
下端をテキストのベースラインに合わせます。

尚、align="lift"属性及びalign="right"属性が与えられた<img>要素以降のテキストの廻り込みを解除するには<br>要素のclear属性を用います。

オープンウェーヴ社が定めた XHTML モバイル・プロファイルで利用出来る<input>要素の属性。

また、オープンウェーヴ社が定めた XHTML モバイル・プロファイルでも以下の属性が利用出来ます。

これらの属性はlocalsrc属性を除いてトランジッショナル文書型に含まれるものと全く同じですので、詳しくは該当する項目をご覧下さい。

emptyok属性

入力欄が未入力でも正当な入力として認めるかどうかを指定します。

をそれぞれ指定します。

emptyok="false"属性が与えられた入力欄が未入力の場合には送信が行われなくなります。

format属性

入力欄に入れられるべきデータの形式を指定します。

データの形式は以下の記号の列で表します。

A
半角英大文字またはアスキィ記号(数字を除く)
a
半角英小文字またはアスキィ記号(数字を除く)
N
半角数字
X
任意の文字。但し一字目入力時点では入力モードが英大文字に設定される。
x
任意の文字。但し一字目入力時点では入力モードが英小文字に設定される。
n
半角数字とアスキィ記号

また、

それぞれ指定します(一番最後の記号にのみ指定出来ます)。

尚、この属性の扱いは端末に依りまちまちなので、利用する際には充分注意して下さい。

また、PCなどサポートされない環境からは当然指定に従わっていない入力が送られる場合がありますので注意して下さい。

istyle属性

当該入力欄でのデフォルトの入力モードを指定します。

1
全角ひらがな
2
半角カタカナ
3
半角英字・アスキィ記号
4
半角数字

但し、端末に依り動作が異なる場合がありますので注意して下さい。

<input>要素に関する注意事項。

一部ブラウザでの<input>要素実装上の制限。

の中には、<form>要素内に無い<input>要素を表示しないものがあります。

<input>要素には<label>要素を併用しましょう。

<input>要素にはその前か後に説明のテキストが付く事が多いのですが、それらのテキストをポイントしても、当該入力欄等が指定される事はありません。

特にチェックボックスやラジオボタンでは<input>要素の前か後には必ずと言って良いほど選択肢の内容がテキストなどで書かれておりますが、それらをいくら指定しても当該項目は選択されないのです。

このような問題を解消するためにHTML 4.01以降では<label>要素が用意されております。

<label>要素で指定する事で、当該<input>要素外でも指定された範囲をポイントする事で当該入力欄が指定されます。

特にチェックボックスやラジオボタンでは<label>要素を併用しましょう。

<input>要素の記述例。

<form>要素の記述例をご覧下さい。

関連項目。

<label>要素
入力フォームの入力欄などへのラベル
<textarea>要素
テキスト入力欄
<button>要素
ボタン
<select>要素
プルダウンメニュー
<form>要素
入力フォーム

しらぎくのウェブサイト作成入門サイトマップ

ページ外へのご案内。

marguerite.site@gmail.com