input element 기본 입력 필드 - by. UXKM

  • Publishing
  • HTML
  • 폼 콘텐츠(Forms content)
  • input element 기본 입력 필드
요약 설명

<input> 요소는 사용자 입력을 받기 위한 HTML 폼 요소입니다.
다양한 type 속성을 사용해 텍스트 입력, 비밀번호 입력, 체크박스, 라디오 버튼, 파일 업로드 등 다양한 입력 형식을 제공합니다.
name, value, placeholder, required 등의 속성을 활용해 입력 데이터의 특성을 정의할 수 있으며, JavaScript와 함께 사용해 유효성 검사 및 동적 처리가 가능합니다.

요약 설명

기본 입력 필드는 사용자가 텍스트를 입력하거나 특정 형식의 데이터를 입력받는 요소로, 웹사이트에서 가장 많이 사용됩니다.
다양한 속성을 활용해 입력값을 제한하거나 검증할 수 있으며, 일반 텍스트 입력부터 비밀번호, 이메일, URL, 전화번호 입력을 위한 특수 필드까지 포함됩니다. 또한, hidden 타입을 사용하면 사용자에게 보이지 않는 데이터를 전송할 수도 있습니다.

대표적인 타입으로 text, password, search, tel, url, email, hidden 등이 있습니다.

관련 속성

[maxlength] 선택 사항 최대 글자 수 제한

  • 사용자가 입력할 수 있는 최대 문자 수를 제한합니다.
  • maxlength보다 많은 문자를 입력하려고 하면 추가 입력이 차단됩니다.
  • type="text", type="password", type="search", type="tel", type="url", type="emai" 에서 사용할 수 있습니다.
  • 일반적으로 입력 필드의 글자 수를 제한하여 데이터의 유효성을 유지하는 데 사용됩니다.

[minlength] 선택 사항 최소 글자 수 제한

  • 사용자가 입력해야 하는 최소 문자 수를 지정합니다.
  • minlength보다 적은 글자를 입력하면 폼 제출 시 브라우저에서 경고를 표시합니다.
  • required 속성과 함께 사용하면, 최소 글자 수를 충족하지 않으면 필드가 유효하지 않은 것으로 간주됩니다.
  • 비밀번호(type="password"), 사용자 이름(type="text"), 이메일(type="email") 등의 필드에서 유효성 검증을 강화하는 데 사용됩니다.

[pattern] 선택 사항 정규 표현식을 사용한 입력 검증

  • 사용자가 입력할 값이 정해진 형식과 일치하는지 검증할 때 사용합니다.
  • HTML의 기본 검증 기능을 확장하여, 특정 형식의 전화번호나 이메일을 입력하도록 제한할 수 있습니다.
  • type="text", type="tel", type="email", type="search", type="url" 등에서 사용됩니다.
  • 정규 표현식을 적용할 때 title 속성을 함께 사용하면 사용자에게 입력 형식을 안내할 수 있습니다.

[dirname] 선택 사항 입력 방향 정보 전송

  • type="text" 또는 type="search"에서만 사용됩니다.
  • 입력된 텍스트의 방향(왼쪽에서 오른쪽(ltr) 또는 오른쪽에서 왼쪽(rtl))을 서버로 전송합니다.
  • dirname="입력필드이름.dir" 형식으로 사용하면, 서버로 전달될 때 입력 방향 정보를 함께 보낼 수 있습니다.
  • 다국어 입력 지원이 필요한 경우 유용합니다.

[size] 선택 사항 입력 필드의 시각적 크기 조정

  • 입력 필드의 가시적인 크기를 설정하며, 입력 가능한 문자 수와는 무관합니다.
  • CSS의 width 속성과 비슷하지만, size는 글자 단위로 너비를 지정합니다.
  • 사용자의 입력 길이에 따라 동적인 레이아웃을 제공하고자 할 때 유용합니다.
  • type="text", type="search", type="tel", type="url", type="email" 등에서 사용됩니다.

[type]별 예제

[type="text"] (일반 텍스트 입력 필드)

사용자가 자유롭게 문자열을 입력할 수 있는 가장 기본적인 입력 필드입니다.
다양한 입력을 받을 수 있으며, maxlength 등을 사용해 글자 수를 제한할 수도 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="password"] (비밀번호 입력 필드)

입력된 값이 점(•) 또는 별표(*) 등으로 가려져 보이지 않도록 처리되는 보안성이 강화된 입력 필드입니다.
주로 로그인 및 인증 관련 폼에서 사용되며, 브라우저의 자동완성 기능을 지원할 수도 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="search"] (검색 입력 필드)

웹사이트나 애플리케이션에서 검색 기능을 제공하기 위해 사용되는 입력 필드입니다.
브라우저에 따라 입력값을 쉽게 삭제할 수 있는 버튼이 제공되거나, 검색 기록을 자동완성하는 기능이 추가될 수 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="tel"] (전화번호 입력 필드)

전화번호 입력을 위해 최적화된 입력 필드로, 숫자와 특정 기호(+, -, ())를 입력할 수 있습니다.
특히 모바일 환경에서는 숫자 패드가 자동으로 표시될 수 있어 사용자 편의성을 높여줍니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="url"] (URL 입력 필드)

웹사이트 주소를 입력하는 용도로 사용되며, 입력된 값이 올바른 URL 형식인지 브라우저가 기본적으로 검사할 수 있습니다.
자동완성 기능이 활성화된 경우 사용자의 방문 기록에서 추천 URL을 제공할 수도 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="email"] (이메일 입력 필드)

이메일 주소를 입력하는 데 사용되며, 형식이 올바르지 않으면 브라우저에서 기본적인 유효성 검사를 수행합니다.
multiple 속성을 추가하면 쉼표(,)로 구분하여 여러 개의 이메일을 입력할 수도 있습니다.

(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.

[type="hidden"] (숨겨진 입력 필드)

사용자 인터페이스에는 표시되지 않지만, 폼을 제출할 때 특정한 값을 포함하는 데 사용됩니다. 주로 서버로 전달해야 하는 고정된 데이터(예: 사용자 ID, 토큰 등)를 저장하는 용도로 활용됩니다.

기본 숨겨진 입력 필드

동적으로 값 변경

서버용 데이터 전송