HTML Form Controls

웹 입력 도구 가이드사용자에게 값을 받고, 결과를 보여주는 기본 요소

성격이 비슷한 것끼리 묶어 정리했습니다. 각 항목은 정식 명칭(한글·영문), 한 줄 설명, 바로 만져 볼 수 있는 예제와 코드로 구성됩니다.

01

텍스트 입력Text Entry Controls

키보드로 값을 직접 적는 도구.

텍스트 입력 필드<input>

Text Input Field

type 속성만 바꾸면 키보드 종류와 형식 검사가 함께 달라집니다.

Live 
<label for="name">텍스트 · Text</label>
<input type="text" id="name" placeholder="홍길동">

<label for="pw">비밀번호 · Password</label>
<input type="password" id="pw" placeholder="••••••••">

<label for="mail">이메일 · Email</label>
<input type="email" id="mail" placeholder="hong@example.com">

<label for="age">숫자 · Number</label>
<input type="number" id="age" min="0" max="120" placeholder="25">
주요 type — text password email number tel url search

여러 줄 텍스트 영역<textarea>

Multiline Text Area

줄바꿈이 있는 긴 글을 받습니다. 기본적으로 크기 조절이 가능합니다.

Live 
<label for="opinion">여러 줄 텍스트 · Textarea</label>
<textarea id="opinion" rows="4"
          placeholder="자유롭게 적어주세요"></textarea>
오른쪽 아래 모서리를 끌어 높이를 바꿀 수 있습니다. 고정하려면 resize: none.

자동완성 목록<datalist>

Datalist / Autocomplete List

추천 목록을 띄우되, 목록에 없는 값도 그대로 입력할 수 있습니다.

Live 
<label for="lang">자동완성 · Datalist</label>
<input type="text" id="lang" list="langs" placeholder="J를 입력해 보세요">
<datalist id="langs">
  <option>JavaScript</option>
  <option>Java</option>
  <option>Julia</option>
  <option>Python</option>
</datalist>
02

선택 컨트롤Selection Controls

정해진 보기 중에서 값을 고르는 도구.

선택 목록<select>

Select / Drop-down List

선택지가 많을 때 목록을 접어 둡니다. <optgroup>으로 묶으면 찾기 쉬워집니다.

Live 
<select id="country">
  <option value="">선택하세요</option>
  <option>대한민국</option>
  <option>미국</option>
</select>

<select id="stack">
  <optgroup label="프론트엔드">
    <option>JavaScript</option>
    <option>TypeScript</option>
  </optgroup>
  <optgroup label="백엔드">
    <option>Python</option>
    <option>Java</option>
  </optgroup>
</select>

라디오 버튼type="radio"

Radio Button

여러 개 중 하나만 고릅니다. 같은 name을 가진 것끼리 한 묶음이 됩니다.

Live 
<label>라디오 그룹 · Radio Group</label>
<label><input type="radio" name="plan" value="free" checked> 무료</label>
<label><input type="radio" name="plan" value="personal"> 개인</label>
<label><input type="radio" name="plan" value="team"> 팀</label>
체크박스와의 차이 — 라디오는 한 번 고르면 해제할 수 없습니다. 해제가 필요하면 “선택 안 함” 항목을 넣으세요.

체크박스type="checkbox"

Checkbox

여러 개를 동시에 고르거나, 하나만 두고 켬/끔 스위치로 씁니다.

Live 
<label>체크박스 그룹 · Checkbox Group</label>
<label><input type="checkbox" name="topic" value="web" checked> 웹</label>
<label><input type="checkbox" name="topic" value="mobile"> 모바일</label>
<label><input type="checkbox" name="topic" value="ai"> AI</label>
<label><input type="checkbox" name="topic" value="security"> 보안</label>
03

값 지정 컨트롤Value Pickers

전용 UI로 숫자·날짜·색을 지정하는 도구.

범위 슬라이더type="range"

Range Slider

정확한 숫자보다 대략적인 조절이 중요한 값에 적합합니다. 현재 값은 따로 표시해 주는 것이 좋습니다.

Live
50
<label for="volume">범위 · Range</label>
<input type="range" id="volume" min="0" max="100" value="50" step="1">
<output for="volume">50</output>

색상 선택기type="color"

Color Picker

클릭하면 시스템 팔레트가 열리고, 값은 #RRGGBB 형식으로 전달됩니다.

Live
#2545f5
<label for="color">색상 · Color</label>
<input type="color" id="color" value="#2545f5">

날짜·시간 선택기type="date"

Date & Time Picker

브라우저가 달력·시계 UI를 직접 제공합니다.

Live 
<label for="d">날짜 · Date</label>
<input type="date" id="d">

<label for="t">시간 · Time</label>
<input type="time" id="t">

<label for="dt">날짜+시간 · Datetime-local</label>
<input type="datetime-local" id="dt">
관련 type — date time datetime-local month week
04

파일 및 실행 컨트롤File & Action Controls

자료를 올리고 동작을 일으키는 도구.

파일 선택기type="file"

File Upload Control

accept으로 형식을 제한하고, multiple을 붙이면 여러 개를 한 번에 올립니다.

Live 
<label for="upload">파일 · File</label>
<input type="file" id="upload" accept="image/*" multiple>

버튼<button>

Button

한 화면의 주요 동작은 하나만 강조합니다. 이름은 눌렀을 때 일어나는 일 그대로 적습니다.

Live 
<button type="submit">저장하기</button>
<button type="button">취소</button>
<button type="button" disabled>처리 중</button>
type 값 — submit 제출 · reset 초기화 · button 일반 동작
05

출력 요소Output Elements

입력이 아니라 상태를 표시하는 요소.

진행 표시줄<progress>

Progress Bar

끝이 정해진 작업이 얼마나 진행됐는지 보여 줍니다.

Live
70%
<label for="up">진행률 · Progress</label>
<progress id="up" value="70" max="100">70%</progress>

계측 표시기<meter>

Meter / Gauge

정해진 범위 안의 현재 수치를 보여 주며, 구간에 따라 색이 바뀝니다.

Live
82%
<label for="disk">계측값 · Meter</label>
<meter id="disk" value="82" min="0" max="100"
       low="60" high="80" optimum="30">82%</meter>
low / high / optimum으로 좋음·주의·경고 구간을 정의합니다.
06

종합 예제Complete Example

앞의 도구를 하나의 <form>으로 묶은 설문 양식입니다.

입력 양식<form>

Form

왼쪽에서 값을 바꾸면 오른쪽 코드가 그대로 대응합니다.

Live

전체 코드survey.html

Source

필수 값은 required, 서버 주소는 action으로 지정합니다.

<form action="/survey" method="post">
  <label for="n">텍스트 · Text</label>
  <input type="text" id="n" name="name" required>

  <label for="e">이메일 · Email</label>
  <input type="email" id="e" name="email">

  <label for="ag">선택 목록 · Select</label>
  <select id="ag" name="age">
    <option>10대</option>
    <option selected>20대</option>
    <option>30대</option>
    <option>40대 이상</option>
  </select>

  <label for="sc">범위 · Range</label>
  <input type="range" id="sc" name="score" min="1" max="10" value="8">

  <label>라디오 그룹 · Radio Group</label>
  <label><input type="radio" name="rec" value="yes" checked> 추천함</label>
  <label><input type="radio" name="rec" value="soso"> 보통</label>
  <label><input type="radio" name="rec" value="no"> 추천 안 함</label>

  <label for="cm">여러 줄 텍스트 · Textarea</label>
  <textarea id="cm" name="comment" rows="4"></textarea>

  <button type="submit">설문 제출</button>
  <button type="reset">지우기</button>
</form>
07

부록 · 명칭 대조표Appendix: Name Reference

태그와 한글·영문 정식 명칭을 한눈에 대조합니다.

태그 / Tag한글 명칭영문 명칭
<input type="text">텍스트 입력 필드Text Input Field
<textarea>여러 줄 텍스트 영역Multiline Text Area
<datalist>자동완성 목록Datalist
<select>선택 목록Drop-down List
<optgroup>옵션 그룹Option Group
<input type="radio">라디오 버튼Radio Button
<input type="checkbox">체크박스Checkbox
<input type="range">범위 슬라이더Range Slider
<input type="date">날짜 선택기Date Picker
<input type="color">색상 선택기Color Picker
<input type="file">파일 선택기File Upload Control
<button>버튼Button
<progress>진행 표시줄Progress Bar
<meter>계측 표시기Meter / Gauge
<form>입력 양식Form