λ³Έλ¬Έ λ°”λ‘œκ°€κΈ°
Mark Up/HTML

[HTML5]HTML form μ™„λ²½ κ°€μ΄λ“œ: form κ΄€λ ¨ νƒœκ·Έ, ν•„μˆ˜ 속성뢀터 κ³ κΈ‰ ν™œμš©κΉŒμ§€

by YJ Dev 2024. 5. 22.
728x90
λ°˜μ‘ν˜•
SMALL

HTML 폼은 μ‚¬μš©μž μž…λ ₯을 μ„œλ²„λ‘œ μ „λ‹¬ν•˜λŠ” μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ˜ 핡심 μš”μ†Œμž…λ‹ˆλ‹€. 이번 ν¬μŠ€νŒ…μ—μ„œλŠ” form νƒœκ·Έμ™€ κ΄€λ ¨λœ λ‹€μ–‘ν•œ 속성과 νƒœκ·Έλ₯Ό μ’…ν•©μ μœΌλ‘œ μ΄ν•΄ν•˜κ³  ν™œμš©ν•΄ λ³΄κ² μŠ΅λ‹ˆλ‹€.

form νƒœκ·Έ

form νƒœκ·ΈπŸŽ

form νƒœκ·ΈλŠ” μ‚¬μš©μž μž…λ ₯을 μ„œλ²„λ‘œ 보내기 μœ„ν•œ μ»¨ν…Œμ΄λ„ˆμž…λ‹ˆλ‹€.

form νƒœκ·Έ κΈ°λ³Έ 문법

<form action="/submit" method="post">
    <!-- 폼 μš”μ†Œλ“€ -->
</form>

form νƒœκ·Έμ˜ μ£Όμš” 속성

  • action 속성: 데이터λ₯Ό 보낼 URL을 μ§€μ •ν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, <form action="/submit" method="post">λŠ” 데이터λ₯Ό /submit 경둜둜 λ³΄λƒ…λ‹ˆλ‹€.
  • method 속성: 데이터λ₯Ό μ „μ†‘ν•˜λŠ” 방법을 μ§€μ •ν•©λ‹ˆλ‹€. 두 가지 μ£Όμš” 값이 μžˆμŠ΅λ‹ˆλ‹€.
    • GET: URL에 데이터가 ν¬ν•¨λ˜μ–΄ μ „μ†‘λ©λ‹ˆλ‹€. 주둜 데이터λ₯Ό κ°€μ Έμ˜¬ λ•Œ μ‚¬μš©λ˜λ©°, 길이가 μ œν•œμ μž…λ‹ˆλ‹€.
    • POST: 데이터가 본문에 ν¬ν•¨λ˜μ–΄ μ „μ†‘λ©λ‹ˆλ‹€. 주둜 데이터λ₯Ό μ œμΆœν•˜κ±°λ‚˜ μ €μž₯ν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€.

input νƒœκ·Έμ™€ μ£Όμš” μ†μ„±βœ¨

input νƒœκ·ΈλŠ” HTML formμ—μ„œ μ‚¬μš©μž μž…λ ₯을 λ°›κΈ° μœ„ν•΄ μ‚¬μš©λ˜λŠ” κ°€μž₯ μ€‘μš”ν•œ νƒœκ·Έ 쀑 ν•˜λ‚˜μž…λ‹ˆλ‹€. λ‹€μ–‘ν•œ μœ ν˜•μ˜ μž…λ ₯ ν•„λ“œλ₯Ό 생성할 수 있으며, 각 μœ ν˜•λ§ˆλ‹€ κ³ μœ ν•œ 속성과 κΈ°λŠ₯이 μžˆμŠ΅λ‹ˆλ‹€.

input νƒœκ·Έ κΈ°λ³Έ 문법

<input type="text" name="username" placeholder="Enter your username">

input νƒœκ·Έ 속성

input νƒœκ·Έμ—λŠ” type, name, value 속성이 있으며, 이 쀑 type 속성은 ν•„μˆ˜λ‘œ μ‚¬μš©ν•΄μ•Ό ν•©λ‹ˆλ‹€.

  • name 속성: name 속성은 폼 컨트둀의 이름을 μ§€μ •ν•©λ‹ˆλ‹€. μ„œλ²„ μΈ‘μ—μ„œ 이 이름을 μ‚¬μš©ν•˜μ—¬ μ‚¬μš©μžκ°€ μ œμΆœν•œ 데이터λ₯Ό μ‹λ³„ν•©λ‹ˆλ‹€. 이것은 μΌμ’…μ˜ ν‚€ κ°’μœΌλ‘œ, 데이터가 μ„œλ²„λ‘œ 전솑될 λ•Œ 이λ₯Ό μ‹λ³„ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. λ˜ν•œ λ ˆμ΄λΈ”(<label>)κ³Ό μ—°κ²°ν•  λ•Œ μ‚¬μš©λ˜κΈ°λ„ ν•©λ‹ˆλ‹€.
<input type="text" name="username">
  • value 속성: value 속성은 폼 컨트둀의 초기 κ°’μ΄λ‚˜ μ‚¬μš©μž μž…λ ₯ 값을 λ‚˜νƒ€λƒ…λ‹ˆλ‹€. μ‚¬μš©μžκ°€ μž…λ ₯ ν•„λ“œμ— 값을 μž…λ ₯ν•˜κ±°λ‚˜ 선택할 λ•Œ, 이 값이 폼 제좜 μ‹œ ν•¨κ»˜ μ„œλ²„λ‘œ μ „μ†‘λ©λ‹ˆλ‹€. λ²„νŠΌ 같은 경우, μ‚¬μš©μžκ°€ 클릭할 λ•Œ μ „μ†‘λ˜λŠ” κ°’μž…λ‹ˆλ‹€.
<input type="text" name="username" value="JohnDoe">
  • type 속성: type 속성은 μž…λ ₯ ν•„λ“œμ˜ μœ ν˜•μ„ μ§€μ •ν•©λ‹ˆλ‹€. 이 값에 따라 μž…λ ₯ ν•„λ“œμ˜ λ™μž‘ 및 λͺ¨μ–‘이 λ³€κ²½λ©λ‹ˆλ‹€. 일반 ν…μŠ€νŠΈ, λΉ„λ°€λ²ˆν˜Έ, 이메일, 숫자 λ“± λ‹€μ–‘ν•œ μœ ν˜•μ΄ μžˆμŠ΅λ‹ˆλ‹€.
<input type="text" name="username" value="JohnDoe">

input νƒœκ·Έ type μ†μ„±μ˜ μ’…λ₯˜

input νƒœκ·Έμ˜ type 속성은 μž…λ ₯ ν•„λ“œμ˜ μœ ν˜•μ„ μ§€μ •ν•©λ‹ˆλ‹€. λ‹€μ–‘ν•œ type 값을 톡해 μ‚¬μš©μžμ˜ λ‹€μ–‘ν•œ μž…λ ₯을 받을 수 있으며, 각 type 값은 κ³ μœ ν•œ κΈ°λŠ₯κ³Ό λ™μž‘μ„ κ°–μŠ΅λ‹ˆλ‹€.

type κ°’ μ„€λͺ… μ˜ˆμ‹œ
text ν•œ μ€„λ‘œ 된 일반 ν…μŠ€νŠΈ μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="text">
password λΉ„λ°€λ²ˆν˜Έ μž…λ ₯ ν•„λ“œλ₯Ό 생성
μž…λ ₯된 ν…μŠ€νŠΈκ°€ λ§ˆμŠ€ν‚Ή 됨
<input type="password">
email 이메일 μ£Όμ†Œ μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="email">
number 숫자만 μž…λ ₯ κ°€λŠ₯ν•œ ν•„λ“œλ₯Ό 생성 <input type="number">
tel μ „ν™”λ²ˆν˜Έ μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="tel">
url URL μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="url">
search 검색어 μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="search">
date λ‚ μ§œ(μ—°,μ›”,일) μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="date">
datetime-local 둜컬 λ‚ μ§œμ™€ μ‹œκ°„ μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="datetime-local">
month 연도와 μ›” μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="month">
week 연도와 μ£Ό μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="week">
time μ‹œκ°„ μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="time">
color 색상 선택 μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="color">
file 파일 μ—…λ‘œλ“œ μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="file">
checkbox μ²΄ν¬λ°•μŠ€ μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="checkbox">
radio λΌλ””μ˜€ λ²„νŠΌ μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="radio">
range μŠ¬λΌμ΄λ” μž…λ ₯ ν•„λ“œλ₯Ό 생성 (숫자 λ²”μœ„λ₯Ό 선택) <input type="range">
hidden μˆ¨κ²¨μ§„ μž…λ ₯ ν•„λ“œλ₯Ό 생성 <input type="hidden">
submit 폼 제좜 λ²„νŠΌμ„ 생성 <input type="submit">
reset 폼을 μ΄ˆκΈ°ν™”ν•˜λŠ” λ²„νŠΌμ„ 생성 <input type="reset">
button 일반 λ²„νŠΌμ„ 생성 <input type="button">
image 이미지λ₯Ό ν΄λ¦­ν•˜μ—¬ 폼을 μ œμΆœν•  수 μžˆλŠ” λ²„νŠΌμ„ 생성 <input type="image" src="submit.png" alt="Submit">

input νƒœκ·Έμ˜ type 속성 예제

β–Ά ν…μŠ€νŠΈ μž…λ ₯

<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username">


β–Ά λΉ„λ°€λ²ˆν˜Έ μž…λ ₯

<label for="password">Password:</label>
<input type="password" id="password" name="password">


β–Άμ΄λ©”μΌμž…λ ₯

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="example@example.com">


β–Άμˆ«μžμž…λ ₯

<label for="age">Age:</label>
<input type="number" id="age" name="age" min="1" max="100">


β–Άμ „ν™”λ²ˆν˜Έμž…λ ₯

<label for="phone">Phone:</label>
<input type="tel" id="phone" name="phone" placeholder="123-456-7890">


β–Ά URLμž…λ ₯

<label for="website">Website:</label>
<input type="url" id="website" name="website" placeholder="https://example.com">


β–Ά κ²€μƒ‰μ–΄μž…λ ₯

<label for="search">Search:</label>
<input type="search" id="search" name="search" placeholder="Search...">


β–Ά λ‚ μ§œ μž…λ ₯

<label for="birthday">Birthday:</label>
<input type="date" id="birthday" name="birthday">


β–Ά μ‹œκ°„ μž…λ ₯

<label for="appointment">Appointment Time:</label>
<input type="time" id="appointment" name="appointment">


β–Ά 파일 μ—…λ‘œλ“œ

<label for="file">Upload a file:</label>
<input type="file" id="file" name="file">


β–Ά μ²΄ν¬λ°•μŠ€

<label for="subscribe">Subscribe to newsletter:</label>
<input type="checkbox" id="subscribe" name="subscribe" value="yes">


β–Ά λΌλ””μ˜€λ²„νŠΌ

<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label>


β–Ά λ²”μœ„ 선택

<label for="volume">Volume:</label>
<input type="range" id="volume" name="volume" min="0" max="100">


β–Ά 색상 선택

<label for="color">Choose a color:</label>
<input type="color" id="color" name="color">


β–Ά μˆ¨κ²¨μ§„ ν•„λ“œ

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

μˆ¨κ²¨μ§„ ν•„λ“œλŠ” 일반적으둜 화면에 ν‘œμ‹œλ˜μ§€ μ•Šμ§€λ§Œ, HTML μ½”λ“œμ—λŠ” μ‘΄μž¬ν•©λ‹ˆλ‹€. μ›Ή νŽ˜μ΄μ§€μ˜ μ†ŒμŠ€ μ½”λ“œλ₯Ό 보면 μˆ¨κ²¨μ§„ ν•„λ“œκ°€ ν¬ν•¨λœ 것을 λ³Ό 수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λŸ¬ν•œ ν•„λ“œλŠ” 주둜 폼 데이터λ₯Ό μ„œλ²„λ‘œ 전솑할 λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€.
μœ„ μ½”λ“œλŠ” μ‚¬μš©μžμ˜ IDλ₯Ό μ €μž₯ν•˜λŠ” μˆ¨κ²¨μ§„ ν•„λ“œλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. μ‚¬μš©μžλŠ” 이 ν•„λ“œλ₯Ό λ³Ό 수 μ—†μ§€λ§Œ, ν•΄λ‹Ή 값을 폼이 μ„œλ²„λ‘œ 제좜될 λ•Œ ν•¨κ»˜ μ „μ†‘λ©λ‹ˆλ‹€. μ΄λŸ¬ν•œ λ°©μ‹μœΌλ‘œ μ›Ή μ• ν”Œλ¦¬μΌ€μ΄μ…˜μ€ 데이터λ₯Ό μ•ˆμ „ν•˜κ²Œ μ „μ†‘ν•˜κ³  μ²˜λ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

β–Ά 제좜 λ²„νŠΌ

<input type="submit" value="Submit">


β–Ά μ΄ˆκΈ°ν™” λ²„νŠΌ

<input type="reset" value="Reset">


β–Ά 일반 λ²„νŠΌ

<input type="button" value="Click Me" onclick="alert('Button clicked!')">


▢이미지 λ²„νŠΌ

<input type="image" src="submit.png" alt="Submit">


각 input νƒ€μž…μ„ μ μ ˆν•˜κ²Œ μ‚¬μš©ν•˜μ—¬ μ‚¬μš©μž μž…λ ₯을 효과적으둜 μ²˜λ¦¬ν•  수 μžˆμŠ΅λ‹ˆλ‹€. λ‹€μ–‘ν•œ νƒ€μž…μ„ μ΄ν•΄ν•˜κ³  ν™œμš©ν•˜λ©΄ λ”μš± μœ μš©ν•˜κ³  μ‚¬μš©μž μΉœν™”μ μΈ 폼을 λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€.

label νƒœκ·ΈπŸ”–

<label> νƒœκ·ΈλŠ” HTML 폼 컨트둀과 ν•΄λ‹Ή λ ˆμ΄λΈ”(μ„€λͺ…)을 μ—°κ²°ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. 이것은 μ‚¬μš©μžκ°€ 무엇을 μž…λ ₯ν•΄μ•Ό ν•˜λŠ”μ§€ μ΄ν•΄ν•˜λŠ” 데 도움을 μ€λ‹ˆλ‹€. λ ˆμ΄λΈ”μ€ 일반적으둜 μž…λ ₯ ν•„λ“œ λ°”λ‘œ μ•žμ— ν‘œμ‹œλ˜λ©°, ν…μŠ€νŠΈλ₯Ό ν΄λ¦­ν•˜λ©΄ ν•΄λ‹Ή μž…λ ₯ ν•„λ“œκ°€ μ„ νƒλ©λ‹ˆλ‹€. μ΄λŠ” μ‚¬μš©μž κ²½ν—˜μ„ ν–₯μƒν•˜κ³  접근성을 ν–₯μƒμ‹œν‚€λŠ” 데 도움이 λ©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, μ•„λž˜μ™€ 같은 HTML μ½”λ“œμ—μ„œλŠ” "Username"μ΄λΌλŠ” λ ˆμ΄λΈ”μ΄ <input> ν•„λ“œμ— λŒ€μ‘λ©λ‹ˆλ‹€.

<label for="username">Username:</label>
<input type="text" id="username">

fieldset와 legend νƒœκ·ΈπŸŽ¨

<fieldset>κ³Ό <legend> νƒœκ·ΈλŠ” κ΄€λ ¨λœ 폼 μš”μ†Œλ“€μ„ κ·Έλ£Ήν™”ν•˜κ³  μ΄λ“€μ˜ 제λͺ©μ„ μ œκ³΅ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. 이λ₯Ό 톡해 폼의 ꡬ쑰λ₯Ό μ‘°μ§ν™”ν•˜κ³  μ‹œκ°μ μΈ κ·Έλ£Ήν™”λ₯Ό μ œκ³΅ν•˜μ—¬ μ‚¬μš©μž κ²½ν—˜μ„ ν–₯μƒμ‹œν‚€λŠ” 데 도움이 λ©λ‹ˆλ‹€.

fieldset νƒœκ·Έ

<fieldset> νƒœκ·ΈλŠ” κ΄€λ ¨λœ 폼 μ»¨νŠΈλ‘€λ“€μ„ κ·Έλ£Ήν™”ν•©λ‹ˆλ‹€. μ΄λŠ” μ—¬λŸ¬ μž…λ ₯ ν•„λ“œλ₯Ό ν•˜λ‚˜μ˜ 그룹으둜 λ¬Άμ–΄ μ‹œκ°μ μœΌλ‘œ ꡬ뢄할 수 μžˆμŠ΅λ‹ˆλ‹€. 이 그룹에 μ†ν•œ μž…λ ₯ ν•„λ“œλ“€μ€ 폼의 μ„œλ‘œ λ‹€λ₯Έ μ„Ήμ…˜μœΌλ‘œ ꡬ뢄될 수 μžˆμŠ΅λ‹ˆλ‹€.

legend νƒœκ·Έ

<legend> νƒœκ·ΈλŠ” <fieldset> 의 제λͺ©μ„ μ •μ˜ν•©λ‹ˆλ‹€. μ΄λŠ” κ·Έλ£Ήν™”λœ 폼 μ»¨νŠΈλ‘€λ“€μ˜ λͺ©μ μ΄λ‚˜ 주제λ₯Ό μ„€λͺ…ν•©λ‹ˆλ‹€. 이 제λͺ©μ€ 일반적으둜 κ·Έλ£Ή λ°•μŠ€μ˜ 상단에 ν‘œμ‹œλ˜λ©°, κ΄€λ ¨λœ μž…λ ₯ ν•„λ“œλ“€μ˜ 의미λ₯Ό λͺ…ν™•νžˆ ν•©λ‹ˆλ‹€.

fieldset, legend νƒœκ·Έ 예제

예λ₯Ό λ“€μ–΄, μ‚¬μš©μžμ˜ 개인 정보λ₯Ό μž…λ ₯ν•˜λŠ” 폼을 생각해 λ³΄κ² μŠ΅λ‹ˆλ‹€. 이름, 이메일, μ „ν™”λ²ˆν˜Έ 등을 ν¬ν•¨ν•˜λŠ” μ„Ήμ…˜μ„ <fieldset>으둜 κ·Έλ£Ήν™”ν•˜κ³  이 그룹의 제λͺ©μ„ <legend>둜 지정할 수 μžˆμŠ΅λ‹ˆλ‹€.

<fieldset>
  <legend>개인 정보</legend>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
  <br>
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
  <br>
  <label for="phone">μ „ν™”λ²ˆν˜Έ:</label>
  <input type="tel" id="phone" name="phone">
</fieldset>
개인 정보


μ΄λ ‡κ²Œ ν•˜λ©΄ "개인 정보"λΌλŠ” 제λͺ© μ•„λž˜μ— 이름, 이메일, μ „ν™”λ²ˆν˜Έ μž…λ ₯λž€μ΄ ν‘œμ‹œλ©λ‹ˆλ‹€. μ΄λŠ” 폼을 μ‘°μ§ν™”ν•˜κ³  μ‚¬μš©μžκ°€ 각 μ„Ήμ…˜μ˜ λͺ©μ μ„ μ΄ν•΄ν•˜λŠ” 데 도움을 μ€λ‹ˆλ‹€.

textarea νƒœκ·ΈπŸ“‘

<textarea> νƒœκ·ΈλŠ” μ—¬λŸ¬ μ€„μ˜ ν…μŠ€νŠΈ μž…λ ₯을 λ°›λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. μ‚¬μš©μžκ°€ ν…μŠ€νŠΈλ₯Ό μž…λ ₯ν•  수 μžˆλŠ” 닀쀑 ν–‰ μž…λ ₯ ν•„λ“œλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.
이 νƒœκ·ΈλŠ” λ‹«λŠ” νƒœκ·Έ </textarea>κ°€ μžˆμ–΄μ•Ό ν•˜λ©°, κ·Έ 사이에 초기 ν…μŠ€νŠΈλ₯Ό 포함할 수 μžˆμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ 초기 ν…μŠ€νŠΈλŠ” μ„ νƒμ‚¬ν•­μž…λ‹ˆλ‹€.

textarea νƒœκ·Έ 예제

λ‹€μŒμ€ <textarea> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ μ‚¬μš©μžκ°€ μ—¬λŸ¬ μ€„μ˜ ν…μŠ€νŠΈλ₯Ό μž…λ ₯ν•  수 μžˆλŠ” μž…λ ₯ ν•„λ“œλ₯Ό λ§Œλ“œλŠ” λ°©λ²•μž…λ‹ˆλ‹€.

<label for="message">λ©”μ‹œμ§€:</label><br>
<textarea id="message" name="message" rows="4" cols="50">
여기에 λ©”μ‹œμ§€λ₯Ό μž…λ ₯ν•˜μ„Έμš”...
</textarea>


μœ„μ˜ μ˜ˆμ œμ—μ„œ rows 및 cols 속성은 ν…μŠ€νŠΈ μ˜μ—­μ˜ ν–‰κ³Ό μ—΄μ˜ 수λ₯Ό μ •μ˜ν•©λ‹ˆλ‹€. λ˜ν•œ <textarea> νƒœκ·Έμ˜ λ‚΄μš©μ€ μ‚¬μš©μžκ°€ μž…λ ₯ν•˜κΈ° 전에 ν‘œμ‹œλ  초기 ν…μŠ€νŠΈλ₯Ό 포함할 수 μžˆμŠ΅λ‹ˆλ‹€. μ‚¬μš©μžκ°€ μž…λ ₯을 μ‹œμž‘ν•˜λ©΄ 초기 ν…μŠ€νŠΈλŠ” μ§€μ›Œμ§€κ³  μ‚¬μš©μžμ˜ μž…λ ₯이 λŒ€μ²΄λ©λ‹ˆλ‹€.

select, option, optgroup νƒœκ·Έβœ…

<select> νƒœκ·ΈλŠ” λ“œλ‘­λ‹€μš΄ λͺ©λ‘μ„ μƒμ„±ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. λͺ©λ‘μ— ν•­λͺ© ν•˜λ‚˜λ₯Ό μΆ”κ°€ν•˜λ €λ©΄ <option> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜κ³ , ν•­λͺ©λ“€μ„ 그룹으둜 λ¬Άκ³  μ‹Άλ‹€λ©΄ <optgroup> νƒœκ·Έλ₯Ό μ‚¬μš©ν•©λ‹ˆλ‹€.

select νƒœκ·Έ 속성

<select> νƒœκ·ΈλŠ” λ“œλ‘­λ‹€μš΄ ν˜•μ‹μ˜ 선택 λͺ©λ‘μ„ μ •μ˜ν•©λ‹ˆλ‹€. μ‚¬μš©μžλŠ” μ—¬λŸ¬ μ˜΅μ…˜ 쀑 ν•˜λ‚˜λ₯Ό 선택할 수 μžˆμŠ΅λ‹ˆλ‹€. 이 νƒœκ·ΈλŠ” λ‹€μŒκ³Ό 같은 속성을 κ°€μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.

  • name 속성: 폼 데이터λ₯Ό μ‹λ³„ν•˜λŠ” 데 μ‚¬μš©λ˜λŠ” 이름을 μ§€μ •ν•©λ‹ˆλ‹€.
  • id 속성: νƒœκ·Έμ˜ 고유 μ‹λ³„μžλ₯Ό μ§€μ •ν•©λ‹ˆλ‹€.
  • multiple 속성: μ—¬λŸ¬ μ˜΅μ…˜μ„ λ™μ‹œμ— 선택할 수 μžˆλ„λ‘ ν—ˆμš©ν•©λ‹ˆλ‹€. ν•˜λ‚˜μ˜ μ˜΅μ…˜μ„ μ„ νƒν•œ μƒνƒœμ—μ„œ λ‹€λ₯Έ ν•­λͺ©μ„ μ„ νƒν•˜λ €λ©΄ Windowsμ—μ„œλŠ” Ctrl ν‚€λ₯Ό λˆ„λ₯΄κ³ , macOSμ—μ„œλŠ” Cmd ν‚€λ₯Ό λˆ„λ₯΄κ³  ν΄λ¦­ν•˜λ©΄ λ©λ‹ˆλ‹€.
  • size 속성: λ“œλ‘­λ‹€μš΄ λͺ©λ‘μ— ν‘œμ‹œλ˜λŠ” ν–‰ 수λ₯Ό μ§€μ •ν•©λ‹ˆλ‹€.

option νƒœκ·Έ 속성

<option> νƒœκ·ΈλŠ” <select> νƒœκ·Έ λ‚΄μ—μ„œ 각 선택 μ˜΅μ…˜μ„ μ •μ˜ν•©λ‹ˆλ‹€. μ‚¬μš©μžλŠ” 이듀 쀑 ν•˜λ‚˜λ₯Ό 선택할 수 μžˆμŠ΅λ‹ˆλ‹€. 이 νƒœκ·ΈλŠ” λ‹€μŒκ³Ό 같은 속성을 κ°€μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.

  • value 속성: μ˜΅μ…˜μ˜ 값을 μ •μ˜ν•©λ‹ˆλ‹€. 이 값은 폼 제좜 μ‹œ μ „μ†‘λ©λ‹ˆλ‹€.
  • selected 속성: μ˜΅μ…˜μ΄ 초기 선택 μ˜΅μ…˜μœΌλ‘œ 섀정될 경우 μ‚¬μš©λ©λ‹ˆλ‹€. (λ―Έ μ„€μ • μ‹œ 첫 번째 <option> νƒœκ·Έκ°€ κΈ°λ³Έ κ°’)
  • disabled 속성: μ˜΅μ…˜μ΄ λΉ„ν™œμ„±ν™”λ˜μ–΄ 선택할 수 μ—†λŠ” 경우 μ‚¬μš©λ©λ‹ˆλ‹€.

optgroup νƒœκ·Έ 속성

<optgroup> νƒœκ·ΈλŠ” μ—¬λŸ¬ μ˜΅μ…˜μ„ κ·Έλ£Ήν™”ν•©λ‹ˆλ‹€. μ΄λŠ” 선택 λͺ©λ‘μ—μ„œ λΉ„μŠ·ν•œ μ˜΅μ…˜λ“€μ„ λ¬Άμ–΄μ„œ κ΅¬μ‘°ν™”λœ ν˜•νƒœλ‘œ ν‘œμ‹œν•  λ•Œ μ‚¬μš©λ©λ‹ˆλ‹€. <optgroup> νƒœκ·ΈλŠ” λ‹€μŒκ³Ό 같은 속성을 κ°€μ§ˆ 수 μžˆμŠ΅λ‹ˆλ‹€.

  • label 속성: 그룹의 제λͺ©μ„ μ •μ˜ν•©λ‹ˆλ‹€. <optgroup> νƒœκ·Έλ‘œ μ˜΅μ…˜μ„ κ·Έλ£Ήν™” ν•  λ•ŒλŠ” λ°˜λ“œμ‹œ label μ†μ„±μœΌλ‘œ κ·Έλ£Ήλͺ…을 지정해야 ν•©λ‹ˆλ‹€.

select νƒœκ·Έ 예제

예λ₯Ό λ“€μ–΄, μ•„λž˜λŠ” <select>, <option> 그리고 <optgroup> νƒœκ·Έλ₯Ό λͺ¨λ‘ μ‚¬μš©ν•˜μ—¬ 선택 λͺ©λ‘μ„ λ§Œλ“œλŠ” κ°„λ‹¨ν•œ μ˜ˆμ‹œμž…λ‹ˆλ‹€.

<label for="colors">μ„ ν˜Έν•˜λŠ” 색상:</label><br>
<select id="colors" name="colors" multiple size="3">
  <optgroup label="κΈ°λ³Έ 색상">
    <option value="black">κ²€μ •</option>
    <option value="white">흰색</option>
  </optgroup>
  <optgroup label="μΆ”κ°€ 색상">
    <option value="red">λΉ¨κ°•</option>
    <option value="green" selected>초둝</option>
    <option value="blue">νŒŒλž‘</option>
  </optgroup>
</select>

  • id와 name 속성은 폼 데이터λ₯Ό μ‹λ³„ν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€.
  • multiple 속성은 μ—¬λŸ¬ μ˜΅μ…˜μ„ λ™μ‹œμ— 선택할 수 μžˆλ„λ‘ ν—ˆμš©ν•˜λ©°, size 속성은 λ“œλ‘­λ‹€μš΄ λͺ©λ‘μ— ν‘œμ‹œλ˜λŠ” ν–‰ 수λ₯Ό μ§€μ •ν•©λ‹ˆλ‹€.
  • <optgroup> νƒœκ·ΈλŠ” "κΈ°λ³Έ 색상"κ³Ό "μΆ”κ°€ 색상" 두 그룹으둜 μ˜΅μ…˜λ“€μ„ κ·Έλ£Ήν™”ν•©λ‹ˆλ‹€.
  • <option> νƒœκ·ΈλŠ” 각각의 선택 μ˜΅μ…˜μ„ μ •μ˜ν•©λ‹ˆλ‹€. "초둝" μ˜΅μ…˜μ€ 초기 선택 μ˜΅μ…˜μœΌλ‘œ μ„€μ •λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

button νƒœκ·ΈπŸ‘†

λ²„νŠΌμ€ input νƒœκ·Έμ—μ„œ type 속성값을 submit, reset, button으둜 μ„€μ •ν•˜μ—¬ 생성할 수 μžˆμŠ΅λ‹ˆλ‹€. λ˜ν•œ 독립적인 button νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ μ‚¬μš©μžκ°€ 클릭할 수 μžˆλŠ” λ²„νŠΌμ„ λ§Œλ“€ 수 μžˆμŠ΅λ‹ˆλ‹€. μ΄λ•Œ button νƒœκ·Έλ„ λ§ˆμ°¬κ°€μ§€λ‘œ type 속성을 κ°€μ§‘λ‹ˆλ‹€.

button νƒœκ·Έ 속성

  • κΈ°λ³Έ λ²„νŠΌ: <button> νƒœκ·Έλ₯Ό νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ κΈ°λ³Έ λ²„νŠΌμ„ μƒμ„±ν•©λ‹ˆλ‹€. 이 λ²„νŠΌμ€ type="button"으둜 μ„€μ •λ©λ‹ˆλ‹€.
  • 폼 제좜 λ²„νŠΌ: <button> νƒœκ·Έλ₯Ό μ‚¬μš©ν•˜μ—¬ 폼을 μ œμΆœν•˜λŠ” λ²„νŠΌμ„ μƒμ„±ν•©λ‹ˆλ‹€. 이 λ²„νŠΌμ€ type="submit"으둜
  • 리셋 λ²„νŠΌ: <button> νƒœκ·Έλ₯Όμ‚¬μš©ν•˜μ—¬ 폼의 μž…λ ₯을 λ¦¬μ…‹ν•˜λŠ” λ²„νŠΌμ„ μƒμ„±ν•©λ‹ˆλ‹€. 이 λ²„νŠΌμ€ type="reset"으둜

button νƒœκ·Έ 예제

예λ₯Ό λ“€μ–΄, μ•„λž˜μ˜ HTML μ½”λ“œλŠ” μ„Έ 가지 μœ ν˜•μ˜ λ²„νŠΌμ„ μƒμ„±ν•˜λŠ” μ˜ˆμ œμž…λ‹ˆλ‹€.

<button type="button">ν΄λ¦­ν•˜μ„Έμš”</button>
<button type="submit">μ œμΆœν•˜κΈ°</button>
<button type="reset">λ‹€μ‹œ μ„€μ •</button>


μœ„μ˜ μ½”λ“œμ—μ„œ, 첫 번째 λ²„νŠΌμ€ 일반 λ²„νŠΌμœΌλ‘œ μ„€μ •λ˜μ–΄ 있고, 두 번째 λ²„νŠΌμ€ 폼을 μ œμΆœν•˜λŠ” λ²„νŠΌμœΌλ‘œ μ„€μ •λ˜μ–΄ 있으며, μ„Έ 번째 λ²„νŠΌμ€ 폼의 μž…λ ₯을 λ¦¬μ…‹ν•˜λŠ” λ²„νŠΌμœΌλ‘œ μ„€μ •λ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.

form κ΄€λ ¨ νƒœκ·Έμ˜ μΆ”κ°€ μ†μ„±πŸŒˆ

disabled 속성

disabled 속성은 μž…λ ₯ ν•„λ“œλ‚˜ λ²„νŠΌμ„ λΉ„ν™œμ„±ν™”ν•˜μ—¬ μ‚¬μš©μžκ°€ ν•΄λ‹Ή μš”μ†Œλ₯Ό μ‘°μž‘ν•  수 없도둝 λ§Œλ“­λ‹ˆλ‹€. 이 속성은 <input>, <textarea>, <select>, <button> νƒœκ·Έμ— μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, <input> νƒœκ·Έλ‚˜ <button> νƒœκ·Έμ— disabled 속성을 μΆ”κ°€ν•˜λ©΄ μ‚¬μš©μžλŠ” ν•΄λ‹Ή μš”μ†Œλ₯Ό ν΄λ¦­ν•˜κ±°λ‚˜ μˆ˜μ •ν•  수 μ—†μŠ΅λ‹ˆλ‹€.
μ•„λž˜λŠ” μž…λ ₯ ν•„λ“œλ₯Ό λΉ„ν™œμ„±ν™”ν•˜λŠ” μ½”λ“œμž…λ‹ˆλ‹€.

<input type="text" name="username" disabled>

readonly 속성

readonly 속성은 μž…λ ₯ ν•„λ“œλ₯Ό 읽기 μ „μš©μœΌλ‘œ λ§Œλ“­λ‹ˆλ‹€. 즉, μ‚¬μš©μžλŠ” ν•΄λ‹Ή ν•„λ“œμ˜ 값을 읽을 수만 있고 μˆ˜μ •ν•  μˆ˜λŠ” μ—†μŠ΅λ‹ˆλ‹€. μ΄λŠ” 주둜 정보λ₯Ό ν‘œμ‹œν•˜κ³  μˆ˜μ •ν•  ν•„μš”κ°€ μ—†λŠ” κ²½μš°μ— μ‚¬μš©λ©λ‹ˆλ‹€.
이 속성은 <textarea> νƒœκ·Έμ™€ <input> νƒœκ·Έμ—μ„œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. <input> νƒœκ·Έμ—μ„œλŠ” type 속성값이 text, number, search, url, email, password, tel, date, month, week, time, datetime-local일 λ•Œλ§Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
μ•„λž˜λŠ” μž…λ ₯ ν•„λ“œλ₯Ό 읽기 μ „μš©μœΌλ‘œ λ§Œλ“œλŠ” μ˜ˆμ œμž…λ‹ˆλ‹€.

<input type="text" name="email" value="example@email.com" readonly>


β–Ά disabled 속성과 readonly μ†μ„±μ˜ μ£Όμš” 차이점

νŠΉμ„± disabled readonly
μƒνƒœ μ™„μ „νžˆ λΉ„ν™œμ„±ν™” 읽기 μ „μš©
κ°’ 전솑 μ„œλ²„λ‘œ μ „μ†‘λ˜μ§€ μ•ŠμŒ μ„œλ²„λ‘œ 전솑됨
폼 제좜 제좜 μ‹œ λ¬΄μ‹œλ¨ 제좜 μ‹œ ν•¨κ»˜ 전솑됨
μ‹œκ°μ  ν‘œμ‹œ λΉ„ν™œμ„±ν™”λœ μƒνƒœλ‘œ ν‘œμ‹œ ν™œμ„±ν™”λœ μƒνƒœλ‘œ ν‘œμ‹œ
μˆ˜μ • κ°€λŠ₯ λΆˆκ°€λŠ₯ κ°€λŠ₯

maxlength 속성

maxlength 속성은 μ‚¬μš©μžκ°€ μž…λ ₯ν•  수 μžˆλŠ” μ΅œλŒ€ 길이λ₯Ό μ œν•œν•˜λŠ” 데 μ‚¬μš©λ©λ‹ˆλ‹€. μž…λ ₯ ν•„λ“œμ— μž…λ ₯될 수 μžˆλŠ” 문자 수λ₯Ό μ œν•œν•  λ•Œ μœ μš©ν•©λ‹ˆλ‹€. 예λ₯Ό λ“€μ–΄, <input type="text" maxlength="10"> λŠ” μ‚¬μš©μžκ°€ μ΅œλŒ€ 10μžκΉŒμ§€λ§Œ μž…λ ₯ν•  수 μžˆλŠ” μž…λ ₯ ν•„λ“œλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€.
이 속성은 <textarea> νƒœκ·Έμ™€ <input> νƒœκ·Έμ—μ„œ λͺ¨λ‘ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€. <input>νƒœκ·Έμ—μ„œλŠ” type 속성값이 text, number, search, url,email, password,tel, date, month, week, time, datetime-local일 λ•Œλ§Œ μ‚¬μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
μ•„λž˜ μ½”λ“œλŠ” μ‚¬μš©μžκ°€ μž…λ ₯ν•  수 μžˆλŠ” μ΅œλŒ€ 길이λ₯Ό 8자둜 μ œν•œν•œ μž…λ ₯ ν•„λ“œλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. μ‚¬μš©μžκ°€ 이 ν•„λ“œμ— μž…λ ₯ν•˜λŠ” 값은 μ΅œλŒ€ 8μžκΉŒμ§€λ§Œ ν—ˆμš©λ˜λ©°, κ·Έ μ΄μƒμ˜ κΈ€μžλ₯Ό μž…λ ₯ν•˜λ©΄ μž…λ ₯이 μžλ™μœΌλ‘œ μ œν•œλ©λ‹ˆλ‹€.

<input type="text" name="password" maxlength="8">

checked 속성

checked 속성은 input νƒœκ·Έμ˜ type속성 값이 checkboxλ‚˜ radio λ²„νŠΌμ„ 기본적으둜 μ„ νƒλœ μƒνƒœλ‘œ ν‘œμ‹œν•©λ‹ˆλ‹€. μ‚¬μš©μžλŠ” 선택을 ν•΄μ œν•  수 μžˆμ§€λ§Œ, νŽ˜μ΄μ§€κ°€ λ‘œλ“œλ  λ•Œ 기본적으둜 μ„ νƒλ˜μ–΄ μžˆμŠ΅λ‹ˆλ‹€.
μ•„λž˜λŠ” μ²΄ν¬λ°•μŠ€λ₯Ό 기본적으둜 μ„ νƒλœ μƒνƒœλ‘œ λ§Œλ“œλŠ” μ˜ˆμ œμž…λ‹ˆλ‹€.

<input type="checkbox" name="subscribe" checked> κ΅¬λ…ν•˜κΈ°

κ΅¬λ…ν•˜κΈ°

placeholder 속성

이 속성은 μž…λ ₯ ν•„λ“œμ— μ‚¬μš©μžκ°€ μž…λ ₯ν•΄μ•Ό ν•˜λŠ” μ˜ˆμƒ κ°’ λ˜λŠ” μ„€λͺ…을 μ œκ³΅ν•©λ‹ˆλ‹€. μž…λ ₯ ν•„λ“œκ°€ λΉ„μ–΄ μžˆμ„ λ•Œ ν‘œμ‹œλ˜λ©°, μ‚¬μš©μžκ°€ μž…λ ₯을 μ‹œμž‘ν•˜λ©΄ μžλ™μœΌλ‘œ μ‚¬λΌμ§‘λ‹ˆλ‹€.
μ•„λž˜ μ˜ˆμ œλŠ” 검색어λ₯Ό μž…λ ₯ν•  수 μžˆλŠ” ν…μŠ€νŠΈ ν•„λ“œλ₯Ό μƒμ„±ν•©λ‹ˆλ‹€. 이 μž…λ ₯ ν•„λ“œλŠ” μ‚¬μš©μžμ—κ²Œ "검색어λ₯Ό μž…λ ₯ν•˜μ„Έμš”"λΌλŠ” 힌트λ₯Ό μ œκ³΅ν•©λ‹ˆλ‹€. μ‚¬μš©μžκ°€ μž…λ ₯ ν•„λ“œλ₯Ό ν΄λ¦­ν•˜λ©΄ νžŒνŠΈκ°€ μžλ™μœΌλ‘œ 사라지고, κ·Έ μžλ¦¬μ— 검색어λ₯Ό μž…λ ₯ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

<input type="text" name="search" placeholder="검색어λ₯Ό μž…λ ₯ν•˜μ„Έμš”">

form 예제πŸͺ‚

νšŒμ›κ°€μž… 폼 예제

<form action="/signup" method="post">
    <fieldset>
        <legend>νšŒμ›κ°€μž…</legend>
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        
        <label for="email">Email:</label>
        <input type="email" id="email" name="email" required>
        
        <label for="country">Country:</label>
        <select id="country" name="country">
            <option value="us">United States</option>
            <option value="ca">Canada</option>
        </select>
        
        <button type="submit">Submit</button>
    </fieldset>
</form>
νšŒμ›κ°€μž…

문의 폼 예제

<form action="/contact" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" required>
    
    <label for="message">Message:</label>
    <textarea id="message" name="message" rows="4" required></textarea>
    
    <button type="submit">Send</button>
</form>

섀문쑰사 폼 예제

<form action="/survey" method="post">
    <label for="age">Age:</label>
    <input type="number" id="age" name="age">
    
    <label for="gender">Gender:</label>
    <select id="gender" name="gender">
        <option value="male">Male</option>
        <option value="female">Female</option>
    </select>
    
    <label>Preferences:</label>
    <input type="checkbox" id="newsletter" name="newsletter" value="yes">
    <label for="newsletter">Subscribe to newsletter</label>
    
    <button type="submit">Submit</button>
</form>

핡심 λ‚΄μš©πŸ‘€

input νƒœκ·Έ
select νƒœκ·Έ
form κ΄€λ ¨ 속성과 νƒœκ·Έ
input νƒœκ·Έ type 속성
input νƒœκ·Έ type 속성

728x90
λ°˜μ‘ν˜•