1. 흐릿한 안내 텍스트 placeholder

사용자가 입력하기 전에 필드에 어떤 값을 입력해야 하는지 알려주는 텍스트를 표시할 수 있다.

<input type="email" name="userEmail" placeholder="이메일을 입력하세요">

placeholder 텍스트의 스타일은 ::placeholder 가상 요소 선택자로 바꿀 수 있다.

input::placeholder {
    color: #ff6600;
    font-size: 14px;
}

2. 페이지 로드 시 자동 포커스 autofocus

해당 속성을 추가하면 문서가 로드된 직후 해당 입력 필드로 커서가 자동으로 이동한다.

<input type="search" name="keyword" autofocus>

3. 자동완성 autocomplete

입력 필드에 autocomplete="on"을 설정하면 이전에 성공적으로 제출한 데이터를 기반으로 자동완성 목록을 보여준다. 데이터가 연결되려면 반드시 name 속성이 있어야 하며, 저장된 데이터와 name 값이 일치할 때만 표시된다.

<input type="text" name="userEmail" autocomplete="on">
<input type="text" name="hobby" autocomplete="off">

4. 필수 입력 required

값이 비어 있으면 폼 제출이 차단된다.

<input type="password" name="pwd" required>

5. 패턴 검증 pattern

정규표현식 조건에 맞지 않으면 제출이 막힌다. 패턴은 / 구분자 없이 작성한다.

<input type="tel" name="phone" pattern="^[0-9]{3}-[0-9]{4}-[0-9]{4}$">

6. 다중 선택 multiple

파일 선택과 이메일 입력에서 여러 값을 받을 수 있다.

<!-- 파일 여러 개 선택 -->
<input type="file" name="attachments" multiple>

<!-- 이메일 여러 개, 쉼표로 구분 -->
<input type="email" name="recipients" multiple>

7. 폼 외부 요소 연결 form

밖에 있는 입력 요소도 form 속성에 대상 폼의 id를 지정하면 해당 폼의 데이터로 제출된다.

<form id="joinForm"></form>

<input type="text" name="nickname" form="joinForm">

8. 값이 바뀔 때 oninput

입력값이 변경될 때마다 발생하며, 한 자씩 입력할 때도 계속 호출된다. 반면 change 이벤트는 입력이 끝나고 포스가 빠질 때 발생한다.

<input type="tel" id="phone">

<script>
    const phone = document.querySelector('#phone');

    phone.addEventListener('input', function () {
        console.log('입력 중:', this.value);
    });

    phone.addEventListener('change', function () {
        console.log('입력 완료:', this.value);
    });
</script>

9. 검증 실패 시 oninvalid

유효성 검사를 통과하지 못하면 발생하며, setCustomValidity()로 사용자 정의 메시지를 설정할 수 있다.

<input type="tel" name="mobile" pattern="^01[0-9]-[0-9]{4}-[0-9]{4}$">

<script>
    const mobile = document.querySelector('[name="mobile"]');

    mobile.addEventListener('invalid', function () {
        this.setCustomValidity('전화번호 형식이 올바르지 않습니다.');
    });

    mobile.addEventListener('input', function () {
        this.setCustomValidity('');
    });
</script>

10. 라우저 검증 끄기 novalidate

novalidate 속성을 추가하면 HTML5 기본 검증을 비활성화할 수 있다.

<!-- 마크업 방식 -->
<form id="joinForm" novalidate>
    ...
</form>

<!-- 스크립트 방식 -->
<script>
    document.querySelector('#joinForm').noValidate = true;
</script>