menu
menu

input要素【HTMLリファレンス】 | Webデザインラボ

キーワード検索

11月のアクセストップ10

  1. ( 1-) スマホサイトの作成・基本編
  2. ( 3↑) CSSだけでドロップダウンメニュー
  3. ( 2↓) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 5-) jQueryでドロップダウンメニュー
  6. ( 6-) スマホ・タブレット・PCの振り分けいろいろ
  7. ( 9↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  8. ( 8-) Windows 10にApache2.4 VC11をインストール
  9. ( 7↓) JavaScriptで新しいウィンドウを開く
  10. (-↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  • facebook2
  • はてなブックマーク3
  • Google+3
  • Pocket0
  • Twitter0

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

  • HTML

input要素

こんにちは(・∀・)

 HTMLの要素をご紹介します。今回ご紹介する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="最大文字数"
サンプルデモ

入力エリア

選択・変更不可

変更不可

パスワード

ラジオボタン A B

チェックボックス C D E

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

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>
  • カテゴリー:HTML
  • facebook2
  • はてなブックマーク3
  • Google+3
  • Pocket0
  • Twitter0