어떤 양식 입력란을 사용할 수 있나요?
최상의 사용자 환경을 제공하려면 사용자가 입력하는 데이터에 가장 적합한 type 요소와 요소를 사용해야 합니다.
사용자 텍스트 입력 지원
사용자에게 텍스트를 삽입할 수 있는 양식 입력란을 제공하려면 <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> 요소를 사용합니다.
<input>를 <datalist> 요소와 함께 사용할 수도 있습니다.
이렇게 하면 텍스트 필드와 <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"에 표시됩니다.