숫자 필드
정확하고 세련된 방식으로 숫자를 입력하세요. 간단한 숫자 입력부터 통화 서식을 지원하는 인터랙티브 슬라이더까지, 숫자 필드는 유효성 검사, 서식 지정 및 아름다운 사용자 경험을 제공합니다.
내장된 유효성 검사 기능을 갖춘 스마트 번호 수집
완벽하게 :
모든 사용 사례에 적합한 강력한 기능
🎯 정밀 검증 제어
최소/최대 경계
허용되는 최저값과 최고값을 설정하세요. 브라우저에 내장된 유효성 검사 기능을 사용하여 제출 전에 잘못된 입력을 방지하세요.
단계 크기 제어
통화의 경우 정수(1), 0.5(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-10)
- 별점
- 우선순위 순위
- 가능성 척도
피트니스 및 건강
- 무게 추적
- 키 측정
- 운동 반복 횟수
- BMI 계산기
예약 및 예매
- 손님/참석자 수
- 객실 수량
- 소요 기간(시간/일)
- 파티 사이즈
신청 양식
- 연령 확인
- 다년간의 경험
- 급여 기대
- 예산 범위
재정부
- 수익 입력
- 투자 금액
- ROI 백분율
- 수수료율
필드 옵션 완료
기본 구성
- 필드 레이블 숫자 입력란 위에 표시되는 제목
- 설명/도움말 텍스트 - 사용자를 위한 추가 안내
- 필수 입력란 – 번호 입력을 필수 항목으로 지정
- 자리 표시자 텍스트 – 사용자가 숫자를 입력하기 전에 표시되는 힌트 텍스트
유효성 검사 설정
- 최소 허용값 – 허용 가능한 최소 숫자
- 최대 허용값 – 허용 가능한 최대 숫자
- 단계 크기 – 증분 값 (1, 0.5, 0.01 등)
- 시작 값 – 미리 채워진 기본값
번호 서식
- 표시 형식
- 일반 숫자
- 통화(기호 포함)
- 백분율 (%)
- 소수점 (고정 자릿수)
통화 기호 – $, €, £, ¥, ₹ (형식이 통화인 경우)
소수 자릿수 - 0, 1, 2, 3 또는 4자리 숫자 (형식이 십진수일 경우)
슬라이더 옵션
- 슬라이더로 표시 – 대화형 슬라이더 모드 활성화
- 슬라이더 색상 - 브랜딩을 위한 맞춤 색상 선택기
- 슬라이더 옆에 숫자 표시 – 현재 값을 표시합니다
조건부 논리
- 조건부 논리를 사용 조건에 따라 표시/숨기기
논리 유형- 모든 조건이 충족되어야 합니다(AND)
- 어떤 조건이든 충족될 수 있습니다(또는)
- 조건 규칙
- 표시 / 숨기기 – 취해야 할 조치
- 분야 - 어떤 항목을 선택해야 할까요?
- 운영자 같음, 같지 않음, 포함함, 보다 큼, 보다 작음, 비어 있음, 비어 있지 않음
- 가치관 – 비교 값
- 여러 조건 – 규칙을 무제한으로 추가하세요
고급 옵션
- 숨겨진 필드 모드 – 미리 설정된 값을 가진 숨겨진 필드로 사용합니다.
- 사용자 지정 CSS 클래스 - 사용자 지정 스타일 적용
- 접근성 속성 – ARIA 레이블 및 설명
저희 번호 입력란을 선택해야 하는 이유는 무엇일까요?
✅ 정확한 - 정확한 최소/최대값 유효성 검사를 통해 잘못된 입력을 방지합니다.
✅ 유연성 – 모든 사용 사례에 맞는 다양한 형식 제공
✅ 시각 슬라이더 모드는 매력적인 상호작용을 만들어냅니다.
✅ 스마트 한 조건 논리는 동적 형태를 생성합니다.
✅ 사용하기 쉬운 – 명확한 유효성 검사 메시지가 사용자를 안내합니다.
✅ 전문 서비스 통화 및 백분율 서식이 내장되어 있습니다.
✅ 모바일 최적화 모바일 기기에서 완벽한 숫자 키보드 사용
✅ 완전 통합 – 모든 폼 기능과 완벽하게 호환됩니다
자주 묻는 질문
질문: 최소/최대값과 유효성 검사의 차이점은 무엇인가요?
A: 최소/최대값 설정은 브라우저 수준에서 즉각적인 유효성 검사를 제공합니다. 사용자는 유효하지 않은 숫자를 제출할 수 없으므로 양식이 오류 없이 사용하기 편리합니다.
질문: 소수점을 사용할 수 있나요?
A: 네! 단계 값을 설정하여 소수점 자릿수를 제어하세요. 통화(가격)의 경우 0.01을 사용하고, 소수점 한 자리까지 표시하려면 0.1을 사용하거나 원하는 단계로 설정할 수 있습니다.
질문: 모바일에서 슬라이더는 어떻게 작동하나요?
A: 슬라이더는 터치에 최적화되어 있어 모바일 기기에서 원활하게 작동합니다.
질문: 음수를 수집할 수 있나요?
A: 물론입니다! 음수를 허용하려면 최소값을 음수로 설정하세요(예: 최소값: -100, 최대값: 100).
질문: 지원되는 통화 기호는 무엇입니까?
A: 어떤 기호든 입력하세요! $, €, £, ¥, ₹ 또는 최대 3자까지의 사용자 지정 기호를 입력할 수 있습니다.
질문: 숫자 비교를 기반으로 조건 논리를 사용할 수 있나요?
A: 네! "보다 큼", "보다 작음", "같음"과 같은 연산자를 사용하여 숫자 값을 기반으로 논리를 만들 수 있습니다.
질문: 백분율 필드를 어떻게 만드나요?
A: 표시 형식으로 "백분율(%)"을 선택하십시오. % 기호가 자동으로 나타나고 사용자는 0~100 사이의 값을 입력할 수 있습니다.
질문: 슬라이더 색상을 변경할 수 있나요?
A: 네! 슬라이더 모드가 활성화되면 색상 선택기를 사용하여 원하는 색상을 선택할 수 있습니다.
질문: 사용자가 범위를 벗어난 숫자를 입력하면 어떻게 되나요?
A: 브라우저 유효성 검사에서 제출이 중단되고 "값은 1에서 100 사이여야 합니다."와 같은 오류 메시지가 표시됩니다.
질문: 숫자 입력란을 계산에 사용할 수 있나요?
A: 네! 숫자 필드 값은 조건부 비교 및 양식 처리 계산에 사용할 수 있습니다.
질문: 소수는 얼마나 정확할 수 있나요?
A: 소수점 자릿수는 0에서 4자리까지 설정할 수 있으며, 단계 값은 필요한 만큼 정밀하게 지정할 수 있습니다(예: 0.001).
