<input>【汎用入力コントロール (Form control)】

目次: 概要 構文 コントロールの種類 type毎の属性 DOMインタフェース

概要

メモ

各種外観は、コントロールの種類 参照
<script>
function funcCopy() {
  // 通常入力
  var text = document.getElementById("input-1").value;
  document.getElementById("input-2").value = text;
  // チェックボックス
  var check = document.getElementById("checkbox-1").checked;
  document.getElementById("checkbox-2").checked = check;
  // ラジオボタン
  var value = "";
  var listA = document.getElementsByName("radio_1");
  for (var i = 0; i < listA.length; i++) {
    if (listA[i].checked) {
      value = listA[i].value;
      break;
    }
  }
  var listB = document.getElementsByName("radio_2");
  for (var i = 0; i < listB.length; i++) {
    if (listB[i].value == value) {
      listB[i].checked = true;
      break;
    }
  }
  // カラー選択
  var color = document.getElementById("color-1").value;
  document.getElementById("color-2").value = color;
  // 日付
  var date = document.getElementById("date-1").valueAsDate;
  document.getElementById("date-2").valueAsDate = date;
  // 数値
  var num = document.getElementById("number-1").valueAsNumber;
  if (0 < num) { // 未サポート対応
    document.getElementById("number-2").valueAsNumber = num;
  }
  // スライダー
  var range = document.getElementById("range-1").valueAsNumber;
  document.getElementById("range-2").valueAsNumber = range;
}

function funcDisable() {
  var disabled = (document.getElementById("input-2").disabled) ? false : true;
  document.getElementById("input-2").disabled = disabled;
  document.getElementById("checkbox-2").disabled = disabled;
  document.getElementById("fieldset-2").disabled = disabled;
  document.getElementById("color-2").disabled = disabled;
  document.getElementById("date-2").disabled = disabled;
  document.getElementById("number-2").disabled = disabled;
  document.getElementById("range-2").disabled = disabled;
}
</script>

<p>
<input id="input-1" value="入力データ">
<label><input id="checkbox-1" type="checkbox" checked>チェックボックス1</label>
</p>
<fieldset style="width:150px;">
  <legend>ラジオボタン</legend>
  <label><input name="radio_1" type="radio" value="A" checked>A</label>
  <label><input name="radio_1" type="radio" value="B">B</label>
  <label><input name="radio_1" type="radio" value="C">C</label>
</fieldset>
<input id="color-1" type="color" value="#FF0000">
<input id="date-1" type="date" value="2001-02-03">
<input id="number-1" type="number" value="123456">
<input id="range-1" type="range" value="50">

<p><input type="button" onclick="funcCopy();" value="入力値を下にコピー">
<input type="button" onclick="funcDisable();" value="無効 / 有効 切替"></p>

<p>
<input id="input-2" placeholder="ここにコピー">
<label><input id="checkbox-2" type="checkbox">チェックボックス2</label>
</p>
<fieldset id="fieldset-2" style="width:150px;">
  <legend>ラジオボタン</legend>
  <label><input name="radio_2" type="radio" value="A">A</label>
  <label><input name="radio_2" type="radio" value="B">B</label>
  <label><input name="radio_2" type="radio" value="C" checked>C</label>
</fieldset>
<input id="color-2" type="color" value="#00FF00">
<input id="date-2" type="date">
<input id="number-2" type="number" value="0">
<input id="range-2" type="range" value="0">

ラジオボタン

ラジオボタン

CSS (一部)

スタイルスタイル定義備考
マウスカーソル変更cursor【マウスカーソル】
コントロール幅・高さ width【要素の幅】height【要素の高さ】
ホバー時のスタイル変更:hover【ホバー要素】
アクティブ時のスタイル変更:active【アクティブ要素】
フォーカス時のスタイル変更:focus【フォーカス要素】
使用可能時のスタイル変更:enabled【使用可能要素】
使用不可時のスタイル変更:disabled【使用不可要素】
チェック状態時のスタイル変更 :checked【チェック状態要素】
不確定状態時のスタイル変更 :indeterminate【不確定状態要素】
IMEモード ime-mode【IMEモード】
説明
auto自動 (変更なし)
activeON状態 (手動切替可)
inactiveOFF状態 (手動切替可)
disabled無効化
MS独自仕様:一部ブラウザサポート

DOM・Web API (一部)

処理プロパティ / メソッド備考
フォーカス取得イベントonfocus
フォーカス喪失イベントonblur
変更イベントonchange即時 あるいは フォーカス喪失時
入力不正イベントoninvalidrequired【入力必須】・pattern【入力パターン】 チェック
クリックイベントonclickボタン・イメージボタン
送信イベントformのonsubmit送信ボタン
リセットイベントformのonresetリセットボタン
要素取得document.getElementById(【id】)
テキスト・キャプション・値等 取得・設定value
チェック状態 取得・設定checkedチェックボックス・ラジオボタン
無効化 取得・設定disabled (true / false) 複数のコントロールを操作する場合は、 <fieldset>【コントロールのグループ化】利用
スタイル 取得・設定style.~color・backgroundColor 等
数値(double) 取得・設定valueAsNumber
日時(Date?) 取得・設定valueAsDate

関連要素

構文

<input必須開始タグ
accept=【MIMEタイプ (複数:カンマ区切り)】アップロードファイルのMIMEタイプ
(例:application/pdf・text/html・audio/*・video/*・image/*・拡張子指定 .txt・.doc・.xls)
align=top | middle | bottom | left | rightimage配置 代替:スタイルシート(vertical-align・float)
alt=【代替テキスト】代替テキスト
autocomplete=off | onオートコンプリート機能の有効・無効 (入力候補表示)
autofocusページロード時、自動フォーカス
checkedチェック状態
dirname=【フィールド名】要素方向(ltr・rtl)のフィールド名 (このフィールド名で要素方向を送信)
disabledコントロール無効化
form=【form要素id】関連付けform要素id属性 (コントロールをform要素外に定義可能)
formaction=【URL】フォーム送信時のURL
formenctype=【エンコードタイプ】フォーム送信時のエンコードタイプ  ("application/x-www-form-urlencoded" | "multipart/form-data" | "text/plain")
formmethod=get | postフォーム送信時のHTTPメソッド
formnovalidateフォーム送信時の検証無効
formtarget=【ターゲット】フォーム送信時のターゲット
height=【高さ】画像の高さ
inputmode=【入力モード】
入力モード (実装依存)
HTML 5.1:Input modalities: the inputmode attribute
list=【datalist要素のid】<datalist>【コンボボックス用リスト】のid
max=【最大値】最大値
maxlength=【最大入力文字数】最大入力文字数
min=【最小値】最小値
minlength=【最小入力文字数】最小入力文字数
multiple複数値可否
name=【コントロール名】コントロール名 (送信データ名) id との重複は不可
pattern=【正規表現】入力パターンのJavaScript正規表現 (エラーメッセージにtitle属性を使用)
placeholder=【表示文字列】ウォーターマーク (未入力時の表示文字列)
readonly読み取り専用
required入力必須
size=【横幅】コントロールの横幅 (ブラウザ 及び type属性によっては無視)
src=【URL】画像リソースのURL
step=【増減ステップ値】増減ステップ値
type=【コントロールの種類 (省略:text)】 コントロールの種類 (関連属性:type毎の属性 参照)
value=【初期値】初期値 (キャプション)
width=【幅】画像の幅

【グローバル属性】

accesskey=【アクセスキー (複数:半角スペース区切り)】アクセスキー
class=【クラス名 (複数:半角スペース区切り)】 所属クラス (複数指定:<style>【スタイル情報】)・外部スタイルシートで後から定義したほうが優先
contenteditable [ ="" (可能) | true (可能) | false (不可) | inherit (親要素継承) ]編集可否
contextmenu=<menu>【メニュー】 のid コンテキストメニューのid
data-*=【カスタムデータ】 カスタムデータ属性
dir=ltr (左から右) | rtl (右から左) | auto (自動) 文字表記方向 (ltr:left to right text or table / rtl:right to left text or table)
<bdo>【テキスト方向形式】の場合、ltr または rtlが必須
draggable=true (ドラッグ可能) | false (ドラッグ不可) | auto (ブラウザ既定) ドラッグ可否
dropzone=copy (ドロップデータのコピー) | move (ドロップデータを移動) | link (ドロップデータのリンク)
ドロップデータの扱い
hidden非表示
id=【id】id (ドキュメント中で一意 name【コントロール名 (送信データ名)】を含む)
(<a>【ハイパーリンク】のリンク先・CSS対象(#~)・スクリプト参照)
is=【定義名】定義名
itemid=【URL】アイテムのグローバル識別子
itemprop=【アイテムのプロパティ (複数:半角スペース区切り)】 アイテムのプロパティ
itemref=【要素IDのリスト】アイテムの参照リスト
itemscopeアイテムのプロパティ宣言
itemtype=【アイテムの型 (複数:半角スペース区切り)】アイテムの型
lang=【言語コード】言語コード (【主コード】-【副コード】 例:"ja":日本語 / "en":英語 / "en-US":アメリカ英語)
slot=<slot>【スロット】のname属性スロット名
spellcheck=true | falseスペルチェック有無
style=【スタイルシート (複数:セミコロン区切り / 最後のセミコロンは省略可)】スタイル
tabindex=【タブインデックス番号】タブインデックス
title=【説明文】説明 (多くはツールチップ表示)
<link>【メタデータリンク】:メタデータリンクのタイトル
<style>【スタイル情報】:スタイルシート名
translate="" (翻訳対象) | yes (翻訳対象) | no (翻訳対象外)翻訳可否
>

コントロールの種類

右記の記述全て有効:type="button" ・ type='button' ・ type=button
type属性コントロール備考実装
buttonボタンキャプション:value属性
checkboxチェックボックスキャプション:<label【ラベル】>と組み合わせ
color色選択一部はコード入力
date日付
datetime-local日時ローカルの日時 (一時定義されていた datetime は廃止)
emailEメール 複数選択可能
fileアップロードファイル選択複数選択可能
hidden隠しフィールド(非表示)
imageイメージボタン
month年月
number数値
passwordパスワード数値
radioラジオボタンキャプション:<label【ラベル】>と組み合わせ
rangeスライダーデフォルト:0 ~ 100
resetリセットボタン
search検索textとの違いは外観 (クリアボタン等)
submit送信ボタン
tel電話番号
text
(省略時)
1行テキスト 複数行は<textarea>【複数行入力コントロール】
コンボボックス list属性に<datalist>【コンボボックス用リスト】指定
他のtype属性でも使用可
time時刻
urlURL
week週番号

type毎の属性

(1/2)acceptaltautocompletecheckeddirname formactionformenctypeformmethodformnovalidateformtargetheightinputmodelist
button
checkbox
color
date
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week

(2/2)maxmaxlengthminminlengthmultiplepatternplaceholderreadonlyrequired sizesrcstepvaluewidth
buttonキャプション
checkbox判別値
color初期値
#rrggbb形式
(小文字)
dateyyyy-MM-dd
形式
yyyy-MM-dd
形式
初期値
yyyy-MM-dd
形式
datetime-local
※datetime※datetime初期値
※datetime
emailvalue値
カンマ
区切り
初期値
filevalue値
カンマ
区切り
hidden初期値
image初期値
month
※month※month初期値
※month
number初期値
password初期値
radio判別値
range初期値
resetキャプション
search初期値
submitキャプション
tel初期値
text初期値
time※time※time秒単位初期値
※time
url初期値
week
※week※week初期値
※week

○:有効
※datetime:yyyy-MM-ddThh:mm 形式
※month:
※week:
※time:hh:mm[:ss[.nnn]] 形式 (nnn:1~3桁)

DOMインタフェース (HTMLInputElement・HTMLElement)

interface HTMLInputElement : HTMLElement { W3C:interface HTMLInputElement (英語)   HTML 5.1HTML 5.2WHATWG

【プロパティ】

HTMLInputElement プロパティ】

accept;アップロードファイルのMIMEタイプ
alt;代替テキスト
autocomplete;オートコンプリート機能の有効・無効
autofocus;ページロード時、自動フォーカス
checked;チェック状態
defaultChecked;初期チェック状態
defaultValue;初期値
dirName;要素方向
disabled;コントロール無効化
attribute FileList?files;選択ファイル リスト
attribute HTMLFormElement?form; <form>【フォーム】 エレメント
formAction;フォーム送信時のURL
formEnctype;フォーム送信時のエンコードタイプ
formMethod;フォーム送信時のHTTPメソッド
formNoValidate;フォーム送信時の検証無効
formTarget;フォーム送信時のターゲット
attribute unsigned longheight;画像の高さ
indeterminate;不定状態 (チェックボックス)
labels; 関連付け<label>【ラベル】エレメント リスト  (W3c:NodeList (英語))
attribute HTMLElement?list; <datalist>【コンボボックス用リスト】のエレメント
max;最大値
attribute longmaxLength;最大入力文字数
min;最小値
attribute longminLength;最小入力文字数
multiple;複数値可否
name;コントロール(送信)名 (重複:グループ化 / idとの重複不可)
pattern;入力パターンのJavaScript正規表現
placeholder;ウォーターマーク (未入力時の表示文字列)
readonly;読み取り専用
required;入力必須
selectionDirection;選択方向 ("forward" / "backward" / "none")
attribute unsigned longselectionEnd;選択終了位置
attribute unsigned longselectionStart;選択開始位置
attribute unsigned longsize;コントロールの横幅
src;画像リソースのURL
step;増減ステップ値
type;コントロールの種類
validationMessage;妥当性チェックNG時メッセージ
attribute ValidityStatevalidity; 妥当性状態
interface ValidityState {
valueMissing;未入力
typeMismatch;タイプ不正
patternMismatch;パターン不正
tooLong;データ長超過
tooShort;データ長不足
rangeUnderflow;アンダーフロー
rangeOverflow;オーバーフロー
stepMismatch;ステップ不正
badInput;不正入力
customError;カスタムエラー
valid;有効
};
[TreatNullAs=EmptyString] value;値 (キャプション)
attribute Date?valueAsDate;値 (日時)
attribute unrestricted doublevalueAsNumber;値 (数値)
attribute unsigned longwidth;画像の幅
willValidate;妥当性チェック対象

HTMLElement プロパティ】W3C:interface HTMLElement (英語) HTML 5.1HTML 5.2WHATWG

accessKey;アクセスキー
accessKeyLabel;アクセスキー表現文字列
contentEditable;編集可能状態 ("true":編集可能 / "false":編集不可 / "inherit":親要素継承)
Mapdataset;カスタムデータ属性 (data-*) マップ
dir;文字表記方向 ("ltr":左から右 / "rtl":右から左)
draggable;ドラッグ可否
[PutForwards=value] attribute DOMTokenListdropzone;ドロップデータの扱い
hidden;非表示状態
[TreatNullAs=EmptyString]innerText;内容 (テキスト形式)
isContentEditable;編集可否
lang;言語コード
spellcheck;スペルチェック有無
attribute longtabIndex;タブインデックス
title;説明
translate;翻訳可否

ElementCSSInlineStyle プロパティ】 HTMLElement implements ElementCSSInlineStyle; W3C:interface ElementCSSInlineStyle (英語)

attribute CSSStyleDeclarationstyle;スタイル

CSSStyleDeclaration プロパティ】 (仕様上、次と同等: CSSStyleDeclaration implements CSS2Properties) W3C:Interface CSS2Properties (英語)

style.~;スタイル属性 (例:style.color・style.backgroundColor)

Element プロパティ】interface HTMLElement : Element W3C:Interface Element (英語) HTML 5.1HTML 5.2WHATWG

[SameObject] attribute NamedNodeMapattributes;関連属性 マップ
[SameObject] attribute DOMTokenListclassList;クラス名 リスト
className;クラス名
id;id (ページ内で一意:name【コントロール(送信)名】を含む)
(innerHTML;)内容 (HTML形式) W3C:未定義 (参照:Element.outerHTMLNode.textContent (innerText))
localName;ローカル名
?namespaceURI;ネームスペースURI
(outerHTML;)タグを含む内容 (HTML形式) W3C:未定義 (参照:Element.innerHTMLNode.textContent (innerText))
?prefix;プリフィックス
tagName;タグ名

Node プロパティ】 interface Element : Node W3C:Interface Node (英語) HTML 5.1HTML 5.2WHATWG

?baseURI;ベースURI
[SameObject] childNodes;子ノード リスト
?firstChild;先頭子ノード
?lastChild;最終子ノード
?nextSibling;次の兄弟ノード
nodeName;ノード名
attribute unsigned shortnodeType;ノードタイプ
(ELEMENT_NODE / ATTRIBUTE_NODE / TEXT_NODE / CDATA_SECTION_NODE / ENTITY_REFERENCE_NODE / ENTITY_NODE / PROCESSING_INSTRUCTION_NODE / COMMENT_NODE / DOCUMENT_NODE / DOCUMENT_TYPE_NODE / DOCUMENT_FRAGMENT_NODE / NOTATION_NODE)
?nodeValue;ノード値
?ownerDocument;オーナードキュメント
?parentElement;親エレメント
?parentNode;親ノード
?previousSibling;前の兄弟ノード
?textContent;
(IE:innerText)
内容 (Text形式) (参照:Element.innerHTMLElement.outerHTML)
取得:要素内のHTMLタグを除外しテキストのみ
設定:HTMLタグはテキスト変換

GlobalEventHandlers プロパティ (一部) 】 HTMLElement implements GlobalEventHandlers; W3C:interface GlobalEventHandlers (英語) HTML 5.1HTML 5.2WHATWG

attribute EventHandler onabort;on~;イベントハンドラ (例:onclick・onfocus)

ParentNode プロパティ】Element implements ParentNode; W3C:Interface ParentNode (英語)

attribute unsigned longchildElementCount;子エレメントの数
[SameObject] attribute HTMLCollectionchildren;子エレメント コレクション
?firstElementChild;最初の子エレメント
?lastElementChild;最後の子エレメント

NonDocumentTypeChildNode プロパティ】Element implements NonDocumentTypeChildNode; W3C:Interface NonDocumentTypeChildNode (英語)

?previousElementSibling;前の兄弟エレメント
?nextElementSibling;次の兄弟エレメント

【メソッド】

HTMLInputElement メソッド】

boolean checkValidity();妥当性チェック
void select();全選択
void setCustomValidity( error);妥当性エラーメッセージ設定
void setRangeText( replacement);
void setRangeText ( replacement, unsigned long start, unsigned long end, optional SelectionMode selectionMode = "preserve");
void setSelectionRange(unsigned long start, unsigned long end, optional direction);選択
void stepDown(optional long n = 1);値増加
void stepUp(optional long n = 1);値削減

HTMLElement メソッド】W3C:interface HTMLElement (英語) HTML 5.1HTML 5.2WHATWG

void click();クリック 操作
void focus();フォーカス設定 操作
void forceSpellCheck();スペルチェック
void blur();フォーカス喪失 操作

Element メソッド】interface HTMLElement : Element W3C:Interface Element (英語)

? getAttribute( name);属性取得
? getAttributeNS(? namespace, localName);属性取得 (ネームスペース指定)
HTMLCollection getElementsByClassName( classNames);エレメント コレクション取得 (クラス名指定)
HTMLCollection getElementsByTagName( localName);エレメント コレクション取得 (タグ名指定)
HTMLCollection getElementsByTagNameNS(? namespace, localName);エレメント コレクション取得 (ネームスペース・タグ名指定)
boolean hasAttribute( name);属性チェック
boolean hasAttributeNS(? namespace, localName);属性チェック (ネームスペース指定)
void removeAttribute( name);属性削除
void removeAttributeNS(? namespace, localName);属性削除 (ネームスペース指定)
void setAttribute( name, value);属性設定
void setAttributeNS(? namespace, name, value);属性設定 (ネームスペース指定)

Node メソッド】 interface Element : Node W3C:Interface Node (英語)

Node appendChild(Node node);子ノード追加
[NewObject] Node cloneNode(optional boolean deep = false);クローンノード作成
unsigned short compareDocumentPosition(Node other);他ノードとの位置比較
(DOCUMENT_POSITION_DISCONNECTED / DOCUMENT_POSITION_PRECEDING / DOCUMENT_POSITION_FOLLOWING / DOCUMENT_POSITION_CONTAINS / DOCUMENT_POSITION_CONTAINED_BY / DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC)
boolean contains(Node? other);指定子孫ノードの存在有無
boolean hasChildNodes();子ノードの存在有無
Node insertBefore(Node node, Node? child);指定ノード前挿入
boolean isDefaultNamespace(? namespace);デフォルトネームスペース チェック
boolean isEqualNode(Node? node);同一ノードチェック
? lookupNamespaceURI(? prefix);ネームスペースURI調査
? lookupPrefix(? namespace);ネームスペース プリフィックス調査
void normalize();標準化
Node removeChild(Node child);子ノード削除
Node replaceChild(Node node, Node child);子ノード置換

ParentNode メソッド】Element implements ParentNode; W3C:Interface ParentNode (英語)

Element? querySelector( selectors);指定セレクタ先頭エレメント取得
[NewObject] NodeList querySelectorAll( selectors);指定セレクタ ノードリスト取得

ChildNode メソッド】Element implements ChildNode; W3C:Interface ChildNode (英語)

void remove();削除
};