HTML 양식의 이메일 및 URL 입력 필드 유효성 검사

이 튜토리얼에서는 HTML 양식의 이메일 주소 및 URL 입력 필드에 대한 모든 중요한 측면을 알아봅니다. 이러한 입력의 유효성 검사를 효과적으로 구현하고 다양한 입력 상태에 맞게 스타일을 사용자 지정하는 방법을 보여드리는 것이 목표입니다. 이렇게 하면 사용자 환경이 개선될 뿐만 아니라 수집하는 데이터의 품질도 향상됩니다.

주요 학습 내용

• HTML을 사용하여 이메일과 URL의 기본 구조와 유효성 검사에 대해 배웁니다.
• 입력이 유효하지 않은 경우 CSS를 사용하여 사용자에게 시각적 피드백을 제공하는 방법도 배웁니다.
• 이메일 주소와 URL의 추가 유효성 검사를 위한 패턴 사용에 대해서도 설명합니다.

단계별 지침

1. 이메일의 기본 입력 필드 만들기

이메일에 대한 표준 입력 요소를 만드는 것부터 시작합니다. 브라우저에서 자동으로 입력의 유효성을 검사하도록 유형을 "이메일"로 설정해야 합니다.

이제 입력 필드는 이메일 주소를 예상하고 입력이 잘못된 경우 시각적 피드백을 제공하는 방식으로 HTML에 의해 처리됩니다. 사용자가 입력을 시작하자마자 배경이 분홍색으로 변경되어 문제가 있음을 나타냅니다.

2. 이메일 주소 유효성 검사

이메일은 간단한 규칙을 사용하여 유효성을 검사합니다. "@" 기호가 하나 이상 있어야 하고 그 뒤에 다른 문자가 하나 이상 있어야 합니다. 이것이 기본적인 NLP 유효성 검사입니다. 그러나 이 유효성 검사 규칙만으로는 이메일 주소가 실제로 존재하는지 확인하기에 충분하지 않습니다.

잘못된 이메일 주소의 예로는 "bla@"를 들 수 있습니다. 이러한 경우 양식 제출이 차단되고 사용자에게 오류 메시지가 표시됩니다.

3. 보다 정확한 유효성 검사를 위한 패턴 사용

보다 정확한 유효성 검사를 수행하려면 '패턴' 속성을 사용할 수 있습니다. 정규식(정규식)을 사용하면 이메일 주소가 특정 도메인 등 특정 요건을 충족하도록 지정할 수 있습니다.

이 추가 유효성 검사를 통해 Gmail 또는 GMX 주소와 같이 유효한 이메일 주소만 허용되도록 할 수 있습니다.

4. 필수 입력 및 스타일 지정

이메일 필드가 채워지도록 하려면 '필수' 속성을 추가하면 됩니다. 사용자가 아무 것도 입력하지 않고 양식을 제출하려고 하면 즉시 시각적 피드백을 받게 됩니다.

CSS에서 ":invalid" 선택기를 사용하여 유효하지 않은 항목의 스타일을 지정할 수 있습니다. 이렇게 하면 필드의 배경이 빨간색으로 바뀌어 입력이 잘못되었음을 사용자에게 경고합니다.

5. URL에 대한 입력 필드 만들기

이메일과 마찬가지로 URL에 해당하는 입력 요소를 만드는 것도 중요합니다. 브라우저도 여기서 입력의 유효성을 검사하도록 유형을 "URL"로 설정합니다.

6. URL 유효성 검사

유효한 URL의 기본 요건은 "http://" 또는 "https://"으로 시작하고 다음 문자가 하나 이상 포함되어야 한다는 것입니다. 사용자가 단순히 "https"를 입력하는 경우 이것만으로는 충분하지 않습니다.

"ftp"와 같은 다른 프로토콜에도 동일한 원칙이 적용됩니다. 입력이 조건을 충족하지 않으면 브라우저는 피드백을 제공하고 양식 제출을 허용하지 않습니다.

7. URL에 대한 패턴을 사용한 확장 유효성 검사

"https://www.example.com"와 같은 특정 패턴에 대한 유효성 검사를 보다 정확하게 수행하려면 '패턴' 속성을 사용하여 사용자가 올바른 URL을 입력할 수 있도록 도와야 합니다.

8. 모바일 디바이스에서의 사용성

양식에 "이메일" 및 "URL" 유형을 사용하면 모바일 장치에서 사용성이 향상된다는 큰 이점이 있습니다. 키보드는 사용자가 이메일 주소와 URL을 더 쉽게 입력할 수 있도록 최적화되어 있습니다.

요약

이 튜토리얼에서는 웹 양식에서 이메일 주소와 URL의 유효성 검사를 위한 가장 중요한 기준을 다루었습니다. 기본 및 고급 유효성 검사를 수행하는 방법과 더 나은 사용자 경험을 만들기 위해 CSS를 통해 사용자 피드백을 사용자 지정하는 방법을 배웠습니다.