HTML autocomplete와 datalist: 저장 정보 힌트와 직접 만든 추천 목록은 다릅니다
autocomplete는 브라우저가 폼 값을 어떻게 미리 채울지 알려 주는 힌트이고, datalist는 작성자가 제공한 추천 값 목록입니다. 추천 목록을 넣었다고 사용자가 그 안의 값만 제출할 수 있도록 검증까지 끝난 것은 아닙니다. 목차 1. 자동완성이라는 이름을 두 역할로 나눕니다 2. input의 list와 datalist의 id를 연결합니다 3. 목록 밖 입력과 접근성을 확인합니다 1. 자동완성이라는 이름을 두 역할로 나눕니다 AI가 만든 폼을 검토할 때 “자동완성을 넣었다”는 설명만으로 기능을 판단하지 마세요. 저장된 연락처 같은 정보를 채우는 힌트인지, 화면 작성자가 미리 정한 선택지를 제안하는 것인지 먼저 묻는 편이 좋습니다. 구성 역할 따로 확인할 일 autocomplete 브라우저의 사전 입력을 위한 힌트 입력 목적에 맞는 토큰·실제 브라우저 동작 datalist 연결된 입력란의 추천값 목록 밖 값 허용·검증 요구 select 정해진 선택지를 고르는 별도 입력 방식 업무에서 필요한 선택 제한 2. input의 list와 datalist의 id를 연결합니다 아래는 가상의 메모 분류를 제안하는 짧은 예시입니다. 실제 계정 정보나 개인정보를 받지 않는 학습용 코드이며, 동작하는 신청 서비스를 배포한 결과는 아닙니다. <label for="note-topic">메모 분류</label> <input id="note-topic" name="topic" list="topic-ideas"> <datalist id="topic-ideas"> <option value="독서"></option> <option value="생활"></option> </datalist> list의 값과 datalist의 id가 맞아야 연결됩니다. 추천 항목을...