数値フィールド
正確かつスタイリッシュに数値を収集できます。シンプルな数値入力から通貨フォーマットに対応したインタラクティブなスライダーまで、数値フィールドは検証、フォーマット、そして美しいユーザーエクスペリエンスを提供します。
検証機能を内蔵したスマートな番号収集
完璧なもの:
あらゆるユースケースに対応する強力な機能
🎯 正確な検証制御
最小/最大境界
許容される最小値と最大値を設定します。ブラウザに組み込まれた検証機能により、送信前に無効な入力を防止します。
ステップサイズ制御
通貨の増分値(整数(1)、半角(0.5)、または正確な小数(0.01))を定義します。
例:
- 年齢フィールド: 最小 18、最大 100、ステップ 1
- 価格フィールド: 最小 0、最大 10000、ステップ 0.01
- 評価: 最小 1、最大 5、ステップ 0.5
💰 スマートな数値書式設定
複数のフォーマットオプション:
- プレーンナンバー – シンプルな数値入力 (123)
- 通貨 – 記号付き通貨 ($123.00、€123.00、£123.00)
- パーセンテージ – % 記号を自動追加 (85%)
- 小数点 - 小数点以下の桁数を固定 (123.45)
カスタム通貨記号
あらゆる通貨をサポート:$、€、£、¥、₹ など - 国際フォームに最適です。
小数精度
正確な計算を行うために、小数点以下の桁数を 0 から 4 桁まで制御します。
インタラクティブスライダーモード
視覚的な数字の選択
数値入力を美しいスライダーに変えましょう。ユーザーはスライド操作で値を選択できます。評価、範囲、好みなど、様々な用途に最適です。
カスタマイズ可能な外観
- ブランドに合わせてスライダーの色を選択してください
- 現在の値の表示/非表示
- スムーズなアニメーションとトランジション
理想的なもの:
- 満足度評価(1~10)
- 予算範囲($0~$5000)
- 年齢選択
- 優先度レベル
- 任意の範囲選択

🔀 条件付きロジック
スマートフィールド可視性
他のフィールドの値に基づいて、この数値フィールドを表示または非表示にします。ユーザーの入力に合わせて変化する動的なフォームを作成します。
高度なロジックルール:
- ANDロジック – すべての条件を満たす必要がある
- ORロジック – 任意の条件でアクションをトリガーできます
- 8 つの演算子 – 等しい、等しくない、より大きい、より小さい、含む、空、など
使用事例:
- 「ゲストを連れて行きますか?」のチェックボックスがオンになっている場合にのみ「ゲストの人数」を表示します
- サービスタイプが「プレミアム」の場合、「予算範囲」を表示します
- 注文合計が50ドル未満の場合は「割引コード」を非表示にする
- 年齢が 1 歳以上の場合、年齢制限のあるオプションを表示します
🎨 完全なカスタマイズ
- カスタムCSSクラス
- 隠しフィールドモード
- モバイルに最適化された入力
- アクセシビリティサポート
- すべてのフォーム機能との統合
- ステップサイズ、開始値
- 許容される最小/最大値
- 隠しフィールド、隠し値

⚙️ スマート構成
デフォルト値
フィールドに開始番号を事前に入力しておくと、ユーザーをガイドしたり、完了までの時間を短縮したりできます。
プレースホルダーテキスト
ユーザーが入力する前に、「数量を入力してください」や「年齢を入力してください」などの役立つヒントを表示します。
ヘルプテキスト
入力する数字を明確にするために説明を追加します。

3ステップの簡単セットアップ
ドロップダウンフィールドを数分で準備
数値フィールドを追加する
基本フィールドセクションから数値フィールドをフォームにドラッグ アンド ドロップします。
検証ルールを設定する
最小値/最大値、ステップ サイズ、開始値を構成して、ユーザーが入力できる数値を制御します。
フォーマットとスタイルを選択
プレーン、通貨、パーセンテージ、または小数点の形式を選択します。必要に応じて、スライダーモードを有効にして視覚的に選択することもできます。
???? これで完了です。スマートな検証と書式設定が備わった数値フィールドが完成しました。
実際のアプリケーション
フィールドオプションを完了する
基本構成
- フィールドラベル – 数字フィールドの上に表示されるタイトル
- 説明/ヘルプテキスト – ユーザー向けの追加ガイダンス
- 必須フィールド – 番号の入力を必須にする
- プレースホルダーテキスト – ユーザーが数字を入力する前のヒントテキスト
検証設定
- 最小許容値(最小) – 許容可能な最小数
- 許容される最高値(最大値) – 許容される最大数
- 刻み幅 – 増分値(1、0.5、0.01など)
- 開始値 – あらかじめ入力されたデフォルトの番号
数の書式
- 表示形式
- プレーンナンバー
- 通貨(記号付き)
- パーセンテージ(%)
- 小数点(固定桁)
通貨文字 – $、€、£、¥、₹(形式が通貨の場合)
小数位 – 0、1、2、3、または4桁(形式が10進数の場合)
スライダーオプション
- スライダーとして表示 – インタラクティブスライダーモードを有効にする
- スライダーの色 – ブランディングのためのカスタムカラーピッカー
- スライダーの横に数字を表示 – 現在の値を表示
条件付きロジック
- 条件ロジックを有効にします – 条件に基づいて表示/非表示
ロジックタイプ- すべての条件を満たす必要があります(AND)
- いずれかの条件を満たすことができる(OR)
- 条件ルール
- 表示/非表示 – 取るべき行動
- フィールド – どのフィールドをチェックするか
- Operator – 等しい、等しくない、含む、より大きい、より小さい、空である、空ではない
- 値 – 比較値
- 複数の条件 – 無制限のルールを追加
高度なオプション
- 隠しフィールドモード – 事前に設定された値を持つ隠しフィールドとして使用します
- カスタムCSSクラス – カスタムスタイルを適用する
- アクセシビリティ属性 – ARIAラベルと説明

当社の Number Field を選ぶ理由
✅ 正確 – 正確な最小値/最大値の検証により、無効な入力を防止
✅ 様々な – あらゆるユースケースに対応する複数のフォーマット
✅ ビジュアル – スライダーモードは魅力的なインタラクションを生み出します
✅ スマート – 条件付きロジックにより動的なフォームを作成
✅ 使いやすい – 明確な検証メッセージがユーザーをガイドします
✅ 専門 – 通貨とパーセンテージの書式設定が組み込まれています
✅ モバイル向けに最適化 – モバイルデバイス上の完璧な数字キーボード
✅ プローブとオシロスコープとの統合 – すべてのフォーム機能とシームレスに連携
よくある質問
Q: 最小/最大と検証の違いは何ですか?
A: 最小値/最大値の設定により、ブラウザレベルでの即時検証が可能になります。ユーザーは無効な数値を入力できないため、フォームはエラーフリーでユーザーフレンドリーになります。
Q: 10 進数は使用できますか?
A: はい!小数点以下の桁数を制御するには、ステップ値を設定します。通貨(価格)の場合は0.01、小数点1桁の場合は0.1、あるいは任意のカスタムステップ値を使用できます。
Q: スライダーはモバイルではどのように機能しますか?
A: スライダーはタッチ操作に最適化されており、モバイル デバイスでもスムーズに動作します。
Q: 負の数を収集できますか?
A: もちろんです! 負の数値を許可するには、負の最小値 (例: 最小: -100、最大: 100) を設定します。
Q: どのような通貨記号がサポートされていますか?
A: 任意の記号です。$、€、£、¥、₹、または最大 3 文字までのカスタム記号を入力してください。
Q: 数値比較に基づく条件付きロジックを使用できますか?
A: はい!「より大きい」、「より小さい」、「等しい」などの演算子を使用して、数値に基づくロジックを作成できます。
Q: パーセンテージ フィールドを作成するにはどうすればよいですか?
A: 表示形式として「パーセンテージ (%)」を選択します。%記号が自動的に表示され、ユーザーは0~100の数値を入力します。
Q: スライダーの色を変更できますか?
A: はい!スライダーモードを有効にすると、カラーピッカーを使用して任意の色を選択できます。
Q: ユーザーが範囲外の数字を入力するとどうなりますか?
A: ブラウザ検証により送信が停止され、「値は 1 ~ 100 の範囲でなければなりません」などのエラー メッセージが表示されます。
Q: 数値フィールドを計算に使用できますか?
A: はい。数値フィールドの値は、フォーム処理における条件付き比較や計算に使用できます。
Q: 小数はどのくらい正確でしょうか?
A: 小数点以下の桁数は 0 から 4 桁まで設定でき、ステップ値は必要に応じて正確に設定できます (例: 0.001)。