프로그래밍 공부 일기

2020년 11월 8일
스크립트를 사용하지 않고 입력 체크하는 방법을 처음 알았으므로 정리한다.

입력 필수 항목 만들기

input 요소에 속성치 required를 사용하면 그 입력란은 입력 필수 항목이 되어, 공란인 채로 송신 버튼이 눌려져도 경고 메세지가 나온다.

<form>
    名前：
    <input type="text" required >
    <br>
    <input type="submit" value="送信">
</form>

실행 결과 (chrome)


※ chrome에서는 이렇게 실행되고 있지만, required 속성에 비대응의 낡은 브라우저에서는 경고 메세지가 나오지 않고 그대로 송신되어 버리는 일이 있으므로 주의한다.

이메일 주소 확인

'input 요소의 type 속성의 값을 email로 하면, 메일 주소의 입력란이 된다. 외형은 다른 텍스트 입력란과 다르지 않지만 이메일 주소가 아닌 문자열이 입력되면 경고 메시지가 나온다. 이것만이라면 공란의 경우에는 경고 메시지는 나오지 않고, 그대로 송신되므로 공란을 피하기 위해서는 방금전의 required 도 맞추어 사용한다.

<form>
    メールアドレス：
    <input type="email" required>
    <br>
    <input type="submit" value="送信">
</form>

실행 결과 (chrome)

URL 확인

메일 주소와 마찬가지로 input 요소의 type 속성을 url로 하면 URL의 입력란이 된다. 사용법은 메일 주소의 경우와 같고 URL이 아닌 문자열이 입력되면 경고 메시지가 나온다. ( required 를 함께 사용하면 필수 입력 항목이 됨)

실행 결과 (chrome)

전화번호 확인

input 요소의 type 속성을 tel로 하면 전화번호의 입력란이 된다. pattern 속성을 사용해 입력 규칙을 정규 표현으로 쓰는 것으로 전화 번호인가 어떤가를 체크해 준다.

<form>
    電話番号(ハイフンなし)：
        <!-- 数字が10回以上繰り返される場合をチェック -->
    <input type="tel" pattern="[\d]{10,}" required>
    <br>
    <input type="submit" value="送信">
</form>

실행 결과 (chrome)

텍스트 입력란 확인

정규 표현식으로 입력 규칙을 지정할 수 있는 pattern 속성은 input 요소의 type 속성의 값이 text, search, tel, url, email, password와 같은 1행 텍스트의 입력란을 만드는 경우에 사용할 수 있다.
pattern 속성의 기술만으로는 입력 체크는 할 수 있지만, 기술 형식을 지정하는 것은 어렵기 때문에, title 속성의 값에 안내를 가리키는 것으로 경고 메세지의 차이에 맞추어 표시된다.

<form>
    パスワード：
    <input type="text" pattern="[A-Z]*" title="英大文字のみで入力して下さい" required>
    <br>
    <input type="submit" value="送信">
</form>

실행 결과 (chrome)

참고문헌

정규식 : 문자의 "반복"과 횟수 지정
스크립트를 사용하지 않고 HTML만으로 입력 확인하는 방법 zi