폼 콘텐츠는 사용자로부터 정보를 입력받는 웹 양식(form)을 구성하는 요소들을 가리킵니다.
이러한 요소들은 사용자가 텍스트를 입력하거나 선택하고 제출하는 등의 상호 작용을 할 수 있도록 도와줍니다.
주요 폼 콘텐츠 요소로는 <input>, <select>, <textarea>,
<button>, <label> 등이 있습니다.
폼 콘텐츠 요소들을 조합하여 로그인 폼, 등록 폼, 설문조사 등 다양한 웹 양식을 만들면
사용자로부터 다양한 종류의 정보를 수집하고 처리할 수 있습니다.
input element주요 역할 및 특징- by. UXKM
요약 설명
<input> 요소는 사용자 입력을 받기 위한 HTML 폼 요소입니다.
다양한 type 속성을 사용해 텍스트 입력, 비밀번호 입력, 체크박스, 라디오 버튼, 파일 업로드 등 다양한 입력 형식을 제공합니다. name, value, placeholder, required
등의 속성을 활용해 입력 데이터의 특성을 정의할 수 있으며,
JavaScript와 함께 사용해 유효성 검사 및 동적 처리가 가능합니다.
주요 역할 및 특징
다양한 입력 유형 지원
type 속성을 통해 여러 종류의 입력 필드를 제공할 수 있습니다.
예: text, password, email, number,
checkbox, radio, date, file 등
폼 요소와 함께 사용됨
<form> 요소 내부에서 주로 사용되며, 서버로 데이터를 전송할 수 있습니다.
name 속성을 지정하면 폼 제출 시 해당 데이터가 전송됩니다.
검증 및 제약 가능
required, maxlength, min, max,
pattern 등의 속성을 사용하여 입력값을 검증할 수 있습니다.
접근성과 유효성 검사 지원
label 요소와 함께 사용하면 접근성을 향상시킬 수 있습니다.
required, pattern 등의 속성을 사용하여 유효성 검사를 할 수 있습니다.
사용자 인터페이스 제공
<input> 요소를 HTML에 작성하면, 별도의 스타일을 적용하지 않아도
브라우저가 기본적인 입력 필드(텍스트 상자, 버튼, 체크박스 등)를 화면에 표시합니다.
사용자는 이 입력 필드를 보고 클릭하거나 키보드를 이용해 값을 입력할 수 있습니다.
CSS 기본 값
<input> 요소는 기본적으로 인라인 블록 레벨 요소이며, 별도의 CSS를 지정하지 않아도 아래와 같은 기본값이 적용됩니다.
기본 문법
속성
요약 설명
<input> 요소는 HTML에서 가장 많은 속성을 가진 요소입니다. type 속성 값에 따라 브라우저에서 표시되는 모양이 다르며,
일부 속성은 모든 type에서 공통적으로 사용되지만, 특정 type에서만 적용되는 고유한 속성도 존재합니다.
아래는 type 속성을 기준으로 <input> 요소에서 사용하는 고유 속성을 정리한 내용입니다.
[공통으로 사용되는 속성]
대부분의 <input> 요소에서 공통으로 사용 가능하며, 특정 type에 종속되지 않는 속성입니다.
모든 <input> 타입에 적용 가능한 속성
[autofocus]
페이지 로드 시 자동으로 포커스를 설정합니다.
[name]
입력 필드의 이름을 지정하여, 폼 제출 시 해당 필드의 데이터를 식별하고 서버로 전송할 키 값으로 활용됩니다.
[disabled]
입력 필드를 비활성화하여 사용자가 조작할 수 없도록 설정합니다.
[required]
필수 입력 필드로 설정하여,
폼 제출 시 해당 입력 필드가 비어있으면 브라우저는 자동으로 유효성 검사를 수행하고, 사용자가 값을 입력하도록 안내 메시지를 표시합니다.
[accesskey]
접근성 향상을 위한 키보드 단축키를 지정합니다.
[autocomplete]
브라우저의 자동완성 기능을 활성화 또는 비활성화합니다.
특정 <input> 타입에 적용 가능한 속성
[list]
<datalist> 요소와 연결하여 자동완성 옵션을 제공합니다. type="checkbox",
type="radio",
type="range",
type="file",
type="button",
type="submit",
type="reset"
에는 적용되지 않습니다.
[value]
입력 필드의 초기 값을 설정합니다. type="button",
type="submit",
type="reset"
과 같은 버튼 유형에서는 버튼의 라벨(표시되는 이름)로 사용됩니다.
[readonly]
입력 필드를 읽기 전용으로 설정하여 사용자는 수정할 수 없지만, 폼 제출은 가능합니다. type="checkbox",
type="radio",
type="range",
type="file",
type="button",
type="submit",
type="reset"
에는 적용되지 않습니다.
[placeholder]
입력 필드에 힌트 텍스트를 표시합니다. 사용자가 입력하면 힌트 텍스트는 사라집니다. type="checkbox",
type="color",
type="date",
type="datetime-local",
type="file",
type="hidden",
type="image",
type="month",
type="radio",
type="range",
type="reset",
type="submit",
type="time",
type="week"
에는 적용되지 않습니다.
[기본 입력 필드]
사용자가 텍스트를 입력하는 필드와 특정 형식의 데이터를 입력받는 필드입니다.
해당 type 목록
[type="text"]
일반적인 텍스트 입력 필드입니다.
[type="password"]
비밀번호 입력 필드로, 입력 내용이 가려집니다.
[type="search"]
검색어 입력을 위한 필드로, UI 최적화가 적용됩니다.
[type="tel"]
전화번호 입력 필드로, 모바일 키패드 최적화가 이루어집니다.
[type="url"]
웹사이트 URL 입력 필드로, 입력 검증이 지원됩니다.
[type="email"]
이메일 주소 입력 필드로, 입력 검증 및 자동완성 기능이 제공됩니다.
[type="hidden"]
사용자에게 보이지 않는 숨겨진 필드로, 서버 전송용입니다.
관련 속성
[maxlength]
입력 가능한 최대 문자 수를 제한합니다.
[minlength]
입력 가능한 최소 문자 수를 제한합니다.
[pattern]
정규 표현식을 사용하여 입력 형식을 검증합니다.
[dirname]
입력된 텍스트의 방향을 서버로 전송할 때 사용됩니다.
(type="text", type="search"에서 사용 가능합니다.)
입력 필드에 미리 설정된 초기 값을 지정합니다. 사용자가 값을 입력하기 전에 표시되는 기본 값으로, 폼 제출 시 이 값이 전송됩니다.
[disabled]
입력 필드를 비활성화하여 사용자가 해당 필드에 값을 입력하거나 조작할 수 없도록 만듭니다. 폼 제출 시 이 필드는 전송되지 않습니다.
[readonly]
입력 필드를 읽기 전용으로 설정하여 사용자가 필드 내용을 수정할 수 없게 합니다. 그러나 폼 제출 시 필드 값은 제출됩니다. checkbox, radio, range,
file, button, submit, reset
타입에는 readonly 속성이 적용되지 않습니다.
readonly 속성은 텍스트 기반 입력 필드에만 사용 가능합니다.
[placeholder]
입력 필드에 힌트나 예시 텍스트를 표시합니다. 사용자가 텍스트를 입력하면 힌트 텍스트는 사라지고, 필드가 비어 있을 때만 보입니다. checkbox,
color,
date,
datetime-local,
file,
hidden,
image,
month,
radio,
range,
reset,
submit,
time,
week
타입에는 placeholder 속성이 적용되지 않습니다.
[required]
필수 입력 필드로 지정하여, 사용자가 폼을 제출하기 전에 반드시 값을 입력하도록 강제합니다.
폼 제출 시 해당 입력 필드가 비어있으면 브라우저는 자동으로 유효성 검사를 수행하고, 사용자가 값을 입력하도록 안내 메시지를 표시합니다.
[accesskey]
접근성을 향상시키기 위해 특정 키보드 단축키를 지정합니다. 이 속성을 사용하면 사용자가 키보드로 해당 입력 필드에 빠르게 접근할 수 있습니다.
브라우저별 조합 키 :
Windows (Chrome, Edge, Firefox, Opera) : Alt + [accesskey]
Windows (Firefox) : Shift + Alt + [accesskey]
Mac (Chrome, Safari, Edge, Firefox) : Control + Option + [accesskey]
(Full screen) 버튼을 클릭하 전체 화면으로 전환한 뒤, 예제 화면 아무곳이나 클릭 후 예제를 테스트 해보세요.
[list]
list 속성은 <input> 요소에서
사용자가 입력할 수 있는 값의 목록을 제공하는 <datalist> 요소와 연결할 때 사용됩니다.
사용자는 입력 필드에서 미리 정의된 옵션을 선택하거나 직접 입력할 수 있습니다.
주의사항
폼 데이터를 서버로 제출할 때는 name 속성이 필요합니다.
name이 없으면 해당 입력 필드는 전송되지 않습니다.
비밀번호 입력 필드는 반드시 type="password"를 사용하여 보호해야 하며,
이메일, 전화번호 등의 데이터는 pattern 속성을 사용하여 검증하는 것이 좋습니다.
required 속성 사용 시 유효성 검사 필요합니다.
브라우저 기본 유효성 검사 기능을 활용할 수 있지만, 추가적인 JavaScript 유효성 검사가 필요할 수도 있습니다.
각 입력 필드는 목적에 맞는 type 속성을 사용해야 합니다.
예를 들어, 이메일 입력 필드에는 type="email"을, 비밀번호 입력 필드에는 type="password"를 사용해야 하며,
잘못된 타입을 사용하면 사용자 경험에 혼란을 줄 수 있습니다.
<input> 요소는 화면 읽기 소프트웨어나 키보드만 사용하는 사용자들에게도 적절하게 접근할 수 있도록 설계해야 합니다
이를 위해 label 요소와 함께 사용하고, for 속성을 정확하게 설정하여 레이블과 입력 필드를 연결해야 합니다.
또한, placeholder는 힌트 역할만 하며,
필수 입력 필드를 나타내는 데는 label과 required 속성을 사용하는 것이 좋습니다.
입력 필드의 디자인은 사용자가 쉽게 이해하고 접근할 수 있도록 직관적이어야 합니다.
placeholder 속성을 사용할 때는 힌트 텍스트가 필수 입력 필드를 대신하지 않도록 주의하고,
입력 필드의 크기와 스타일은 가독성을 높이는 방향으로 설정해야 합니다.
또한, 잘못된 입력에 대한 피드백을 제공하는 것이 중요하며,
이를 위해 :invalid, :focus, :required 등의 CSS 선택자를 활용할 수 있습니다.
UXKM Editor
UXKM Editor로 자유롭게 코드를 연습하세요. 전체 화면 코드 작성 및 코드 다운로드가 가능합니다.