텍스트 입력 필드
정확하고 유연하게 텍스트를 입력하세요. 간단한 이름부터 복잡한 패턴까지, 내장된 유효성 검사, 스마트 서식 지정 및 강력한 사용자 지정 기능을 통해 모든 사용 사례에 맞게 텍스트 입력 필드를 활용할 수 있습니다. 문자 수 제한, 자동 서식 지정 및 안전한 암호 모드도 제공됩니다.
모든 워드프레스 폼의 기본 요소
완벽하게 :
모든 사용 사례에 적합한 강력한 기능
📏 스마트 길이 조절
최소 및 최대 문자 제한
입력 가능한 최소 및 최대 텍스트 길이를 설정하세요. 브라우저에 내장된 유효성 검사 기능을 사용하여 너무 짧거나 너무 긴 텍스트 제출을 방지할 수 있습니다.
실시간 검증
사용자는 제출물이 길이 요건을 충족하지 못할 경우 즉시 피드백을 받을 수 있으므로 제출 후 예상치 못한 상황이 발생하지 않습니다.
예 :
- 사용자 이름: 최소 3자, 최대 20자
- 우편번호: 최소 5자, 최대 10자
- 이름: 최소 2자, 최대 50자
- 댓글: 최대 500자
어떤 의미에서 중요한가:
데이터 품질을 관리하고, 스팸을 방지하고, 데이터베이스 호환성을 보장하고, 사용자가 적절한 양의 정보를 제공하도록 안내합니다.
✅ 내장된 유효성 검사 패턴
6가지 사전 구성된 유효성 검사 유형:
- 1. 없음 – 모든 텍스트 허용(기본값)
2. 이메일 – 올바른 이메일 형식을 검증합니다.[이메일 보호])
3. URL – 유효한 웹 주소가 필요합니다 (예: https://example.com)
4. 문자만 입력 – 알파벳 문자와 공백만 입력 (예: John Doe)
5. 숫자만 입력 – 숫자만 입력 (123456)
6. 영숫자 – 문자 및 숫자, 특수 문자 없음 (User123)
맞춤 패턴 추가:
- 특수 형식에 대한 자체 정규 표현식 유효성 검사를 정의하세요.
- 번호판: `^[AZ]{3}[0-9]{4}$`
- 제품 코드: `^[AZ]{2}[0-9]{6}$`
- 귀사에 특화된 맞춤형 형식
즉각적인 피드백:
사용자가 입력한 내용이 요구되는 형식과 일치하지 않으면 명확한 오류 메시지가 표시됩니다.
✂️ 자동 공백 다듬기
데이터를 자동으로 정리합니다
텍스트 입력의 시작과 끝에 있는 불필요한 공백을 제거하세요. 이제 "John" 대신 "John"이 입력되지 않도록 하세요.
사용 사례:
- 이메일 주소 (끝에 공백 없이)
- 사용자 이름 (앞에 공백 없이)
- 참조 코드(정확히 일치하는 항목)
- 정확성이 중요한 모든 분야
이점:
사용자 오류를 줄이고, 데이터 일관성을 향상시키며, 유효성 검사 문제를 방지하고, 매칭 및 검색을 간소화합니다.
🔒 비밀번호 모드
보안 입력 마스킹
모든 텍스트 필드를 비밀번호 필드로 변환합니다. 중요한 정보는 어깨 너머로 엿보는 사람으로부터 보호하기 위해 문자가 점(•••)으로 표시됩니다.
완벽한 용도 :
- 비밀번호 및 PIN 입력
- 보안 코드 및 토큰
- 기밀 ID 번호
- 이중 인증 코드
스마트한 행동:
비밀번호 모드는 보안을 강화하기 위해 텍스트 변환 및 특수 입력 유형과 같은 충돌하는 기능을 자동으로 비활성화합니다.
📱 스마트 입력 유형
모바일 및 데스크톱에 최적화됨:
- 일반 텍스트 – 일반적인 용도의 표준 텍스트 입력란
- 검색 - 빠른 초기화를 위한 내장형 지우기 버튼(X) 포함
- 전화 – 모바일 기기에서 숫자 키패드를 활성화하여 전화번호 입력을 더 쉽게 할 수 있습니다.
- URL – .com, .org 바로가기 키가 포함된 특수 모바일 키보드를 보여줍니다.
어떤 의미에서 중요한가:
올바른 입력 방식을 사용하면 모바일 기기에서의 데이터 입력 속도가 빨라지고, 오류가 줄어들며, 모든 기기에서 사용자 경험이 향상됩니다.
🎨 자동 텍스트 변환
사용자가 입력하는 형식으로 텍스트를 지정합니다.
- 변환 없음 – 텍스트는 입력된 그대로 유지됩니다.
- 대문자 – 모든 텍스트를 대문자로 변환합니다(JOHN DOE).
- 소문자 변환 – 모든 텍스트를 소문자로 변환합니다(john doe).
- 첫 글자만 대문자로 표기 – 첫 글자만 대문자로 (John doe)
- 제목 표기 - 각 단어의 첫 글자 (John Doe)
완벽한 용도 :
- 대문자: 차량 번호판, 주 코드, 제품 ID
- 소문자: 이메일 주소, 사용자 이름
- 대문자로 표기: 문장의 시작 부분, 단일 이름
- 제목 표기: 성명, 주소, 직함
스마트한 행동:
변환은 제출 과정에서 자동으로 이루어지며, 사용자는 원래 입력 내용을 볼 수 있습니다.
🙈 숨겨진 필드 모드
보이지 않는 데이터 필드
사용자에게는 보이지 않지만 양식과 함께 데이터가 제출되는 필드를 만드세요. 추적, 추천 코드 및 시스템 값에 적합합니다.
사용 사례:
- UTM 추적 매개변수
- 추천 소스 ID
- 양식 버전 번호
- 타임스탬프 마커
- 숨겨진 메타데이터
그것은 작동하는 방법 :
"숨겨진 값"을 설정하면 양식 제출 시 자동으로 포함되어 양식 UI를 복잡하게 만들지 않습니다.
🔀 조건 논리
동적 필드 가시성
다른 폼 값에 따라 텍스트 필드를 표시하거나 숨길 수 있습니다. 사용자 입력에 따라 자동으로 조정되는 지능형 폼을 만들어 보세요.
고급 논리 규칙:
- AND 논리 – 모든 조건이 충족되어야 합니다
- OR 논리 – 어떤 조건이든 해당 동작을 트리거할 수 있습니다.
- 8가지 연산자 - 같음, 같지 않음, 보다 큼, 보다 작음, 포함, 비어 있음 등
사용 사례:
- 사용자 입력란이 "사업체"인 경우에만 "회사명"을 표시합니다.
- "저희를 어떻게 알게 되셨나요?"라는 질문에 "추천"이 포함된 경우 "추천 경로"를 표시합니다.
- 기본 옵션이 비어 있지 않은 경우 "기타 세부 정보"를 숨깁니다.
- 주문 금액이 100달러 이상일 때 "프로모션 코드"를 표시합니다.
🎯 향상된 사용자 경험
내장된 스마트 기능:
- 기본값 – 입력란을 미리 채워 입력 속도를 높입니다.
- 자리 표시자 텍스트 – 사용자가 입력하기 전에 유용한 힌트를 표시합니다.
- 도움말 텍스트 - 입력해야 할 내용을 명확히 설명하는 설명을 추가하세요.
- 필수 입력 항목 유효성 검사 – 명확한 표시를 통해 입력 항목을 필수로 지정하세요
- 사용자 지정 CSS 클래스 – 브랜드에 맞춰 사용자 지정 스타일을 적용하세요
- 접근성 지원 – 화면 낭독기용 ARIA 레이블
- 모바일 최적화 – 터치에 최적화된 입력 방식과 적절한 키보드 제공
간단한 3단계 설정
몇 분 만에 텍스트 입력 필드를 준비하세요
텍스트 필드를 추가하세요
기본 필드 섹션에서 텍스트 입력 필드를 드래그하여 양식에 놓으세요.
유효성 검사 및 제한 설정
유효성 검사 유형(이메일, URL, 문자 등)을 선택하고, 최소/최대 문자 수를 설정하며, 선택적으로 비밀번호 모드 또는 공백 제거 기능을 활성화할 수 있습니다.
서식 구성
모바일 최적화를 위해 입력 유형을 선택하고, 텍스트 변환(대문자, 소문자 등)을 선택한 다음, 기본값 또는 자리 표시자를 설정하세요.
🎉 이제 끝입니다! 스마트 유효성 검사 및 서식 지정 기능이 적용된 텍스트 필드가 준비되었습니다.
실제 애플리케이션
사용자 등록
* 길이 제한이 있는 사용자 이름 필드
* 마스킹 처리된 비밀번호 입력
* 필드 이름은 제목 대문자 형식으로 지정하세요
* 유효성 검사를 거친 이메일 주소
문의 양식
* 성명 (경칭 대문자 포함)
* 이메일 유효성 검사
* tel 입력이 포함된 전화번호
* 메시지/댓글 입력란
이커머스
* 프로모션 코드 입력 (대문자)
* 선물 메시지 입력란
* 특별 지시사항
* 배송 관련 참고 사항
비즈니스 응용 프로그램
* 직원 ID 번호
* 부서명
* 참조 번호
* 내부 코드
신청 및 등록
* 면허 번호
* 인증 코드
* 회원 ID
* 사용자 지정 식별자
검색 및 필터링
* 지우기 버튼이 있는 검색 입력란
* 텍스트 필드 필터링
* 키워드 항목
* 쿼리 입력
필드 옵션 완료
기본 구성
- 필드 레이블 – 텍스트 필드 위에 표시되는 제목
- 설명/도움말 텍스트 – 사용자를 위한 추가 안내
- 필수 입력 항목 – 텍스트 입력을 필수로 설정합니다.
- 자리 표시자 텍스트 – 사용자가 입력하기 전에 표시되는 힌트 텍스트
길이 검증
- 최소 길이 – 허용되는 최소 문자 수(유효성 검사)
- 최대 길이 – 허용되는 최대 문자 수(엄격한 제한)
기본값
- 기본값 – 양식이 로드될 때 미리 채워진 텍스트
- 숨겨진 값 – 숨겨진 필드의 값 (숨김 모드가 활성화된 경우)
보안 및 개인 정보 보호 정책
- 비밀번호 입력란 - 비밀번호 입력란을 마스킹 처리합니다(점 ••• 표시).
숨겨진 필드 - 필드를 보이지 않게 하지만 제출물에는 포함시킵니다.
데이터 품질
공백 제거 - 시작과 끝의 불필요한 공백을 자동으로 제거합니다.
검증 규칙
- 검증 유형
- 없음 (텍스트 없음)
- 이메일([이메일 보호])
- URL (https://example.com)
- 편지만 가능 (AZ 지역 한정)
- 숫자만 입력하세요 (0-9만)
- 영숫자(AZ 및 0-9)
- 사용자 정의 패턴(정규 표현식)
- 사용자 지정 패턴 – 사용자 지정 유효성 검사를 위한 정규 표현식("사용자 지정"이 선택된 경우)
입력 유형
- 입력 유형
- 일반 텍스트
- 검색 (지우기 버튼 포함)
- 전화 (휴대폰의 숫자 키패드)
- URL (모바일 전용 키보드)
텍스트 서식
- 텍스트 변환
- 변형 없음
- 대문자
- 소문자
- 첫 글자를 대문자로
- 제목 케이스
조건부 논리
- 조건부 로직 활성화 - 조건에 따라 표시/숨기기
- 논리 유형
- 모든 조건이 충족되어야 합니다(AND)
- 어떤 조건이든 충족될 수 있습니다(또는)
- 조건 규칙
- 표시/숨기기 – 취할 조치
- 필드 – 어떤 필드를 선택할지
- 연산자 – 같음, 같지 않음, 포함, 보다 큼, 보다 작음, 비어 있음, 비어 있지 않음
- 가치 – 비교 가치
- 다중 조건 – 규칙을 무제한으로 추가 가능
고급 옵션
- 사용자 지정 CSS 클래스 – 사용자 지정 스타일 적용
- 접근성 속성 – ARIA 레이블 및 설명
왜 저희 텍스트 입력 필드를 선택해야 할까요?
✅ 다용도 – 이름, 코드, 비밀번호 등 모든 것에 사용 가능
✅ 스마트 유효성 검사 – 6가지 이상의 유효성 검사 패턴 및 사용자 지정 정규 표현식 지원
✅ 모바일 최적화 – 각 입력 유형에 맞는 키보드 제공
✅ 자동 서식 지정 – 텍스트 변환이 자동으로 이루어집니다
✅ 보안성 – 비밀번호 모드로 민감한 정보를 보호합니다
✅ 데이터 정리 – 공백 제거로 일반적인 오류 방지
✅ 유연성 – 숨겨진 필드, 기본값, 조건부 로직
✅ 사용자 친화적 – 명확한 유효성 검사 메시지가 사용자를 안내합니다
✅ 완벽한 통합 – 모든 폼 기능과 원활하게 연동됩니다
자주 묻는 질문
질문: 최소/최대 길이와 유효성 검사의 차이점은 무엇인가요?
최소/최대 길이는 허용되는 문자 수를 제어합니다. 유효성 검사는 허용되는 문자를 제어하며, 예를 들어 문자만 허용, 숫자만 허용 또는 이메일 형식만 허용 등을 지정할 수 있습니다.
질문: 길이와 형식 모두 유효성 검사를 할 수 있나요?
네. 최소/최대 길이와 유효성 검사 규칙을 함께 사용할 수 있습니다. 예를 들어, 사용자 이름 필드에 최소 3, 최대 15의 길이와 영숫자 유효성 검사를 설정할 수 있습니다.
질문: 비밀번호 모드는 어떻게 작동하나요?
비밀번호 모드는 로그인 화면의 일반적인 비밀번호 입력란처럼 문자를 점으로 가립니다.
질문: "공백 제거"는 무슨 기능을 하나요?
제출 전에 앞뒤 공백을 제거하여 실수로 생긴 공백으로 인해 유효성 검사가 실패하는 것을 방지합니다.
질문: 사용자 지정 유효성 검사 패턴을 만들 수 있나요?
네. "사용자 지정 패턴"을 사용하고 정규 표현식을 추가하여 필요한 구조를 강제할 수 있습니다.
질문: 텍스트 변환은 어떻게 작동하나요?
사용자가 일반적인 방식으로 입력하면 시스템은 제출 시 텍스트를 제목 대문자(Title Case) 또는 대문자(UPPERCASE)로 변환하는 등의 변환 작업을 수행합니다.
질문: 검색 입력 유형은 무엇에 사용되나요?
이 기능은 사용자가 검색 중에 필드를 즉시 초기화할 수 있도록 내장된 지우기(X) 버튼을 추가합니다.
Q: "tel" 입력 유형을 사용하는 이유는 무엇입니까?
모바일 기기에서는 숫자 키패드가 열려 전화처럼 숫자를 입력하기가 더 쉬워집니다.
질문: 텍스트 필드에 조건부 논리를 사용할 수 있나요?
네. "포함", "같음", "비어 있음"과 같은 조건을 사용하면 사용자 입력에 따라 필드를 표시하거나 숨길 수 있습니다.
질문: 숨겨진 필드는 무엇에 사용되나요?
이러한 기능은 사용자에게 보이지 않게 데이터를 저장하며, UTM 태그나 추천 소스와 같은 메타데이터를 추적하는 데 유용합니다.
질문: 텍스트 필드를 숫자 입력에 사용할 수 있나요?
네, 하지만 계산이나 숫자 유효성 검사에는 숫자 필드를 사용하세요. 숫자로 처리하면 안 되는 코드나 ID가 필요한 경우에는 "숫자만 입력" 옵션을 선택하여 텍스트 필드를 사용하세요.
질문: 정규 표현식 패턴은 얼마나 정확할 수 있나요?
정규 표현식은 매우 특정한 패턴을 강제할 수 있습니다. 복잡한 패턴을 만들거나 검증해야 하는 경우 정규 표현식 테스터를 사용하십시오.
