최상의 사용자 환경을 제공하려면 사용자가 입력하는 데이터에 가장 적합한 요소와 요소를 사용해야 합니다. type
사용자가 텍스트를 입력하도록 지원
<input> 요소를 사용하여 양식 필드를 제공합니다. <input>는 단어, 구문, 짧은 항목에 가장 적합합니다. 긴 텍스트에는 <textarea> 요소를 사용합니다. 이렇게 하면 여러 줄의 텍스트가 허용되며 요소가 스크롤 가능하고 크기 조절이 가능하므로 사용자가 입력한 텍스트를 더 쉽게 볼 수 있습니다.
사용자가 올바른 형식으로 데이터를 입력하도록 지원
사용자가 전화번호를 입력하도록 지원하시겠어요?
<input>의 type 속성을 type="tel"로 변경합니다.
휴대기기 사용자는 전화번호를 더 빠르게 입력할 수 있도록 적응형 터치 키보드를 사용합니다.
이메일 주소의 경우 type="email"를 사용합니다.
적응형 터치 키보드가 다시 표시됩니다.
required 속성을 사용하여 양식 필드를 필수 필드로 만듭니다.
양식이 제출되면 브라우저에서 입력에 값이 있고 유효한지 확인합니다. 이 경우 형식이 올바른 이메일 주소인지 확인합니다.
다양한 입력 유형에 대해 자세히 알아보세요. 또한 기본 제공 유효성 검사 기능도 제공합니다.
사용자가 날짜를 입력하도록 지원
다음 여행을 언제 시작하고 싶으신가요?
사용자가 날짜를 입력할 수 있도록 하려면 type="date"를 사용하세요.
일부 브라우저에서는 날짜를 입력하는 방법을 보여주는 yyyy-mm-dd과 같은 자리표시자로 형식을 표시합니다.
모든 최신 브라우저는 날짜 선택 도구 형식으로 날짜를 선택할 수 있는 맞춤 인터페이스를 제공합니다.
사용자가 옵션을 선택하도록 지원
사용자가 가능한 옵션 하나를 선택하거나 선택 해제할 수 있도록 하려면 type="checkbox"를 사용하세요.
여러 옵션을 제공하고 싶으신가요?
사용 사례에 따라 다양한 대안이 있습니다.
먼저 사용자가 단일 옵션만 선택할 수 있어야 하는 경우 가능한 해결 방법을 살펴보세요.
type="radio" 및 동일한 name 값을 사용하여 여러 <input> 요소를 사용할 수 있습니다. 사용자에게 모든 옵션이 한 번에 표시되지만 하나만 선택할 수 있습니다.
<select> 요소를 사용하는 방법도 있습니다.
사용자는 사용 가능한 옵션 목록을 스크롤하여 하나를 선택할 수 있습니다.
숫자 범위를 선택하는 것과 같은 일부 사용 사례의 경우 range 유형의 <input>이 좋은 선택일 수 있습니다.
여러 옵션을 선택할 수 있는 기능을 제공해야 하나요?
multiple 속성이 있는 <select> 요소 또는 checkbox 유형의 <input> 요소를 여러 개 사용합니다.
<datalist> 요소와 함께 <input>를 사용할 수도 있습니다.
이렇게 하면 텍스트 필드와 <option> 요소 목록이 조합됩니다.
사용자가 다양한 유형의 데이터를 입력할 수 있는지 확인
특정 사용 사례를 위한 입력 유형이 더 있습니다.
지원되는 브라우저에서 사용자에게 색상 선택기를 제공하는 color 유형의 <input>가 있으며 다양한 다른 유형도 있습니다. 사용자가 비밀번호를 입력할 수 있도록 하려면 type="password"와 함께 <input>를 사용하세요. 입력된 모든 문자는 비밀번호를 읽을 수 없도록 별표 ('*') 또는 점 ('•')으로 가려집니다.
양식 데이터에 고유한 보안 토큰을 포함하시겠어요?
type="hidden"와 함께 <input>를 사용합니다.
hidden 유형의 <input> 값은 사용자가 보거나 수정할 수 없습니다.
사용자가 파일을 업로드하고 제출할 수 있도록 하려면 type="file"와 함께 <input>을 사용하세요.
내장 요소나 유형이 적합하지 않은 특별한 사용 사례가 있는 경우 맞춤 요소를 정의할 수도 있습니다.
사용자가 양식을 작성하도록 지원
양식 요소와 유형은 다양하지만 어떤 것을 선택해야 할까요?
일부 사용 사례에서는 <input type="date">와 같이 적절한 요소와 유형을 쉽게 선택할 수 있습니다. 다른 경우에는 상황에 따라 다릅니다.
예를 들어 type="checkbox" 또는 <select> 요소와 함께 여러 <input> 요소를 사용할 수 있습니다.
목록 상자와 드롭다운 목록 중에서 선택하는 방법을 자세히 알아보세요.
일반적으로 실제 사용자로 양식을 테스트하여 최적의 양식 요소와 유형을 찾아야 합니다.
이해도 확인
양식 필드에 대한 지식 테스트
양식 컨트롤로 여러 파일을 업로드할 수 있나요?
<input type="files">을 사용합니다.<input type="file" multiple>을 사용합니다.<input type="multiple-files">을 사용합니다.type="text"과 type="password"는 어떻게 다른가요?
type="password"의 경우 비밀번호를 입력하기 위한 적응형 터치 키보드가 표시됩니다.type="password"를 사용하면 입력된 모든 문자가 별표 (*) 또는 점 (•)으로 가려집니다.type="password"에 비밀번호를 입력하기 위한 맞춤 인터페이스가 표시됩니다.