양식 입력란 심층

어떤 양식 필드를 사용할 수 있나요?

최상의 사용자 환경을 제공하려면 사용자가 입력하는 데이터에 가장 적합한 요소와 요소 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> 값은 사용자가 보거나 수정할 수 없습니다.

사용자가 파일을 업로드하고 제출할 수 있도록 하려면 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"에 비밀번호를 입력하기 위한 맞춤 인터페이스가 표시됩니다.
다시 시도해 보세요.

리소스