9月更新・前月(8月)の人気記事トップ10 09/02/2024
- ( 01 – ) 【Labs】position:absoluteとwidth:100%を指定すると横幅の設定がうまくいかない場合の対処方法について
- ( 07 ↑) 【Mac】macOSをHigh SierraからMontereyにアップグレード
- ( 03 – ) 【Mac】横画面で撮影した動画をYouTubeショート用にMacのiMovieで縦画面に編集する方法
- ( 10 ↑) 【iPhone / iPad】iPhoneのツイッターアプリでユーザー名をコピーする方法
- (圏外↑) 【Labs】CSSだけでドロップダウンメニュー
- ( 02 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
- ( 09 ↑) 【Mac】Safariでソースコードを見る方法
- ( 04 ↓) 【jQuery】入門7. jQueryで新しいWindowを開く
- ( 06 ↓) 【2024年5月】iPad画面解像度まとめ
- (圏外↑) 【GIMP】レイヤーをロック
【HTMLリファレンス】input要素
概要
input要素はフォームの部品(チェックボックスや入力欄等)を表示する要素です。
汎用属性
id、class、lang、title、style、dir、tabindex、accesskey、contenteditable、spellcheck、draggable、contextmenu、hiddenの各属性を指定することができます。(汎用属性について)
カテゴリー
フレージング・コンテンツ、フロー・コンテンツ、インタラクティブ・コンテンツ (カテゴリーについて)
要素の配置
フレージング・コンテンツが配置できる場所
要素の内容
空要素
| 属性名 | 解説 |
|---|---|
| type | 部品の種類を指定 |
|
type="search"検索用の入力エリアを作成 type="tel"電話番号用の入力エリアを作成 type="url"URL用の入力エリアを作成 type="email"E-Mail用の入力エリアを作成 type="datetime"日付と時刻用の入力エリアを作成 *タイムゾーンあり type="datetime-local"日付と時刻用の入力エリアを作成 *タイムゾーンなし type="date"日付用の入力エリアを作成 type="month"月用の入力エリアを作成 type="week"週用の入力エリアを作成 type="time"時刻用の入力エリアを作成 *タイムゾーンなし type="number"数値用の入力エリアを作成 type="range"レンジ用の入力エリアを作成 type="color"色用の入力エリアを作成 type="text"テキスト入力エリアを作成 type="password"パスワード入力エリアを作成 *入力された文字列は「●」や「*」等で表示されます。 type="checkbox"チェックボックスを作成 type="radio"ラジオボタンを作成 type="file"ファイルを送信 type="submit"送信ボタンを作成 type="reset"リセットボタンを作成 type="button"汎用ボタンを作成 type="image"画像ボタンをクリックすると座標を送信 type="hidden"ブラウザ上には表示せずにサーバーへデーターを送信 |
|
| required | いずれかの書式を指定すると入力が必須となり、未入力では送信できなくなります。 type属性の値が「text」「search」「tel」「url」「email」「password」「datetime」「datetime-local」「date」「month」「week」「time」「number」「checkbox」「radio」「file」の場合に指定。 |
| required required="required" required="" |
|
| placeholder | 入力エリアに入力例や説明等を表示 type属性の値が「text」「search」「tel」「url」「email」「password」の場合に指定。 |
| placeholder="テキスト" | |
| autocomplete | オートコンプリート機能(入力内容を予想して表示する機能)の有効・無効を指定します。指定できるのは「on」(初期値)「off」のいずれかになります。form要素のautocomplete属性の値が「off」の場合はinput要素の初期値も「off」になります。 |
| autocomplete="on" autocomplete="off" |
|
| pattern | 入力内容をチェックするための正規表現を指定します。特定の文字列が含まれていないか、半角、全角などの入力制限の指定ができます。 |
| pattern="^[0-9A-Za-z]+$" | |
| autofocus | いずれかの書式を指定すると自動でフォーカス |
| autofocus autofocus="autofocus" autofocus="" |
|
| form | form要素のid属性を指定してform要素とinput要素を関連づけます。input要素がform要素の内容に含まれているかどうかに関係なくinput要素を機能させることができます。 |
| form="form要素のID" | |
| list | datalist要素のid属性を指定してinput要素と関連づけます。それによりdatalist要素内に用意されている項目を呼び出して入力できるようになります。 type属性の値が「password」「checkbox」「radio」「hidden」及びボタン類以外の場合に指定 |
| list="datalist要素のID" | |
| multiple | いずれかの書式を指定すると複数の値を入力できるようになります。 type属性の値が「file」「email」の場合に指定 |
| multiple multiple="multiple" multiple="" |
|
| min | 入力可能な範囲の最小値を指定 type属性の値が「datetime」「datetime-local」「date」「month」「week」「time」「number」「range」の場合に指定 |
| min="最小値" | |
| max | 入力可能な範囲の最大値を指定 type属性の値が「datetime」「datetime-local」「date」「month」「week」「time」「number」「range」の場合に指定 |
| max="最大値" | |
| step | 入力できる値がいくつづつ変化するのかを指定します。値としてキーワード「any」を指定すると制限はなくなります。 type属性の値が「datetime」「datetime-local」「date」「month」「week」「time」「number」「range」の場合に指定 |
| step="値のステップ" | |
| formaction | フォームの送信先を指定します。form要素のaction属性の値よりも優先されます。 type属性の値が「submit」「image」の場合に指定 |
| formaction="URL" | |
| formmethod | データが送信される際のHTTPメソッドを指定。form要素のmethod属性の値よりも優先されます。「get」「post」「put」「delete」が指定。 type属性の値が「submit」「image」の場合に指定。 |
| formmethod="HTTPメソッド" | |
| formnovalidate | いずれかの書式を指定すると内容の確認を行わないでデータを送信。form要素のnovalidate属性の値よりも優先されます。 type属性の値が「submit」「image」の場合に指定。 |
| novalidate novalidate="novalidate" novalidate="" |
|
| formtarget | 送信結果を表示させるウィンドウを指定。「_blank」「_top」「_self」「_parent」のいずれかのターゲット先を指定。form要素のtarget属性の値よりも優先されます。 type属性の値が「submit」「image」の場合に指定。 |
| formtarget="_blank" formtarget="_top" formtarget="_self" formtarget="_parent" |
|
| formenctype | データが送信される際のMIMEタイプを指定。 「application/x-www-form-urlencoded」(初期値) 「multipart/form-data」 「text/plain」 のいずれかを指定できます。form要素のenctype属性の値よりも優先されます。 type属性の値が「submit」「image」の場合に指定。 |
| formenctype="MIMEタイプ" | |
| name | フォームの名前を指定。 |
| name="名前" | |
| value | 値を指定します。ボタン以外の場合は初期値、ボタンの場合はラベルとして表示されるテキストを指定。データが送信される際はこの値とname属性で指定した名前が一緒に送信されます。type属性の値がemailの場合はカンマで区切って複数のアドレスを指定。 |
| value="値" | |
| accept | サーバ側で受付可能なMIMEタイプを指定。カンマで区切って複数のMIMEタイプを指定。 type属性の値が「file」の場合に指定。 |
| accept-charset="文字コード" | |
| src | type属性の値が「image」の場合に画像のURLを指定 |
| src="画像のURL" | |
| alt | src属性で指定した画像が表示できない場合の代替テキストを指定。type属性の値が「image」の場合に指定できます。 |
| alt="代替テキスト" | |
| width | type属性の値が「image」の場合に画像の幅をピクセル数で指定 |
| width="幅" | |
| height | type属性の値が「image」の場合に画像の高さをピクセル数で指定 |
| height="高さ" | |
| checked | type属性の値が「checkbox」「radio」の場合は選択されている状態になります。 |
| checked checked="checked" checked="" |
|
| disabled | いずれかの書式を指定すると使用できなくなります。 |
| disabled disabled="disabled" disabled="" |
|
| readonly | いずれかの書式を指定すると読み取り専用になり値を変更することができなくなります。 |
| readonly readonly="readonly" readonly="" |
|
| size | 入力エリアの幅を文字数で指定。type属性の値が「text」「search」「tel」「url」「email」「password」の場合に指定。 |
| size="幅" | |
| maxlength | 入力エリアで入力できる最大文字数を指定。type属性の値が「text」「search」「tel」「url」「email」「password」の場合に指定。 |
| size="最大文字数" | |
| inputmode | *HTML5.2で廃止 ソフトウェアキーボードの入力モードの指定 |
| inputmode="" |
サンプル
HTML
<form>
<p>入力エリア <input type="text"></p>
<p>選択・変更不可 <input type="text" value="文字" disabled></p>
<p>変更不可 <input type="text" value="文字" readonly></p>
<p>パスワード <input type="password"></p>
<p>ラジオボタン <input type="radio" name="radio" value="A"> A <input type="radio" name="radio" value="B"> B</p>
<p>チェックボックス <input type="checkbox" nvalue="C" checked> C <input type="checkbox" value="D"> D <input type="checkbox" value="E"> E</p>
<p><input type="button" value="送信"> <input type="reset" value="リセット"></p>
</form>