menu
menu

キーワード検索

 

9月更新・前月(8月)の人気記事トップ10 - 09/01/2020

  1. ( 1 - ) 【Mac】Macのユーザー名とアカウント名を変更する
  2. ( 3 ↑) 【Mac】Safariでソースコードを見る方法
  3. ( 2 ↓) 【iPhone・iPad】投稿の準備中にエラーが起きました。後でやり直してください。
  4. ( 5 ↑) 【iPhone・iPad】iPhoneのメモリを簡単に解放する方法
  5. ( 7 ↑) 【Mac】Finderにフォルダのフルパスを表示させる方法
  6. ( 4 ↓) 【CSS】CSSだけでドロップダウンメニュー
  7. ( 圏外↑) iPhoneのツイッターアプリでユーザー名をコピーする方法【iPhone iPad】
  8. ( 6 ↓) 【jQuery】入門2. jQueryをHTMLに組み込む
  9. ( 10 ↑) 【Mac】MacにGoogle Driveをインストール
  10. ( 圏外↑) 【2020年度決定版】レスポンシブデザインのブレークポイントはこれで決まり❗️
このエントリーをはてなブックマークに追加

input要素【HTMLリファレンス】

input要素【HTMLリファレンス】

概要

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>
Result

入力エリア

選択・変更不可

変更不可

パスワード

ラジオボタン A B

チェックボックス C D E


*サンプルのためボタンをクリックしてもデータは送信されません。

 

にほんブログ村 デザインブログ Webデザインへ
  • HTML
このエントリーをはてなブックマークに追加