Contact Form 7 3.4 以上では数値入力に対応した2種類のフォームタグ、number
と range
を使用できます。この二つはユーザーインタフェイスの違い以外はほとんど同じ働きをします。
number
と range
はそれぞれ HTML5 で導入された新しい入力タイプ number
と range
に対応しています。現時点では一部の最新ブラウザのみこれらの入力タイプをサポートしています。
これらの入力タイプのフィールドが画面上にどのように表示されるかについては最新のブラウザの間でも差異があり得ます。ですが多くの場合は number はスピナー方式の入力として、range はスライダー方式の入力として表示されるはずです。
古いブラウザや、最新のブラウザでもこれらの入力タイプをサポートしないものは、これらの入力フィールドを従来型のテキスト入力フィールドとして表示します。
数値入力項目 (number
)
number
と number*
は数値入力項目です。number*
は必須入力の項目です。
オプション | 使用例 | 説明 |
---|---|---|
min:(num) | min:10 | input 要素の min 属性値。入力可能な最小値を示す。 |
max:(num) | max:99 | input 要素の max 属性値。入力可能な最大値を示す。 |
step:(num) | step:3 | input 要素の step 属性値。最小数値が 10 でステップが 3 のとき、受け入れられる入力値は 10、13、16、19、… となる。 |
id:(id) | id:foo | input 要素の id 属性値。 |
class:(class) | class:bar | input 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [number your-text class:y2008 class:m01 class:d01] のようにして並べる。 |
placeholder watermark | 値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。 | |
autocomplete:(value) | autocomplete:bday-year | フォーム自動補完のためのオプション |
これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。
例:
[number* your-number min:10 max:99 step:3 class:required "40"]
数値入力項目 (range
)
range
と range*
は数値入力項目です。range*
は必須入力の項目です。
オプション | 使用例 | 説明 |
---|---|---|
min:(num) | min:10 | input 要素の min 属性値。入力可能な最小値を示す。 |
max:(num) | max:99 | input 要素の max 属性値。入力可能な最大値を示す。 |
step:(num) | step:3 | input 要素の step 属性値。最小数値が 10 でステップが 3 のとき、受け入れられる入力値は 10、13、16、19、… となる。 |
id:(id) | id:foo | input 要素の id 属性値。 |
class:(class) | class:bar | input 要素の class 属性値。2個以上のクラスを設定する場合は複数の class: オプションを [range your-text class:y2008 class:m01 class:d01] のようにして並べる。 |
placeholder watermark | 値をデフォルト値として使わず、プレースホルダーとして使う。watermark は placeholder のエイリアス。 | |
autocomplete:(value) | autocomplete:bday-year | フォーム自動補完のためのオプション |
これらの項目では1個までの値を持つことができ、この値は入力項目のデフォルト値として使われます。
例:
[range* your-range min:10 max:99 step:3 class:required "40"]