input要素

1. <input>

type属性は、フォームコントロールのタイプを指定します。既定値は text です。
タイプの種類は、text, search, url, tel, email, password, number, date, month, week, time, datetime-local, range, color, checkbox, radio, file, image, submit, reset, button, hidden があります。

1. <input form="ifmForm" name="nipText">
2. <form id="ifmForm" action="./fmreceive.htm">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

form属性は、form要素の id属性値を設定します。要素を form要素に関連付けます。省略したときは、最も近い祖先の form要素に関連付けられます。

1. <form action="./fmreceive.htm">
2. <input name="nipText">
3. <input>
4. <button name="nbtSender" value="./fminput.htm">ボタン</button>
5. <br>受信用の<br>ページへ
6. </form>

name属性は、要素の名前を指定します。フォームの送信とform.elements APIで使用する要素の名前です。

1. <form action="./fmreceive.htm">
2. <input name="nipText" value="value">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

value属性は、要素の既定値を指定します。

1. <form action="./fmreceive.htm">
2. <input name="nipText" value="value" disabled>
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

disabled属性は、ユーザーがそのコントロールを利用できないことを示す論理属性です。変更できないだけでなく、送信もできません。

1. <form action="./fmreceive.htm">
2. <input name="nipText1" autocomplete="on">
3. <input name="nipText2" autocomplete="off">
4. <button name="nbtSender" value="./fminput.htm">ボタン</button>
5. <br>受信用の<br>ページへ
6. </form>

autocomplete属性は、入力欄が提供する自動補完機能の種類を示します。 関連付けられた form要素の autocomplete属性によって既定値が指定されます。form要素の autocomplete属性それ自体の既定値は on です。 on はブラウザーはユーザーが以前入力した値を元に、値の自動補完を行うことができます。
[使用できるタイプ(type属性の値)は、text, search, url, tel, email, password, number, date, month, week, time, datetime-local, range, color, hidden です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" required>
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

required属性は、ユーザーはフォームを送信する前に値を入力する必要があることを示す論理属性です。
[使用できるタイプ(type属性の値)は、text, search, url, tel, email, password, number, date, month, week, time, datetime-local, checkbox, radio, file です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" readonly value="abc">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

readonly属性は、ユーザーがコントロールの値を変更できないことを示す論理属性です。
[使用できるタイプ(type属性の値)は、text, search, url, tel, email, password, number, date, month, week, time, datetime-local です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" list="idaDatalist">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>
6. <datalist id="idaDatalist">
7. <option value="LI01">
8. <option value="LI02">
9. </datalist>

list属性は、オートコンプリートオプションのリストを表します。datalist要素と関連付けて表示します。属性値は、datalist要素の id属性値です。
[使用できるタイプ(type属性の値)は、text, search, url, tel, email, number, date, month, week, time, datetime-local, range, color です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" maxlength="3">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

maxlength属性は、ユーザーが入力可能な最大文字数を指定します。正の整数値のみ有効で、無効な値の場合や指定がない場合は無制限として扱われます。有効な minlength属性の値との関係で矛盾が生じない様にしなければなりません。
[使用できるタイプ(type属性の値)は、text, search, url, tel, email, password です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" minlength="2">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

minlength属性は、ユーザーが入力しなければいけない必要最小文字数を指定します。正の整数値のみ有効で、無効な値の場合や指定がない場合は無制限として扱われます。有効な maxlength属性の値との関係で矛盾が生じない様にしなければなりません。
編集途中に最小文字数未満になる事を妨げる物ではありません。また、入力必須項目を表す訳でもありません。入力必須とするならば、required属性も指定してください。
[使用できるタイプ(type属性の値)は、text, search, url, tel, email, password です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" pattern="[0-9]{3}">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

pattern属性は、コントロールの値、または複数の属性が適用されて設定されている場合にコントロールの値がチェックされる正規表現を指定します。
[使用できるタイプ(type属性の値)は、text, search, url, tel, email, password です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" size="4">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

size属性は、入力を表示する文字数を指定します。基本的に、CSSのwidthプロパティをいくつかの特殊な設定で設定した場合と同じ結果を作成します。値の実際の単位は、入力タイプによって異なります。CSSの幅は、size属性よりも優先されます。
[使用できるタイプ(type属性の値)は、text, search, url, tel, email, password です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" placeholder="abc">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

placeholder属性は、コントロールに値がない場合のユーザーのデータ入力を支援するための短いヒント（単語または短いフレーズ）を表します。
[使用できるタイプ(type属性の値)は、text, search, url, tel, email, password, number です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" dirname="nipDir">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

dirname属性は、フォーム送信で要素の方向性を送信するために使用するフォームコントロールの名前を指定します。
[使用できるタイプ(type属性の値)は、text, search です。]

1. <form action="./fmreceive.htm">
2. <input type="number" name="nipNumber" max="20">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

max属性は、要素に許可される値の範囲(最大値)を指定します。
[使用できるタイプ(type属性の値)は、number, date, month, week, time, datetime-local, range です。]

1. <form action="./fmreceive.htm">
2. <input type="number" name="nipNumber" min="20">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

min属性は、要素に許可される値の範囲(最小値)を指定します。
[使用できるタイプ(type属性の値)は、number, date, month, week, time, datetime-local, range です。]

1. <form action="./fmreceive.htm">
2. <input type="number" name="nipNumber" step="any">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

step属性は、許可される値を制限することにより、1つまたは複数の値に期待される（および必要な）細分性を示します。any は任意である事を示します。既定値は 1 です。基準値は min属性で指定される最小値から step属性の値で順次増加させて 0 以上になる最初の値です。
[使用できるタイプ(type属性の値)は、number, date, month, week, time, datetime-local, range です。]

1. <input type="number" min="3.5" step="2">

min属性で最小値が 3.5 で、step属性で細分性を 2 で指定した例です。3.5, 5.5, 7.5, 9.5 … となると思います。

1. <input type="number" step="0.01">

step属性で細分性を 0.01 と指定した例です。小数第二位まで入力可能になります。

1. <form action="./fmreceive.htm">
2. <input type="checkbox" name="nipChecked1" id="iipChecked1" checked>
3. <label for="iipChecked1">Check1</label><br>
4. <input type="checkbox" name="nipChecked2" id="iipChecked2">
5. <label for="iipCheckbox2">Check2</label><br>
6. <input type="checkbox" name="nipChecked3" id="iipChecked3" checked>
7. <label for="iipChecked3">Check3</label><br>
8. <button name="nbtSender" value="./fminput.htm">ボタン</button>
9. <br>受信用の<br>ページへ
10. </form>

checked属性は、入力要素のデフォルトのチェック状態を示す論理属性です。
[使用できるタイプ(type属性の値)は、checkbox, radio です。]

1. <form action="./fmreceive.htm">
2. <input type="radio" name="nipChecked" value="1" id="iipCheckedYes" checked>
3. <label for="iipCheckedYes">Yes</label><br>
4. <input type="radio" name="nipChecked" value="0" id="iipCheckedNo">
5. <label for="iipCheckedNo">No</label><br>
6. <button name="nbtSender" value="./fminput.htm">ボタン</button>
7. <br>受信用の<br>ページへ
8. </form>

type属性が "radio"は、他のinput要素と組み合わせて使用すると、1つのコントロールだけがチェック状態をtrueに設定できるラジオボタングループを形成するコントロールを表します。 なので、グループ内で1つのコントロールだけ checked属性でチェック状態をtrueに設定します。

1. <input type="file" accept="image/*">

accept属性は、ユーザーエージェントにどのファイルタイプを受け入れるかのヒントを提供することができます。
[使用できるタイプ(type属性の値)は、file です。]

1. <input type="file" multiple>

multiple属性は、ユーザーが複数の値を指定できるかどうかを示す論理属性です。
emailの時は、コンマ区切りで複数のメールアドレスを入力できます。fileの時は、複数のファイルを選択できます。
[使用できるタイプ(type属性の値)は、email, file です。]

1. <form action="./fmreceive.htm">
2. <input type="email" name="nipMultiple" value="a@com, b@com">
3. <button name="nbtSender" value="./fminput.htm">ボタン</button>
4. <br>受信用の<br>ページへ
5. </form>

type属性が "email"で multiple属性は、コンマ区切りで複数のメールアドレスを入力できる事を設定します。
list属性のリストを複数選択するという事はできない様です。

1. <form action="./fmreceive.htm">
2. <input name="nipText">
3. <input type="image" name="nipImage" src="./submit.gif" alt="Image">
4. <input type="hidden" name="nipSender" value="./fminput.htm">
5. <br>受信用の<br>ページへ
6. </form>

src属性は、画像のURLを指定します。ページングもスクリプトもされていない、非インタラクティブで、オプションでアニメーション化された画像リソースを参照するスペースで囲まれている可能性のある有効な空でないURLが含まれている必要があります。
[使用できるタイプ(type属性の値)は、image です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText">
3. <input type="image" name="nipImage" src="./submit.gif" alt="Image">
4. <input type="hidden" name="nipSender" value="./fminput.htm">
5. <br>受信用の<br>ページへ
6. </form>

alt属性は、画像を使用できないユーザーおよびユーザーエージェントにボタンのテキストラベルを提供します。 alt属性が存在する必要があり、画像が使用できない場合に同等のボタンに適切なラベルを与える空でない文字列が含まれている必要があります。
[使用できるタイプ(type属性の値)は、image です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText">
3. <input type="image" name="nipImage" src="./submit.gif" alt="Image" height="32">
4. <input type="hidden" name="nipSender" value="./fminput.htm">
5. <br>受信用の<br>ページへ
6. </form>

height属性は、要素の視覚的コンテンツの寸法（高さ）を指定します。 (それぞれ、CSSピクセルでの出力媒体の公称方向を基準にして) 属性には有効な負でない整数の値を含める必要があります。
[使用できるタイプ(type属性の値)は、image です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText">
3. <input type="image" name="nipImage" src="./submit.gif" alt="Image" width="32">
4. <input type="hidden" name="nipSender" value="./fminput.htm">
5. <br>受信用の<br>ページへ
6. </form>

width属性は、要素の視覚的コンテンツの寸法（幅）を指定します。 (それぞれ、CSSピクセルでの出力媒体の公称方向を基準にして) 属性には有効な負でない整数の値を含める必要があります。
[使用できるタイプ(type属性の値)は、image です。]

1. <form action="./fminput.htm">
2. <input name="nipText">
3. <input type="submit" formaction="./fmreceive.htm">
4. <input type="hidden" name="nipSender" value="./fminput.htm">
5. <br>受信用の<br>ページへ
6. </form>

formaction属性は、URLを指定します。form要素の action属性を上書きします。action属性は、ブラウザーがフォーム情報をサーバーに送信する宛先です。
[使用できるタイプ(type属性の値)は、image, submit です。]

1. <input type="submit" formenctype="application/x-www-form-urlencoded">

formenctype属性は、エンコード方法を指定します。form要素の enctype属性を上書きします。enctype属性は、ブラウザーがフォーム情報をサーバーに送信するために使用するフォームデータのエンコード方法です。
[使用できるタイプ(type属性の値)は、image, submit です。]

1. <form action="./fmreceive.htm" method="post">
2. <input name="nipText">
3. <input type="submit" formmethod="get">
4. <input type="hidden" name="nipSender" value="./fminput.htm">
5. <br>受信用の<br>ページへ
6. </form>

formmethod属性は、HTTP メソッドを指定します。form要素の method属性を上書きします。method属性は、ブラウザーがフォーム情報を送信するために使用する HTTP メソッドです。
[使用できるタイプ(type属性の値)は、image, submit です。]

1. <form action="./fmreceive.htm">
2. <input name="nipText" required>
3. <input type="submit" formnovalidate>
4. <input type="hidden" name="nipSender" value="./fminput.htm">
5. <br>受信用の<br>ページへ
6. </form>

formnovalidate属性は、フォームデータ送信時に内容を検証しないように指定する論理属性です。form要素の novalidate属性を上書きします。
[使用できるタイプ(type属性の値)は、image, submit です。]

1. <form action="./fmreceive.htm" target="_self">
2. <input name="nipText">
3. <input type="submit" formtarget="_blank">
4. <input type="hidden" name="nipSender" value="./fminput.htm">
5. <br>新しい枠で<br>受信用の<br>ページへ
6. </form>

formtarget属性は、表示する場所を指定します。form要素の target属性を上書きします。 target属性は、フォームの送信後に受信したレスポンスを表示する場所を示すユーザー定義の名前、もしくはアンダースコアから始まる標準化されたキーワードで、表示する場所を示します。
[使用できるタイプ(type属性の値)は、image, submit です。]