어떤 양식 입력란을 사용할 수 있나요?
가능한 한 최상의 사용자 환경을 제공하기 위해
사용자가 입력하는 데이터에 가장 적합한 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>가 있습니다.
이 외에도 다양한 유형이 있습니다 사용자가 비밀번호를 입력할 수 있도록 하려면 <input>를 사용하세요.
type="password". 입력한 모든 문자는 별표('*') 또는 점('•')으로 가려집니다.
비밀번호를 읽을 수 없도록 합니다.
양식 데이터에 고유한 보안 토큰을 포함하시겠습니까?
type="hidden"와 함께 <input>를 사용합니다.
hidden 유형의 <input> 값은 사용자가 보거나 수정할 수 없습니다.
사용자가 파일을 업로드하고 제출할 수 있게 하려면 <input>를 type="file"와 함께 사용합니다.
특별한 사용 사례가 있다면 커스텀 요소를 정의할 수도 있습니다. 기본 제공 요소나 유형이 적합하지 않은 경우입니다.
사용자의 양식 작성 지원
양식 요소와 유형은 여러 가지가 있지만 어떤 것을 선택해야 할까요?
일부 사용 사례에서는
적절한 요소와 유형을 선택하는 것이
<input type="date"> 등). 경우에 따라 다릅니다.
예를 들어 여러 <input> 요소를 type="checkbox" 또는 <select> 요소와 함께 사용할 수 있습니다.
목록 상자와 드롭다운 목록 중 선택하기에 관해 자세히 알아보세요.
일반적으로 실제 사용자를 대상으로 양식을 테스트하여 가장 적합한 양식 요소와 유형을 찾으세요.
이해도 확인
양식 입력란에 대한 지식 테스트
양식 컨트롤로 여러 파일을 업로드할 수 있나요?
<input type="files">을(를) 사용합니다.<input type="file" multiple>을(를) 사용합니다.<input type="multiple-files">을(를) 사용합니다.type="text"와 type="password"의 차이점은 무엇인가요?
type="password"의 경우 비밀번호를 입력할 수 있도록 조정된 터치 키보드가 표시됩니다.type="password"를 사용하면 입력한 모든 문자가 별표 (*) 또는 점 (•)으로 가려집니다.type="password"의 비밀번호 입력을 위한 맞춤 인터페이스가 표시됩니다.