폼 콘텐츠는 사용자로부터 정보를 입력받는 웹 양식(form)을 구성하는 요소들을 가리킵니다.
이러한 요소들은 사용자가 텍스트를 입력하거나 선택하고 제출하는 등의 상호 작용을 할 수 있도록 도와줍니다.
주요 폼 콘텐츠 요소로는 <input>, <select>, <textarea>,
<button>, <label> 등이 있습니다.
폼 콘텐츠 요소들을 조합하여 로그인 폼, 등록 폼, 설문조사 등 다양한 웹 양식을 만들면
사용자로부터 다양한 종류의 정보를 수집하고 처리할 수 있습니다.
input element숫자 및 범위- by. UXKM
요약 설명
<input> 요소는 사용자 입력을 받기 위한 HTML 폼 요소입니다.
다양한 type 속성을 사용해 텍스트 입력, 비밀번호 입력, 체크박스, 라디오 버튼, 파일 업로드 등 다양한 입력 형식을 제공합니다. name, value, placeholder, required
등의 속성을 활용해 입력 데이터의 특성을 정의할 수 있으며,
JavaScript와 함께 사용해 유효성 검사 및 동적 처리가 가능합니다.
요약 설명
숫자 및 범위 요소는 숫자를 입력하거나 특정 범위 내에서 값을 조정하는 입력 요소입니다. number 타입은 직접 숫자를 입력하거나 스핀 버튼을 이용해 값을 증가/감소할 수 있으며,
range 타입은 슬라이더 UI를 사용하여 값을 조절할 수 있습니다.
또한, 요소들은 양식 입력 시 숫자 검증을 용이하게 하고, 사용자의 입력을 정해진 범위 내에서 제한하는 데 유용합니다.
대표적인 타입으로
number,
range
등이 있습니다.
관련 속성
[min]선택 사항최소값 설정
사용자가 입력할 수 있는 숫자의 최소값을 설정합니다.
min 값보다 작은 값은 입력할 수 없으며, 폼 제출 시 브라우저에서 검증됩니다.
type="number"과
type="range"에서 사용할 수 있습니다.
min 값을 설정하지 않으면, type="number"에서는 최소값에 제한이 없으며, type="range"에서는 기본값이 0으로 설정됩니다.
[max]선택 사항최대값 설정
사용자가 입력할 수 있는 숫자의 최대값을 설정합니다.
max 값을 초과하는 입력이 허용되지 않으며, 폼 제출 시 브라우저에서 검증이 수행됩니다.
type="number"과
type="range"에서 사용할 수 있습니다.
max 값을 설정하지 않으면, type="number"에서는 최대값에 제한이 없으며, type="range"에서는 기본값이 100으로 설정됩니다.
[step]선택 사항값 증가/감소 단위 설정
숫자가 증가하거나 감소하는 단위를 설정합니다.
기본값은 1이며, 소수점을 포함한 값(0.1, 0.5 등)도 설정할 수 있습니다.
type="number"과
type="range"에서 사용할 수 있습니다.
step="any"를 설정하면 정수 또는 소수 값 입력이 모두 허용됩니다.
[type]별 예제
[type="number"](숫자 입력 필드)
사용자가 숫자를 입력할 수 있도록 하는 필드입니다. min, max, step 속성을 활용하여 허용되는 값의 범위와 증가 단위를 설정할 수 있으며,
브라우저에서 기본적으로 위아래 화살표 버튼을 제공하여 숫자를 조정할 수 있습니다.
또한, 사용자가 숫자가 아닌 값을 입력하려 해도 입력 필드에 반영되지 않습니다.
(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.
[type="range"](슬라이더 입력 필드)
사용자가 지정된 범위 내에서 값을 조정할 수 있도록 하는 슬라이드형 입력 필드입니다. min, max, step 속성을 활용하여 조정 가능한 값의 범위를 지정할 수 있으며,
보통 숫자 대신 그래픽적인 조작 방식이 제공됩니다.
(Full screen) 버튼을 클릭하여 전체 화면으로 예제를 확인하세요.
UXKM Editor
UXKM Editor로 자유롭게 코드를 연습하세요. 전체 화면 코드 작성 및 코드 다운로드가 가능합니다.