input 要素（HTMLタグ） - プログラミングスタイル

2018年07月23日

HTMLのinput要素の説明です。input要素は、入力や選択が可能なさまざまな種類のフォーム部品を定義する空要素です。type属性に定義する値によって、どのフォーム部品になるかが決まります。

要素の記述例

input要素の記述例

<form method="post" action="sample.cgi">
  <p><label for="id-01">テキスト入力</label><input id="id-01" type="text" name="form-01" value="サンプル"></p>
  <p><label for="id-02">パスワード入力</label><input id="id-02" type="password" name="form-02"></p>
  <p><label for="id-03">検索入力</label><input id="id-03" type="search" name="form-03"></p>
  <p><label for="id-04">電話番号入力</label><input id="id-04" type="tel" name="form-04" value="080-0000-0000"></p>
  <p><label for="id-05">URL入力</label><input id="id-05" type="url" name="form-05" value="http://www.example.com"></p>
  <p><label for="id-06">Eメールアドレス入力</label><input id="id-06" type="email" name="form-06" value="xxx@xxxx.com"></p>
  <p><label for="id-07">数値入力</label><input id="id-07" type="number" name="form-07" value="1"></p>
  <p><label for="id-08">スライダー</label><input id="id-08" type="range" name="form-08" value="1"></p>
  <p><label for="id-09">チェックボックス</label><input id="id-09" type="checkbox" name="form-09" value="1"></p>
  <p>
    <label for="id-10">ラジオボタン</label>
    <input id="id-10" type="radio" name="form-10" value="1">
    <input type="radio" name="form-10" value="2">
  </p>
  <p><label for="id-11">送信ボタン</label><input id="id-11" type="submit" value="送信"></p>
  <p><label for="id-12">リセットボタン</label><input id="id-12" type="reset" value="リセット"></p>
  <p><label for="id-13">汎用的なボタン</label><input id="id-13" type="button" value="汎用ボタン"></p>
  <p><label for="id-14">画像送信ボタン</label><input id="id-14" type="image" src="img/keyboard.jpg" alt="画像"></p>
  <p><label for="id-15">ファイル選択</label><input id="id-15" type="file"></p>
  <p><input type="hidden" name="form-22" value="code"></p>
</form>

閲覧中ブラウザーでの表示結果

要素の説明

input要素は、入力や選択が可能なさまざまな種類のフォーム部品を定義する空要素です。
input要素は、type属性に定義する値によって、どのフォーム部品になるかが決まります。

利用できる属性

input要素で利用できる属性
属性名	属性の説明
accept	type属性の値が「file」の場合、選択可能であるファイルの「MIMEタイプ」を定義する属性です。値をカンマ（,）で区切ることで複数定義することができます。
alt	type属性が「image」の時に、画像が表示されない場合、画像の代わりに表示するテキストを定義する属性です。
autocomplete	オートコンプリート機能を有効にしたい場合は「on」、無効にしたい場合は「off」、より具体的に何を入力させたいかを定義する場合は「自動入力詳細トークン」を定義する属性です。
autofocus	ページ読み込み時に、この部品にフォーカスをあてるようにする[link-html-ref-format_bool]です。
checked	チェックボックスまたはラジオボタンでをデフォルトでチェック状態にする[link-html-ref-format_bool]です。
dirname	この属性で定義すると、フォーム送信時、属性値とフォーム部品に入力されたテキストの文字表記方向（「ltr」または「rtl」）のセットが自動的に送信されるようになります。
disabled	部品を無効にする[link-html-ref-format_bool]です。フォーカスもできなくなります。
form	form要素のid属性値を指定し、任意のform要素と関連付けるための属性です。
formaction	フォームのデータ送信先URLを定義する属性です。
formenctype	フォームのデータ送信時のMIMEタイプを定義する属性です。
formmethod	フォームのデータ送信時のHTTPメソッドを定義する属性です。
formnovalidate	フォームのデータ送信時のデータ妥当性チェックの実施しないことを定義する[link-html-ref-format_bool]です。
formtarget	フォームのデータ送信結果のデフォルトの表示先とするウィンドウ、タブ、インラインフレーム、などの名前またはキーワードを定義する属性です。
height	type属性が「image」の時に表示される画像の高さを定義する属性です。
list	フォーム部品でサジェスト機能を使用するために、datalist要素のid属性値を指定する属性です。
max	入力・選択が可能な値の最大値を定義する属性です。
maxlength	入力可能な最大の文字数を整数で定義する属性です。
min	入力・選択が可能な値の最小値を定義する属性です。
minlength	最低限入力しなければならない文字数を整数で定義する属性です。
multiple	複数の値の入力・選択を可能にする[link-html-ref-format_bool]です。
name	フォーム送信データの名前（キー）を定義する属性です。
pattern	入力された値をチェックするためのJavaScriptの正規表現パターンを定義する属性です。
placeholder	入力のヒントとなるプレースホルダーを定義するための属性です。
readonly	値を変更（編集）できないようにする[link-html-ref-format_bool]です。
required	フォーム部品の入力・選択を必須にする[link-html-ref-format_bool]です。
size	テキスト入力フィールドの幅を文字数で定義する属性です。
src	type属性が「image」の時に表示される画像のURLを定義する属性です。
step	入力可能な「値の間隔」を定義する属性です。
type	どのフォーム部品にするのかをキーワードで定義する属性です。デフォルトは「text」です。
value	フォーム送信データのデフォルト値を定義します。type属性の値が、「submit」「reset」「button」の場合、この値がボタンのラベルとして表示されます。
width	type属性が「image」の時に表示される画像の幅を定義する属性です。

グローバル属性

HTMLのすべての要素はグローバル属性が利用できます。グローバル属性の一覧については「グローバル属性」を参照してください。

イベントハンドラ属性

input要素がサポートするイベントハンドラ属性については「イベントハンドラ属性」を参照してください。

ブラウザデフォルトCSS設定

Google Chromeの場合

input要素のブラウザデフォルトCSS

input {
  -webkit-appearance: textfield;
  background-color: white;
  -webkit-rtl-ordering: logical;
  cursor: text;
  padding: 1px;
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  border-image: initial;
  text-rendering: auto;
  color: initial;
  letter-spacing: normal;
  word-spacing: normal;
  text-transform: none;
  text-indent: 0px;
  text-shadow: none;
  display: inline-block;
  text-align: start;
  margin: 0em;
  font: 400 13.3333px Arial;
  -webkit-writing-mode: horizontal-tb !important;
}
input:not([type]),
input[type="email" i],
input[type="number" i],
input[type="password" i],
input[type="tel" i],
input[type="url" i],
input[type="text" i] {
  padding: 1px 0px;
}
input[type="password" i] {
  -webkit-text-security: disc !important;
}
input[type="search" i] {
  -webkit-appearance: searchfield;
  padding: 1px;
  box-sizing: border-box;
}

input[type="range" i] {
  -webkit-appearance: slider-horizontal;
  color: rgb(196, 196, 196);
  cursor: default;
  padding: initial;
  border: initial;
  margin: 2px;
}
input[type="checkbox" i] {
  -webkit-appearance: checkbox;
  margin: 3px 3px 3px 4px;
  box-sizing: border-box;
}
input[type="radio" i] {
  -webkit-appearance: radio;
  margin: 3px 3px 0px 5px;
  box-sizing: border-box;
}
input[type="button" i],
input[type="submit" i],
input[type="reset" i],
input[type="file" i] {
  padding: 1px 6px;
  align-items: flex-start;
  text-align: center;
  cursor: default;
  color: buttontext;
  background-color: buttonface;
  box-sizing: border-box;
  padding: 2px 6px 3px;
  border-width: 2px;
  border-style: outset;
  border-color: buttonface;
  border-image: initial;
}
input[type="button" i],
input[type="submit" i],
input[type="reset" i] {
  -webkit-appearance: push-button;
  user-select: none;
  white-space: pre;
}
input[type="hidden" i],
input[type="image" i],
input[type="file" i] {
  -webkit-appearance: initial;
  background-color: initial;
  cursor: default;
  padding: initial;
  border: initial;
}
input[type="image" i] {
  cursor: pointer;
}
input[type="file" i] {
  align-items: baseline;
  color: inherit;
  text-align: start !important;
}

前ページ HTMLタグリファレンス次ページ

目次