html-examples/doc/html5/60_양식.md

양식

<form action="/submit" method="post">
  <fieldset>
    <legend>사용자 정보</legend>
    <label for="name">이름:</label>
    <input id="name" type="text" name="name" required>
    <br>
    <label for="email">이메일:</label>
    <input id="email" type="email" name="email" list="emails">
    <datalist id="emails">
      <option value="user@example.com">
      <option value="test@example.com">
    </datalist>
    <br>
    <label>좋아하는 색상:</label>
    <select name="color">
      <optgroup label="밝은 색">
        <option value="yellow">노랑</option>
      </optgroup>
    </select>
    <br>
    <label for="bio">소개:</label>
    <textarea id="bio" name="bio" rows="3"></textarea>
    <br>
    <meter value="80" max="100">80%</meter> 완료율
    <progress value="50" max="100">50%</progress> 진행률
    <br>
    <button type="submit">제출</button>
  </fieldset>
</form>

• 설명: 다양한 폼 요소를 결합한 예시.

button

속성	설명
type	버튼 유형을 지정합니다. (예: button, submit, reset)
disabled	버튼을 비활성화합니다. (Boolean 속성)

<button type="button" onclick="alert('클릭됨')">클릭</button>
<button type="submit">제출</button>

• 설명: 일반 버튼과 폼 제출 버튼.

form

속성	설명
action	폼 데이터를 제출할 URL을 지정합니다.
method	제출 방식(get, post)을 지정합니다.
enctype	파일 업로드 시 데이터 인코딩 방식을 지정합니다. (예: multipart/form-data)

<form action="/submit" method="post">
  <input type="text" name="username" required>
  <button type="submit">제출</button>
</form>

• 설명: 사용자 입력을 수집하여 서버로 전송.

fieldset

속성	설명
disabled	그룹 내 모든 입력 요소를 비활성화합니다. (Boolean 속성)

legend

<fieldset>
  <legend>개인 정보</legend>
  <label>이름: <input type="text" name="name"></label>
  <label>나이: <input type="number" name="age"></label>
</fieldset>

• 설명: 관련 입력 필드를 그룹화하고 제목 추가.

input

속성	설명
type	입력 유형을 지정합니다. (예: text, checkbox, file, email)
name	폼 제출 시 사용할 이름입니다.
value	기본값을 지정합니다.
placeholder	입력 필드에 힌트를 표시합니다.
required	필수 입력임을 지정합니다. (Boolean 속성)

required와 type 속성으로 입력 검증 가능.

input 태그는 다양한 사용자 입력을 받기 위해 사용되며, type 속성에 따라 입력 필드의 기능과 모양이 달라집니다.

타입	설명
text	한 줄의 일반 텍스트 입력을 받습니다. (기본값)
password	비밀번호 입력을 받으며, 입력값이 마스킹됩니다.
checkbox	체크박스를 제공하여 다중 선택이 가능합니다.
radio	라디오 버튼을 제공하여 단일 선택이 가능합니다.
submit	폼을 제출하는 버튼을 생성합니다.
reset	폼의 모든 입력을 초기화하는 버튼을 생성합니다.
button	기본 동작 없는 일반 버튼을 생성합니다.
file	파일 업로드를 위한 입력을 받습니다.
hidden	사용자에게 보이지 않는 숨겨진 데이터를 전송합니다.
image	이미지를 버튼으로 사용하여 폼을 제출합니다.
number	숫자 입력을 받으며, 스피너(화살표)가 포함됩니다.
range	슬라이더를 통해 숫자 범위를 선택합니다.
date	날짜(연, 월, 일)를 선택합니다.
datetime-local	날짜와 시간(연, 월, 일, 시, 분)을 선택합니다.
time	시간(시, 분)을 선택합니다.
month	연도와 월을 선택합니다.
week	연도와 주 번호를 선택합니다.
color	색상을 선택하는 컬러 피커를 제공합니다.
email	이메일 주소를 입력받으며, 유효성 검사를 지원합니다.
tel	전화번호를 입력받습니다. (형식은 브라우저마다 다름)
url	URL을 입력받으며, 유효성 검사를 지원합니다.
search	검색어를 입력받으며, 검색 UI(예: X 버튼)를 제공할 수 있습니다.

date, time 등은 오래된 브라우저에서 텍스트 입력으로 대체될 수 있습니다. email, url 등은 HTML5 유효성 검사를 지원하며, required와 조합 가능. button, image 등은 스타일링으로 더 활용 가능.

<input type="text" name="username" placeholder="사용자 이름">

• 설명: 일반 텍스트 입력 필드.

<input type="password" name="password" placeholder="비밀번호">

• 설명: 입력값이 별표(*)로 표시됨.

<input type="checkbox" name="hobby" value="reading"> 독서
<input type="checkbox" name="hobby" value="gaming"> 게임

• 설명: 여러 항목 선택 가능.

<input type="radio" name="gender" value="male"> 남성
<input type="radio" name="gender" value="female"> 여성

• 설명: 동일 name 내에서 하나만 선택 가능.

<input type="submit" value="제출하기">

• 설명: 폼 제출 버튼.

<input type="reset" value="초기화">

• 설명: 폼 입력값 초기화.

<input type="button" value="클릭" onclick="alert('버튼 클릭됨')">

• 설명: 기본 동작 없는 버튼.

<input type="file" name="upload" accept=".jpg,.png">

• 설명: 파일 선택 UI, 특정 확장자 제한.

<input type="hidden" name="user_id" value="12345">

• 설명: 사용자에게 보이지 않음, 데이터 전송용.

<input type="image" src="submit-btn.png" alt="제출 버튼">

• 설명: 이미지를 제출 버튼으로 사용.

<input type="number" name="age" min="0" max="100" value="20">

• 설명: 숫자 입력, 범위 설정 가능.

<input type="range" name="volume" min="0" max="100" value="50">

• 설명: 슬라이더로 값 선택.

<input type="date" name="birthdate">

• 설명: 날짜 선택 캘린더 제공.

<input type="datetime-local" name="meeting">

• 설명: 날짜와 시간 선택.

<input type="time" name="alarm">

• 설명: 시간 선택.

<input type="month" name="start-month">

• 설명: 연도와 월 선택.

<input type="week" name="vacation-week">

• 설명: 주 번호 선택.

<input type="color" name="favorite-color" value="#ff0000">

• 설명: 색상 선택기 제공.

<input type="email" name="email" placeholder="이메일 입력" required>

• 설명: 이메일 형식 검증.

<input type="tel" name="phone" placeholder="전화번호 입력">

• 설명: 전화번호 입력 (형식은 브라우저별로 다름).

<input type="url" name="website" placeholder="https://example.com" required>

• 설명: URL 형식 검증.

<input type="search" name="query" placeholder="검색어 입력">

• 설명: 검색 입력, 브라우저에 따라 X 버튼 포함.

label

속성	설명
for	연결할 입력 요소의 id를 지정합니다.

<label for="username">사용자 이름:</label>
<input id="username" type="text" name="username">

• 설명: 입력 필드와 연결된 레이블.

label과 for는 스크린 리더 사용자에게 중요합니다.

select

속성	설명
name	폼 제출 시 사용할 이름입니다.
multiple	다중 선택을 허용합니다. (Boolean 속성)
required	필수 선택임을 지정합니다. (Boolean 속성)

<select name="color" multiple>
  <option value="red">빨강</option>
  <option value="blue" selected>파랑</option>
</select>

• 설명: 다중 선택 가능한 드롭다운.

option

속성	설명
value	폼 제출 시 전송될 값을 지정합니다.
selected	기본 선택 상태를 지정합니다. (Boolean 속성)
disabled	옵션을 비활성화합니다. (Boolean 속성)

optgroup

속성	설명
label	그룹의 이름을 지정합니다.
disabled	그룹 내 모든 옵션을 비활성화합니다. (Boolean 속성)

<select name="food">
  <optgroup label="과일">
    <option value="apple">사과</option>
    <option value="banana">바나나</option>
  </optgroup>
  <optgroup label="야채">
    <option value="carrot">당근</option>
  </optgroup>
</select>

• 설명: 그룹화된 드롭다운 목록.

datalist

<input list="fruits" placeholder="과일을 입력하세요">
<datalist id="fruits">
  <option value="사과">
  <option value="바나나">
  <option value="오렌지">
</datalist>

• 설명: 입력 필드에 자동완성 옵션 제공.

output

속성	설명
for	출력과 관련된 입력 요소의 id를 지정합니다.

<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
  <input type="number" id="a" name="a" value="5"> +
  <input type="number" id="b" name="b" value="3"> =
  <output name="result" for="a b">8</output>
</form>

• 설명: 입력값의 합계를 실시간 표시.

output, meter, progress는 JavaScript와 함께 사용하면 효과적입니다.

meter

속성	설명
value	현재 값을 지정합니다.
min	최소값을 지정합니다. (기본값: 0)
max	최대값을 지정합니다. (기본값: 1)
low	낮은 범위의 경계를 지정합니다.
high	높은 범위의 경계를 지정합니다.

<meter min="0" max="100" low="30" high="70" value="50">50%</meter>

• 설명: 0~100 범위에서 50을 표시.

progress

속성	설명
value	현재 진행 값을 지정합니다.
max	최대값을 지정합니다. (기본값: 1)

<progress value="75" max="100">75%</progress>

• 설명: 75% 진행 상황 표시.

textarea

속성	설명
name	폼 제출 시 사용할 이름입니다.
rows	표시할 행 수를 지정합니다.
cols	표시할 열 수를 지정합니다.
placeholder	입력 필드에 힌트를 표시합니다.
required	필수 입력임을 지정합니다. (Boolean 속성)

<textarea name="message" rows="4" cols="50" placeholder="메시지를 입력하세요"></textarea>

• 설명: 여러 줄 텍스트 입력.