webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき
読者です 読者をやめる 読者になる 読者になる

webかたつむり

ウェブデザインを勉強中

html input element

概要
HTML <input> 要素は、ユーザからデータを受け取るための、Web ベースのフォーム用のインタラクティブなコントロールを作成するために使用します。<input> の動作は、type 属性の値に応じて大きく異なります。
コンテンツカテゴリ フローコンテンツ、リスト化、サブミット可能、リセット可能、フォーム関連要素、フレージングコンテンツ
type の値が hidden でない場合はラベル付け可能要素、パルパブルコンテンツ。
許可された内容 なし。これは空要素です。
タグの省略 開始タグは必須。終了タグを記述してはならない。
許可された親要素 フレージングコンテンツを受け入れるすべての要素
DOM インターフェイス HTMLInputElement
  • 属性
この要素はグローバル属性および以下の属性をサポートしています。type
表示するコントロールの種類です。この属性を指定しない場合のデフォルトタイプは text です。以下の値が指定可能です。

    • button: デフォルトの動作がないプッシュボタン。
    • checkbox: チェックボックス。このアイテムで送信する値を定義するため、value 属性を使用しなければなりません。このアイテムが選択されているかを示すには、checked 属性を使用します。また、チェックボックスが不確定の状態 (ほとんどのプラットフォームで、チェックボックスを横切る水平線が引かれます) を表すために、indeterminate 属性を使用できます。
    • color: HTML5 色を指定するためのコントロール。色選択の UI は、シンプルカラーをテキストで受け付ける以外に要求されている機能はありません (詳細)。
    • date: HTML5 日付 (時刻を除く年、月、日) を入力するためのコントロール
    • datetime: HTML5 UTC タイムゾーンに基づく日付と時刻 (時、分、秒、秒の端数) を入力するためのコントロールこの機能は WHATWG HTML から削除されました。
    • datetime-local: HTML5 タイムゾーン情報がない日付と時刻を入力するためのコントロール
    • email: HTML5 電子メールアドレスを入力するためのフィールド。入力された値は送信前に、空文字列またはひとつの妥当な電子メールアドレスが含まれているかの検証を受けます。適宜 :valid および :invalid CSS 疑似クラスが適用されます。
    • file: ユーザにファイルを選択させるコントロール。コントロールで選択できるファイルの種類を定義するには、accept 属性を使用します。
    • hidden: 表示しないコントロールですが、その値はサーバに送信します。
    • image: 画像による送信ボタン。画像のソースを定義するために src 属性を、また代替テキストを定義するために alt 属性を使用しなければなりません。height および width 属性を使用して、画像のサイズをピクセル値で定義できます。
    • month: HTML5 タイムゾーン情報がない年と月を入力するためのコントロール
    • number: HTML5 浮動小数点数値を入力するためのコントロール
    • password: 入力値を隠す 1 行テキストフィールド。入力可能な最大文字数を指定するには、maxlength 属性を使用します。
    • radio: ラジオボタン。このアイテムで送信する値を定義するため、value 属性を使用しなければなりません。このアイテムがデフォルトで選択されるかを示すには、checked 属性を使用します。name 属性に同じ値を持つラジオボタンは同一の "ラジオボタングループ" に入ります。グループ内で同時にひとつだけのラジオボタンを選択できます。
    • range: HTML5 正確な値が重要な数値を入力するためのコントロール。このコントロールは、対応する属性が指定されていない場合に以下のデフォルト値を使用します:
    • min: 0
    • max: 100
    • value: min + (max-min)/2、または maxmin より小さい場合は min
    • step: 1
    • reset: フォームのコントロールをデフォルト値にリセットするボタン。
    • search: HTML5 検索文字列を入力するための 1 行入力フィールド。改行は自動的に入力値から取り除かれます。
    • submit: フォームを送信するボタン。
    • tel: HTML5 電話番号を入力するためのコントロール。改行は自動的に入力値から取り除かれますが、他に強要される文法はありません。patternmaxlength といった属性を使用して、コントロールに入力する値を制限できます。適宜 :valid およ:invalidCSS 疑似クラスが適用されます。
    • text: 1 行入力フィールド。改行は自動的に入力値から取り除かれます。
    • time: HTML5 タイムゾーン情報がない時刻を入力するためのコントロール
    • url: HTML5 URL を入力するためのフィールド。入力された値は送信前に、空文字列またはひとつの妥当な絶対 URL が含まれているかの検証を受けます。改行は自動的に入力値から取り除かれます。patternmaxlength といった属性を使用して、コントロールに入力する値を制限できます。適宜 :valid および :invalid CSS 疑似クラスが適用されます。
    • week: HTML5 年と週の値から成る日付およびタイムゾーン情報がない週番号を入力するためのコントロール。 

f:id:ohta-felica:20160717212142p:plain