HTML
入力制御要素

前書き

構文

• <input type="" name="" value="">

パラメーター

備考

チェックボックスとラジオボタン

概要

チェックボックスとラジオボタンは<input>というHTMLタグで記述され、その動作はHTML仕様で定義されています 。

最も単純なチェックボックスまたはラジオボタンは、それぞれtype属性がcheckboxまたはradio <input>要素です。

<input type="checkbox">
<input type="radio">

単一のスタンドアローンのチェックボックス要素は、yes-or-noのような単一のバイナリオプションに使用されます。チェックボックスは独立しているため、ユーザーはチェックボックスのグループ内で好きなだけ多くの選択肢を選択できます。つまり、1つのチェックボックスをオンにしても、チェックボックスグループ内の他のチェックボックスのチェックは解除されません 。

ラジオボタンは通常、グループ内にあるすべてのボタンで同じname属性を使用して識別されるグループ（別のラジオボタンでグループ化されていない場合は、代わりにチェックボックスを使用することを意味します）で表示されます。ラジオボタンの選択は相互に排他的です 。つまり、ユーザはラジオボタンのグループから1つの選択肢のみを選択できます。ラジオボタンがチェックされると、以前にチェックされた同じname他のラジオボタンはチェックされなくなります。

例：

<input type="radio" name="color" id="red" value="#F00">
<input type="radio" name="color" id="green" value="#0F0">
<input type="radio" name="color" id="blue" value="#00F">

表示されると、ラジオボタンは円（チェックされていない）または塗りつぶされた円（チェックされている）として表示されます。チェックボックスは、四角形（チェックマークなし）または四角形（チェックマーク）として表示されます。ブラウザとオペレーティングシステムによっては、四角形の角が丸くなることがあります。

属性

チェックボックスとラジオボタンには、その動作を制御するための多数の属性があります。

value

他の入力要素と同様に、 value属性は、フォーム提出時にボタンに関連付ける文字列値を指定します。ただし、チェックボックスとラジオボタンは、値を省略しon場合、空白の値を送信するのではなく、送信時にデフォルトでonになるという点で特別です。 value属性は、ボタンの外観には反映されません。

checked

checked属性は、チェックボックスまたはラジオボタンの初期状態を指定します。これはブール値の属性であり省略することができます。

これらはそれぞれ、有効なラジオボタンを定義する同等の方法です。

<input checked>
<input checked="">
<input checked="checked">
<input checked="ChEcKeD">

checkedれていないボタンの唯一の有効な構文は、 checked属性がないことです。

<input type="radio">
<input type="checkbox">

<form>リセットすると、チェックボックスとラジオボタンがchecked属性の状態に戻ります。

アクセシビリティ

ラベル

ボタンにコンテキストを与え、各ボタンが何であるかをユーザに示すために、それぞれにラベルが必要です。これは<label>要素を使用してボタンをラップすることで行うことができます。また、ラベルをクリック可能にするので、対応するボタンを選択します。

例：

<label>
  <input type="radio" name="color" value="#F00">
  Red
</label>

またはfor属性がボタンのid属性に設定された<label>要素を使用しています。

<input type="checkbox" name="color" value="#F00" id="red">
<label for="red">Red</label>

ボタングループ

各ラジオボタンはグループ内の他のラジオボタンに影響するため、ラジオボタンのグループ全体にラベルまたはコンテキストを提供するのが一般的です。

グループ全体にラベルを付けるには、 <fieldset> <legend>要素内に<legend>要素を含むラジオボタンを含める必要があります。

例：

<fieldset>
  <legend>Theme color:</legend>
  <p>
    <input type="radio" name="color" id="red" value="#F00">
    <label for="red">Red</label>
  </p>
  <p>
    <input type="radio" name="color" id="green" value="#0F0">
    <label for="green">Green</label>
  </p>
  <p>
    <input type="radio" name="color" id="blue" value="#00F">
    <label for="blue">Blue</label>
  </p>
</fieldset>

チェックボックスは、関連するチェックボックスのグループを識別するフィールドセットと凡例と同様の方法でグループ化することもできます。ただし、チェックボックスは相互に排他的ではないため、同じ名前を共有しないようにしてください。これを行うと、同じキーに対して複数の値を送信するフォームが生成され、すべてのサーバー側言語が同じ方法でこれを処理するわけではありません（未定義の動作）。各チェックボックスには一意の名前を付けるか、角かっこ（ [] ）を使用して、そのキーの値の配列を送信する必要があることを示します。どちらの方法を選択するかは、フォームデータのクライアント側またはサーバー側の処理方法によって異なります。また、ブラウザとスクリーンリーダーの組み合わせによっては、フィールドセットの各入力フィールドの前に凡例が読み取られるため、凡例を短くしておく必要があります。

隠された

<input type="hidden" name="inputName" value="inputValue">  

非表示の入力はユーザーには表示されませんが、フォームが送信されたときにその値がサーバーに送信されます。

パスワード

<input type="password" name="password">

値がpasswordであるtype属性を持つinput要素は、 入力type=textと同様の単一行のテキストフィールドを作成しますが、ユーザーが入力するとテキストは表示されません。

<input type="password" name="password" placeholder="Password">

プレースホルダテキストはプレーンテキストで表示され、ユーザーが入力を開始すると自動的に上書きされます。

注意：ブラウザやシステムによっては、パスワードフィールドのデフォルト動作を変更して、直近に入力した文字を短時間表示することもできます。

提出する

<input type="submit" value="Submit">

送信入力は、クリックされると内部にあるフォームを送信するボタンを作成します。

より簡単にスタイル設定することができる、または他の要素を含む送信ボタンが必要な場合は、 <button>要素を使用することもできます。

<button type="submit">
  <img src="submit-icon.jpg" /> Submit
</button>

ファイル

<input type="file" name="fileSubmission">

ファイル入力を使用すると、ローカルファイルシステムから現在のページで使用するファイルを選択できます。 form要素と組み合わせて使用​​すると、ユーザーはファイルをサーバーにアップロードできるようになります（詳細については、「 ファイルのアップロード」を参照）。

次の例では、ユーザーがfile入力を使用してfileシステムからファイルを選択し、そのファイルをupload_file.phpという名前のサーバー上のスクリプトにアップロードすることができupload_file.php 。

<form action="upload_file.php" method="post" enctype="multipart/form-data">
    Select file to upload:
    <input type="file" name="fileSubmission" id="fileSubmission">
    <input type="submit" value="Upload your file" name="submit">
</form>

複数のファイル

追加するmultipleユーザーが1つの以上のファイルを選択することができます属性を：

<input type="file" name="fileSubmission" id="fileSubmission" multiple>

ファイルを受け入れる

Accept属性は、ユーザーが選択できるファイルの種類を指定します。例： .png 、 .gif 、 .jpeg 。

<input type="file" name="fileSubmission" accept="image/x-png,image/gif,image/jpeg" />

入力検証

HTML入力の検証は、入力要素の特殊な属性に基づいてブラウザによって自動的に行われます。 JavaScriptの入力検証に部分的にまたは完全に置き換えることができます。この種の検証は、特別に細工されたHTTP要求を介してユーザーによって回避される可能性があるため、サーバー側の入力検証に代わるものではありません。検証は、フォームを送信しようとしたときにのみ発生するため、（JavaScriptを使用していない限り）検証が行われるように、すべての制限付き入力がフォーム内になければなりません。無効または読み取り専用の入力は検証をトリガーしません。

いくつかの新しい入力タイプ（ email 、 url 、 tel 、 dateなど）は自動的に検証され、独自の検証制約は必要ありません。

<input required>

最小/最大長

長さの要件を示すには、 minlength属性とmaxlength属性を使用します。ほとんどのブラウザでは、ユーザーがボックスに最大文字数を超える文字を入力することを防ぎ、送信を試みる前でもエントリが無効にならないようにします。

<input minlength="3">
<input maxlength="15">
<input minlength="3" maxlength="15">

範囲の指定

minおよびmax属性を使用して、ユーザーがタイプnumberまたはrange入力に入力できる数値の範囲を制限する

Marks: <input type="number" size="6" name="marks" min="0" max="100" />
Subject Feedback: <input type="range" size="2" name="feedback" min="1" max="5" />

<input pattern="\d*" title="Numbers only, please.">

<input type="file" accept="image/*" title="Only images are allowed">

<input type="file" accept="image/*,.rar,application/zip">

注：追加novalidateに属性をform要素またはformnovalidate送信ボタンへの属性は、フォーム要素の検証を防ぐことができます。例えば：

<form>
    <input type="text" name="name" required>
    <input type="email" name="email" required>
    <input pattern="\d*" name="number" required>

    <input type="submit" value="Publish"> <!-- form will be validated -->
    <input type="submit" value="Save" formnovalidate> <!-- form will NOT be validated -->
</form>

フォームには、ドラフトを「公開」するために必要なフィールドがありますが、ドラフトを「保存」する必要はありません。

リセット

<input type="reset" value="Reset">

タイプresetの入力はボタンを作成します。このボタンはクリックされると、フォームに含まれるすべての入力をデフォルト状態にリセットします。

• 入力フィールドのテキストは、空白またはデフォルト値（ value属性を使用して指定）にリセットされます。
• 選択メニューのオプションは、 selected属性がない限り選択解除selectedます。
• すべてのチェックボックスとラジオボックスは、 checked属性がない限り、選択解除されます。

注：リセットボタンは、効果を出すために<form>要素の中にあるか、または（ form属性を介して） <form>要素に付加されている必要があります。ボタンはこのフォーム内の要素のみをリセットします。

数

<input type="number" value="0" name="quantity">

電話番号

<input type="tel" value="+8400000000">

値がtelであるtype属性を持つinput要素は、電話番号を入力するための1行のプレーンテキスト編集コントロールを表します。

Eメール

<form>
  <label>E-mail: <label>
  <input type="email" name="email">
</form>

ボタン

<input type="button" value="Button Text">

ボタンを使用して、フォームを送信せずにページ上でアクションをトリガすることができます。さらに簡単にスタイル設定することができたり、他の要素を含むボタンが必要な場合は、 <button>要素を使用することもできます。

<button type="button">Button Text</button>

ボタンは、通常、 "onclick"イベントで使用されます：

<input type="button" onclick="alert('hello world!')" value="Click Me">

または

<button type="button" onclick="alert('hello world!')">Click Me</button>

属性

[name]

フォームデータと共に送信されるボタンのname 。

[type]

ボタンのtype 。

可能な値は次のとおりです。

submit ：ボタンはフォームデータをサーバーに送信します。これは、属性が指定されていない場合、または属性が空の値または無効な値に動的に変更された場合のデフォルトです。

reset ：ボタンはすべてのコントロールを初期値にリセットします。

button ：このボタンにはデフォルトの動作はありません。イベントの発生時にトリガされる、要素のイベントに関連付けられたクライアント側のスクリプトを持つことができます。

menu ：このボタンは、指定された要素を介して定義されたポップアップメニューを開きます。

[value]

ボタンの初期値です。

色

<input type="color" name="favcolor" value="#ff0000">

URL

<input type="url" name="Homepage">

日付

<input type="date" />

DateTime - ローカル

<input type="datetime-local" />

画像

<input type="image" src="img.png" alt="image_name" height="50px" width="50px"/>

画像。代替テキストを定義するには、src属性を使用してイメージのソースを定義し、alt属性を使用する必要があります。 height属性とwidth属性を使用して、イメージのサイズをピクセル単位で定義することができます。

範囲

<input type="range" min="" max="" step="" />

月

<input type="month" />

時間

<input type="time" />

19:04:39
08:20:39.04

週間

<input type="week" />

テキスト

最も基本的な入力タイプとtypeが指定されていない場合のデフォルト入力。この入力タイプは、改行が入力値から自動的に削除された単一行のテキストフィールドを定義します。それ以外の文字はすべてこれに入力できます。 <input>要素は、ユーザーがデータを入力できる入力コントロールを宣言するために<form>要素内で使用されます。

構文

<input type="text">

または（ typeを指定せずに、default属性を使用して）

<input>

テキストフィールド入力のデフォルトの幅は20文字です。これは次のようにsize属性の値を指定することで変更できます：

<input type="text" size="50">

size属性は、CSSで幅を設定するのとはまったく異なります。幅を使用すると、入力が常にワイドでなければならない特定の値（ピクセル数、親要素の割合など）が定義されます。 sizeを使用すると、使用sizeれているフォントと通常の文字の幅に基づいて、割り当てる幅を計算します。

注： size属性を使用しても、ボックスに入力できる文字数は本質的に制限されず、ボックスの幅のみが制限されます。長さを制限する方法については、 入力の検証を参照してください。

入力フィールドは1行のテキストのみを許可します。大量のテキストに対して複数行のテキスト入力が必要な場合は、代わりに<textarea>要素を使用します。

サーチ

<input type="search" name="googlesearch">

DateTime（グローバル）

valueが " datetime "のtype属性を持つinput要素は、要素の値をグローバルな日時（タイムゾーン情報付き）を表す文字列に設定するためのコントロールを表します。

<fieldset>
   <p><label>Meeting time: <input type=datetime name="meeting.start"></label>
</fieldset>

許可される属性：

• グローバル属性
• 名
• 無効
• 形
• タイプ
• オートコンプリート
• オートフォーカス
• リスト
• 最小＆最大
• ステップ（浮動）
• 読み取り専用
• 必要な値