HTML 요소 속성을 통해 <form> 및 양식 컨트롤을 향상할 수 있습니다.
사용자가 양식 컨트롤을 작성하도록 지원
사용자가 양식을 더 쉽게 작성할 수 있도록 <input> 요소에 적절한 type 속성을 사용하세요.
브라우저는 type에 적합한 사용자 인터페이스를 표시합니다(예: date 유형의 <input>의 날짜 선택 도구).
휴대기기의 브라우저에는 type="tel"의 전화번호 키패드와 같이 조정된 터치 키보드가 표시됩니다.
일부 <input> 유형은 양식이 제출될 때 요소의 유효성 검사 규칙도 변경합니다.
예를 들어 <input type="url">는 비어 있지 않고 값이 URL인 경우에만 유효합니다.
사용자의 데이터 입력 보장
터치 기기에 적절한 터치 키보드를 제공하기 위한 다양한 속성이 있습니다.
첫 번째 옵션은 위에서 언급한 대로 type 속성을 사용하는 것입니다.
또 다른 옵션은 Android 및 iOS에서 지원되는 inputmode 속성입니다.
type 속성과 달리 inputmode 속성은 제공된 터치 키보드만 변경하고 요소 자체의 동작을 변경하지는 않습니다. 기본 사용자 인터페이스와 <input>의 기본 유효성 검사 규칙을 유지하면서 최적화된 터치 키보드가 필요하다면 inputmode를 사용하는 것이 좋습니다.
enterkeyhint 속성을 사용하여 터치 키보드의 Enter 키를 변경할 수 있습니다.
예를 들어 enterkeyhint="next" 또는 enterkeyhint="done"는 버튼 라벨을 적절한 아이콘으로 변경합니다.
이렇게 하면 사용자가 현재 양식을 제출할 때 발생하는 상황을 더 명확하게 알 수 있습니다.
사용자가 양식을 제출할 수 있는지 확인하기
예를 들어 <form>를 작성하고 Submit 버튼을 클릭해도 아무 일도 일어나지 않습니다.
버튼이 disabled 속성으로 사용 중지되었기 때문일 수 있습니다.
양식이 유효할 때까지 Submit 버튼을 비활성화하는 것이 일반적인 패턴입니다.
이론적으로는 합리적으로 보이지만 완전하고 유효한 사용자 입력을 기다리는 동안 Submit 버튼을 사용 중지해서는 안 됩니다. 대신 입력 시 잘못된 데이터는 강조표시하고 사용자가 양식을 제출할 때 문제가 되는 필드는 사용자에게 강조 표시하세요.
양식이 제출되었으나 아직 처리되지 않은 경우에는 제출 버튼을 비활성화하는 것이 좋습니다. 사용 중지된 버튼에 관해 자세히 알아보세요.
사용자가 이전에 입력한 데이터를 표시하여 지원
여러 단계로 구성된 결제 양식이 있다고 가정해 보겠습니다.
사용자가 이전 단계로 돌아올 때 이전에 입력한 값이 그대로 유지되도록 하려면 어떻게 해야 할까요?
이미 완성된 값을 표시하려면 value 속성을 사용합니다.
<label for="name">Name</label>
<input value="Hilda" name="name" id="name" type="text">
JavaScript에서 양식 컨트롤의 값을 가져오는 방법에는 여러 가지가 있습니다.
value 속성을 사용하거나 getAttribute('value')를 사용하여 값에 액세스할 수 있습니다.
한 가지 큰 차이점이 있습니다. value 속성은 항상 현재 값을 반환하고 getAttribute()를 사용하면 항상 초깃값을 반환합니다.
지금 사용해 보세요.
이름 필드의 텍스트를 변경하고 콘솔을 확인합니다.
value 속성은 현재 표시된 텍스트를 반환하는 반면 getAttribute('value')는 항상 초깃값을 반환합니다.
DOM 속성과 DOM 속성의 차이점 자세히 알아보기
checkbox 또는 radio 유형의 <input> 요소에는 checked 속성을 사용합니다.
사용자가 옵션을 선택하면 추가하고 그렇지 않으면 삭제합니다.
사용자가 예상 형식을 이해할 수 있도록 하기
placeholder 속성의 값은 예상되는 정보 종류를 알려주는 힌트입니다.
<label for="name">Name</label>
<input type="text" name="name" id="name" placeholder="Karin">
이는 양식 컨트롤이 이미 미리 입력된 것처럼 보이는 이유를 이해하지 못할 수 있으므로 사용자에게 혼란을 줄 수 있습니다. 또한 자리표시자를 추가하면 여전히 작성해야 하는 양식 입력란을 확인하기 어려울 수 있습니다. 또한 자리표시자 텍스트의 기본 스타일을 읽기 어려울 수 있습니다.
일반적으로 placeholder 속성을 사용할 때는 주의해야 하며 양식 컨트롤을 설명하는 데 placeholder 속성을 사용하면 안 됩니다.
대신 <label> 요소를 사용하세요.
placeholder 속성 사용을 고려해야 하는 이유 자세히 알아보기
사용자에게 예상되는 정보 유형에 대한 힌트를 제공하는 더 좋은 방법은 양식 컨트롤 아래에 추가 HTML 요소를 사용하여 설명이나 예를 추가하는 것입니다.
양식 컨트롤을 검증할 준비가 되었는지 확인
기본 제공 유효성 검사를 활성화하는 데 사용할 수 있는 다양한 HTML 속성이 있습니다.
빈 입력란이 제출되지 않도록 하려면 required 속성을 사용합니다.
type 속성을 사용하여 추가 유효성 검사를 실행할 수 있습니다.
예를 들어 필수 <input> type="url" 값은 URL이어야 합니다.
사용자가 최소 문자 수를 입력할 수 있게 하려면 minlength 속성을 사용하세요.
최대 문자 수를 초과하는 값을 허용하지 않으려면 maxlength 속성을 사용합니다.
<input type="number">와 같은 숫자 입력 유형의 경우 대신 min 및 max 속성을 사용합니다.
유효성 검사에 관해 자세히 알아보기: 사용자가 양식에 올바른 데이터를 입력하도록 지원
이해도 테스트
양식 속성에 관한 지식 테스트
터치 키보드에서 Enter 키의 라벨을 변경하는 데 사용할 수 있는 속성은 무엇인가요?
enterkeyenterkeyhintenterkeytextenterkeylabelvalue 속성과 getAttribute('value')의 차이점은 무엇인가요?
value 속성은 현재 값을 반환하고 getAttribute('value')는 초깃값을 반환합니다.value 속성은 초깃값을 반환하고 getAttribute('value')는 현재 값을 반환합니다.value 속성은 키와 값을 반환하고 getAttribute('value')는 값만 반환합니다.