INPUT 要素

　　フォームを構成する入力部品の作成

［カテゴリー］

フローコンテンツ
フレージングコンテンツ
type 属性値が hidden でなければ，インタラクティブコンテンツ
type 属性値が hidden でなければ，フォーム関連要素（ listed，labelable，submittable，resettable ）
type 属性値が hidden であれば，フォーム関連要素（ listed，submittable，resettable ）
type 属性値が hidden でなければ，パルパブルコンテンツ

［要素を使用できる文脈］

フレージングコンテンツを入れることができる場所

［コンテンツモデル］

［コンテンツ属性］

グローバル属性
accept ：サーバが受け入れ可能なファイルタイプ（ audio/*，video/*，image/* ）
alt ：代替のボタンのテキストラベル
autocomplete ：データの自動補完（ on の場合．off にすると行わない）．例えば，入力フィールドをクリックすると候補が表示される．
autofocus ：オートフォーカス
checked ：初期状態としてチェックされた状態にしておく
dirname ：文字の表示方向（ "ltr" or "rtl" ）
disabled ：要素を無効にする
form ： FORM 要素との関連付け（使用例１）
formaction ： submit ボタンが formaction 属性を持つ場合はその値となり,さもなければ FORM 要素の action 属性値となる
formenctype ： submit ボタンが formenctype 属性を持つ場合はその値となり,さもなければ FORM 要素の enctype 属性値となる
formmethod ： submit ボタンが formmethod 属性を持つ場合はその値となり,さもなければ FORM 要素の method 属性値となる
formnovalidate ：記述すると，入力されたデータの妥当性チェックを行わない
formtarget ： submit ボタンが formtarget 属性を持つ場合はその値となり,さもなければ FORM 要素の target 属性値となる
height ：画像の高さ
list ：定義済み選択しリストの参照（ DATALIST 要素の ID 属性値）
max ：数値型や日付型の入力欄で入力できる最大値
maxlength ：最大許容データ長
min ：数値型や日付型の入力欄で入力できる最小値
multiple ：複数の値やファイルの選択を可能にする
name ：要素の名前
pattern ：正規表現を使って入力値のパターンを指定
placeholder ：入力に対するヒント
readonly ：読み取り専用
required ：入力必須
size ：文字数
src ：画像ファイルの URL
step ：数値型や日付型の入力欄で値を増減させるステップ値
type ：以下の中から選択
- hidden　　要素を表示しない．
- text　　1 行のテキスト
- tel　　電話番号（ text とほとんど同じ）
- url　　URL の入力
- email　　メールアドレスの入力
- password　　パスワードの入力（入力した文字がそのまま表示はされない）
- datetime　　UTC（協定世界時）による日時の入力（ step 属性の単位は秒で，デフォルトは 60 ）
- date　　日付の入力（ step 属性の単位は日で，デフォルトは 1 ）
- month　　月の入力（ step 属性の単位は月で，デフォルトは 1 ）
- week　　週の入力（ step 属性の単位は週で，デフォルトは 1 ）
- time　　時間の入力（ step 属性の単位は秒で，デフォルトは 60 ）
- datetime-local　　ローカル日時の入力（ step 属性の単位は秒で，デフォルトは 60 ）
- number　　数値の入力（ step 属性のデフォルトは 1 ）
- range　　概略値の入力（ min 属性，max 属性，step 属性のデフォルトは，各々，0，100，1 ）
- color　　色の選択
- checkbox　　チェックボックス
- radio　　ラジオボタン
- file　　ファイルの送信
- submit　　フォーム内容の送信
- image　　イメージボタンの作成
- reset　　フォームに入力した内容をリセット
- button　　ボタンの作成
value ：要素のデフォルト値を設定
width ：画像の幅

［DOM インタフェース］

interface HTMLInputElement : HTMLElement {
           attribute DOMString accept;
           attribute DOMString alt;
           attribute DOMString autocomplete;
           attribute boolean autofocus;
           attribute boolean defaultChecked;
           attribute boolean checked;
           attribute DOMString dirName;
           attribute boolean disabled;
  readonly attribute HTMLFormElement? form;
  readonly attribute FileList? files;
           attribute DOMString formAction;
           attribute DOMString formEnctype;
           attribute DOMString formMethod;
           attribute boolean formNoValidate;
           attribute DOMString formTarget;
           attribute unsigned long height;
           attribute boolean indeterminate;
           attribute DOMString inputMode;
  readonly attribute HTMLElement? list;
           attribute DOMString max;
           attribute long maxLength;
           attribute DOMString min;
           attribute boolean multiple;
           attribute DOMString name;
           attribute DOMString pattern;
           attribute DOMString placeholder;
           attribute boolean readOnly;
           attribute boolean required;
           attribute unsigned long size;
           attribute DOMString src;
           attribute DOMString step;
           attribute DOMString type;
           attribute DOMString defaultValue;
  [TreatNullAs=EmptyString] attribute DOMString value;
           attribute Date? valueAsDate;
           attribute unrestricted double valueAsNumber;
           attribute unsigned long width;

  void stepUp(optional long n);
  void stepDown(optional long n);

  readonly attribute boolean willValidate;
  readonly attribute ValidityState validity;
  readonly attribute DOMString validationMessage;
  boolean checkValidity();
  void setCustomValidity(DOMString error);

  readonly attribute NodeList labels;

  void select();
           attribute unsigned long selectionStart;
           attribute unsigned long selectionEnd;
           attribute DOMString selectionDirection;

  void setRangeText(DOMString replacement);
  void setRangeText(DOMString replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode);

  void setSelectionRange(unsigned long start, unsigned long end, optional DOMString direction);
};

［使用例］

使用例１とそのソースコード：　上下 2 つのフォーム例が示してあるが，両者共，内容的には同じフォームである．フォームでは，氏名，郵便番号，電話番号，及び，住所を入力するために LABEL 要素と INPUT 要素，また，性別を選択するラジオボタンを実現するために INPUT 要素，及び，「送信」ボタンを実現するために INPUT 要素を使用している．さらに，ラジオボタン，及び，住所（郵便番号，電話番号，住所）の各々をグループ化するために FIELDSET 要素と LEGEND 要素（各グループのタイトルを示す）を使用している．

　　ただし，上と下のフォームでは，その記述方法が多少異なっている．まず，上の例では，フォームで必要とされるすべての要素が FORM 要素内に記述されているが，下の例では，グループ「住所」と「送信」ボタンが FORM 要素の外に記述されている．しかし，INPUT 要素の FORM 属性によって，FORM 要素の外側に記述された内容も，「送信」ボタンのクリックによって正しく送信される．

　　さらに，下の例では LABEL 要素と INPUT 要素との関連付け（ラベルをクリックすると対応するテキストフィールドにフォーカスが移動する）がなされていないが，上の例では，「電話番号」及び「住所」に対して，異なる方法で関連付けがなされている．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>FIELDSET，LEGEND，LABEL</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
	<P CLASS="center">FORM 要素の内部にすべて記述</P>
	<DIV CLASS="no"><FORM NAME="form1" ID="form1_ID" ACTION="test2.php" METHOD="post">
		<P><LABEL>氏名： </LABEL><INPUT TYPE="text" NAME="shimei" SIZE="20" STYLE="font-size: 90%"></P>
		<FIELDSET>
			<LEGEND>性別</LEGEND>
			<LABEL><INPUT TYPE="radio" NAME="sex" VALUE="male">男</LABEL><BR>
			<LABEL><INPUT TYPE="radio" NAME="sex" VALUE="female">女</LABEL><BR>
		</FIELDSET>
		<BR>
		<FIELDSET>
			<LEGEND>住所</LEGEND>
			<LABEL>郵便番号： </LABEL><INPUT TYPE="text" NAME="te" SIZE="8" STYLE="font-size: 90%">
			<LABEL FOR="tel_ID">電話番号： </LABEL><INPUT TYPE="text" NAME="tel" ID="tel_ID" SIZE="15" STYLE="font-size: 90%"><BR>
			<LABEL>住所： <INPUT TYPE="text" NAME="adr" SIZE="50" STYLE="font-size: 90%"></LABEL>
		</FIELDSET>
		<P STYLE="text-align: center"><INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></P>
	</FORM></DIV>

	<HR STYLE="height: 5px; background-color: #ff0000">
	<P CLASS="center">FORM 要素の外部に一部を記述</P>
	<DIV CLASS="no"><FORM NAME="form2" ID="form2_ID" ACTION="test2.php" METHOD="post">
		<P><LABEL>氏名： </LABEL><INPUT TYPE="text" NAME="shimei" SIZE="20" STYLE="font-size: 90%"></P>
		<FIELDSET>
			<LEGEND>性別</LEGEND>
			<LABEL><INPUT TYPE="radio" NAME="sex" VALUE="male">男</LABEL><BR>
			<LABEL><INPUT TYPE="radio" NAME="sex" VALUE="female">女</LABEL><BR>
		</FIELDSET>
		<BR>
	</FORM>
	<FIELDSET>
		<LEGEND>住所</LEGEND>
		<LABEL>郵便番号： </LABEL><INPUT TYPE="text" FORM="form2_ID" NAME="te" SIZE="8" STYLE="font-size: 90%">
		<LABEL>電話番号： </LABEL><INPUT TYPE="text" FORM="form2_ID" NAME="tel" SIZE="15" STYLE="font-size: 90%"><BR>
		<LABEL>住所： </LABEL><INPUT TYPE="text" FORM="form2_ID" NAME="adr" SIZE="50" STYLE="font-size: 90%">
	</FIELDSET>
	<P STYLE="text-align: center"><INPUT FORM="form2_ID" TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></P></DIV>
</BODY>
</HTML>

使用例２とそのソースコード：　INPUT 要素の属性を変化させ，その結果を比較している．なお，チェックボックス，及び，ラジオボタンの各々をグループ化するために FIELDSET 要素と LEGEND 要素（各グループのタイトルを示す）を使用している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>INPUT 要素の属性</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
	<H1 CLASS="center">INPUT 要素の属性</H1>
	<FORM NAME="form1" ID="form1_ID" ACTION="test2.php" METHOD="post">
		<LABEL>name, value, size, autocomplete, list： <INPUT TYPE="text" NAME="ex1" VALUE="" SIZE="20" AUTOCOMPLETE="on" LIST="fruit" STYLE="font-size: 90%"></LABEL>
		<DATALIST ID="fruit">
			<OPTION VALUE="蜜柑">
			<OPTION VALUE="林檎">
			<OPTION VALUE="葡萄">
		</DATALIST><BR>
		<LABEL>name, value, size, autofocus, dirname, required： <INPUT TYPE="text" NAME="ex2" SIZE="10" AUTOFOCUS DIRNAME="rtl" REQUIRED STYLE="font-size: 90%"></LABEL><BR><BR>
		<FIELDSET>
			<LEGEND>好きな野菜（ checked ）</LEGEND>
		　	<INPUT TYPE="checkbox" NAME="v1" VALUE="kyabetu" checked> キャベツ<BR>
		　	<INPUT TYPE="checkbox" NAME="v2" VALUE="daikon" checked> 大根<BR>
		　	<INPUT TYPE="checkbox" NAME="v3" VALUE="jagaimo"> ジャガイモ<BR>
		　	<INPUT TYPE="checkbox" NAME="v4" VALUE="tomato"> トマト<BR>
		</FIELDSET><BR>
		<LABEL>disabled： <INPUT TYPE="text" NAME="ex3" VALUE="無効" SIZE="20" DISABLED STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>readonly： <INPUT TYPE="text" NAME="ex4" VALUE="読み取り専用" SIZE="20" READONLY STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>max, min, step： <INPUT TYPE="range" VALUE="20" NAME="ex5" MIN="0" MAX="100" STEP="20"></LABEL><BR>
		<LABEL>pattern（半角英数字）, placeholder, maxlength： <INPUT TYPE="text" NAME="ex6" SIZE="20" PATTERN="^[0-9A-Za-z]+$" PLACEHOLDER="Ex.: Suganuma Yoshinori" MAXLENGTH="25" STYLE="font-size: 90%"></LABEL><BR>
		（ PLACEHOLDER 属性の代わりに VALUE 属性を使用した場合<INPUT TYPE="text" NAME="ex7" SIZE="20" PATTERN="^[0-9A-Za-z]+$" VALUE="Ex.: Suganuma Yoshinori" STYLE="font-size: 90%">）<BR>
		<LABEL>accept, multiple： <INPUT TYPE="file" NAME="ex8" ACCEPT="image/jpeg,image/gif" MULTIPLE STYLE="font-size: 90%"></LABEL><BR><BR>
		<P CLASS="center"><LABEL>右図は送信ボタン（ alt, height, width, src ）： <INPUT TYPE="image" SRC="../ayame.gif" ALT="送信" WIDTH="40" HEIGHT="60" onClick="JavaScript:submit();"></LABEL><BR></P>
	</FORM>
</BODY>
</HTML>

使用例３とそのソースコード：　INPUT 要素の TYPE 属性の値を変化させ，その結果を比較している．なお，チェックボックス，及び，ラジオボタンの各々をグループ化するために FIELDSET 要素と LEGEND 要素（各グループのタイトルを示す）を使用している．

<!DOCTYPE HTML>
<HTML>
<HEAD>
					<!-- タイトル -->
	<TITLE>TYPE 属性の値</TITLE>
					<!-- スタイルシート -->
	<LINK REL="stylesheet" TYPE="text/css" HREF="../../master.css">
					<!-- 文字コード -->
	<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
					<!-- スマホ -->
	<META NAME=viewport CONTENT="width=device-width, initial-scale=1">
</HEAD>
<BODY CLASS="white">
	<H1 CLASS="center">INPUT 要素における TYPE 属性の比較</H1>
	<FORM NAME="form1" ID="form1_ID" ACTION="test2.php" METHOD="post">
		<LABEL>hidden： 表示しない： <INPUT TYPE="hidden" NAME="hidden" VALUE="abc" STYLE="font-size: 90%"></LABEL>，　<LABEL>表示する： <INPUT TYPE="text" NAME="not_hidden" VALUE="abc" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>text： <INPUT TYPE="text" NAME="text" VALUE="テキスト" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>tel： <INPUT TYPE="tel" NAME="tel" SIZE="15" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>url： <INPUT TYPE="url" NAME="url" SIZE="30" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>email： <INPUT TYPE="email" NAME="mail" SIZE="30" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>password： <INPUT TYPE="password" NAME="password" SIZE="10" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>datetime： <INPUT TYPE="datetime" NAME="datetime" VALUE="2012-11-03T11:10:00+09:00" SIZE="25" STEP="60" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>date： <INPUT TYPE="date" NAME="date" SIZE="10" STEP="1" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>month： <INPUT TYPE="month" NAME="month" VALUE="11" SIZE="10" STEP="1" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>week： <INPUT TYPE="week" NAME="week" VALUE="5" SIZE="10" STEP="1" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>time： <INPUT TYPE="time" NAME="time" VALUE="13:35:00" SIZE="10" STEP="60" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>datetime-local： <INPUT TYPE="datetime-local" NAME="datetime-local" VALUE="2012-11-03T11:10:00" SIZE="20" STEP="60" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>number： <INPUT TYPE="number" NAME="number" VALUE="20" SIZE="5" STEP="5" STYLE="font-size: 90%"></LABEL><BR>
		<LABEL>range： <INPUT TYPE="range" VALUE="20" NAME="range" MIN="0" MAX="100" STEP="5"></LABEL><BR>
		<LABEL>color： <INPUT TYPE="color" VALUE="#00ff00" NAME="color"></LABEL><BR>
		<LABEL>file： <INPUT TYPE="file" NAME="file" STYLE="font-size: 90%"></LABEL><BR><BR>
		<FIELDSET>
			<LEGEND>好きな野菜（ checkbox ）</LEGEND>
		　	<INPUT TYPE="checkbox" NAME="v1" VALUE="kyabetu" checked> キャベツ<BR>
		　	<INPUT TYPE="checkbox" NAME="v2" VALUE="daikon" checked> 大根<BR>
		　	<INPUT TYPE="checkbox" NAME="v3" VALUE="jagaimo"> ジャガイモ<BR>
		　	<INPUT TYPE="checkbox" NAME="v4" VALUE="tomato"> トマト<BR>
		</FIELDSET>
		<P>
		<FIELDSET>
			<LEGEND>性別（ radio ）</LEGEND>
		　　<INPUT TYPE="radio" NAME="sex" VALUE="Male" checked> 男性<BR>
		　　<INPUT TYPE="radio" NAME="sex" VALUE="Female"> 女性<BR>
		</FIELDSET>
		<P CLASS="center">
			<LABEL>submit： <INPUT TYPE="submit" VALUE="送信" STYLE="font-size: 90%"></LABEL>　　
			<LABEL>button： <INPUT TYPE="button" VALUE="送信" onClick="JavaScript:submit();" STYLE="font-size: 90%"></LABEL>　　
			<LABEL>reset： <INPUT TYPE="reset" VALUE="リセット" STYLE="font-size: 90%"></LABEL><BR>
			<LABEL>image： <INPUT TYPE="image" SRC="../ayame.gif" ALT="送信" onClick="JavaScript:submit();"></LABEL><BR>
		</P>
	</FORM>
</BODY>
</HTML>