็ก์
Input Tag ์์ฑ (1/2) ๋ณธ๋ฌธ
๐ฆ Input Tag
์ฌ์ฉ์๋ก๋ถํฐ ๋ฐ์ดํฐ๋ฅผ ์ ๋ ฅ๋ฐ๋ ์์๋ก ๋์๊ณผ ์ ์ฝ์ ์กฐ๊ฑด์ ์ธ๋ฐํ๊ฒ ์ ์ดํ๋ค.
๐๐ปโ ๋ซ๋ ํ๊ทธ๊ฐ ์๋ ๋น ํ๊ทธ(Empty Tag)
๐ต โ<input> ํต์ฌ ์์ฑ 4๊ฐ์ง
๐ธ autofocus (์๋ ํฌ์ปค์ค)
ํ์ด์ง ๋ก๋ ์ ํด๋น ์ ๋ ฅ ์นธ์ ์ปค์๋ฅผ ์๋์ผ๋ก ์์น์ํค๋ ๊ธฐ๋ฅ.
- ์ค๋ช : ์ฌ์ฉ์๊ฐ ํ์ด์ง๋ฅผ ์ด์๋ง์ ๋ฐ๋ก ์ ๋ ฅ์ ์์ํ ์ ์๊ฒ ํ๋ค.
- ํน์ง: ํ ํ์ด์ง์ ํ๋์ ์์์๋ง ์ ์ฉ ๊ฐ๋ฅ. (๋ก๊ทธ์ธ ํ์ด์ง์ ์์ด๋ ์ ๋ ฅ์ฐฝ ๋ฑ์ ์ฃผ๋ก ์ฌ์ฉ)
๐ธ placeholder (์๋ด ๋ฌธ๊ตฌ)
์ ๋ ฅํ๊ธฐ ์ , ์ ๋ ฅ ์นธ ์์ ์๋ด ๋ฌธ๊ตฌ๋ฅผ ๋ณด์ฌ์ฃผ๋ ๊ธฐ๋ฅ.
- ์ค๋ช : ์ ๋ ฅ์ฐฝ์ ์ฉ๋๋ฅผ ์ง๊ด์ ์ผ๋ก ์ ๋ฌํ๋ฉฐ, ์ ๋ ฅ์ด ์์๋๋ฉด ์๋์ผ๋ก ์ฌ๋ผ์ง๋ค.
- ์ฃผ์: placeholder๋ ๋ณด์กฐ ์๋จ์ผ ๋ฟ, label ํ๊ทธ๋ฅผ ๋์ ํ ์ ์๋ค.
๐ธ readonly (์ฝ๊ธฐ ์ ์ฉ)
์ฌ์ฉ์๊ฐ ์ ๋ ฅ ์นธ์ ๋ด์ฉ์ ๋ณผ ์๋ ์์ง๋ง, ์์ ํ์ง ๋ชปํ๋๋ก ํ๋ ๊ธฐ๋ฅ.
- ์ค๋ช : ์๋ฒ์์ ๊ฐ์ ธ์จ ๊ณ ์ ๋ฐ์ดํฐ๋ฅผ ๋ณด์ฌ์ค ๋ ์ฌ์ฉํ๋ค. (์: ์ฌ์ฉ์ ID, ๊ณ ์ ๋ ์ฃผ๋ฌธ ๋ฒํธ)
- ํน์ง: ์ฌ์ฉ์๊ฐ ๋ด์ฉ์ ๊ณ ์น ์๋ ์์ง๋ง, ํผ ์ ์ถ์ ๋ฐ์ดํฐ๋ ์๋ฒ๋ก ์ ์ก๋๋ค.
๐ธ required (ํ์ ์ ๋ ฅ)
ํผ ์ ์ถ ์ ๋ฐ๋์ ์ ๋ ฅํด์ผ ํ๋ ํ๋์์ ์ง์ ํ๋ ๊ธฐ๋ฅ.
- ์ค๋ช : ์ฌ์ฉ์๊ฐ ๊ฐ์ ์ ๋ ฅํ์ง ์์ผ๋ฉด, ๋ธ๋ผ์ฐ์ ์์ ์๋์ผ๋ก ์ ์ถ์ ๋ง๋๋ค. (๊ฒฝ๊ณ ๋ฉ์์ง: ์ด ํ๋๋ฅผ ์ ๋ ฅํ์ธ์)
- ํ์ฉ: ์์ด๋, ๋น๋ฐ๋ฒํธ, ์ด๋ฉ์ผ ๋ฑ ์๋น์ค ์ด์ฉ์ ๊ผญ ํ์ํ ์ ๋ณด์ ์ฌ์ฉํ๋ค.
๐โ POINT ๐โ
โ๏ธ readonly ๋ disabled ๊ณผ ๋น์ทํด ๋ณด์ด์ง๋ง, disabled ๋ ์๋ฒ๋ก ๋ฐ์ดํฐ๊ฐ ์ ์ก๋์ง ์๋๋ค. โ๏ธ
โ๏ธ required ๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ด๋ ๊ธฐ๋ณธ์ ์ธ ์ ๋ ฅ ๊ฒ์ฆ์ ์ํํด ์ฃผ์ด ๋งค์ฐ ํจ์จ์ ์ด๋ค. โ๏ธ
โ๏ธ placeholder ๋ ๊ฐ๋จํ๊ณ ๋ช ํํ ์๋ด์ ์ ํฉํ๋ค. โ๏ธ
๐ ์ธํ ํ๊ทธ ์์ฑ ์์ฝํ ๐
| ์์ฑ๋ช | ์ญํ | ๋ฐ์ดํฐ ์์ ๊ฐ๋ฅ ์ฌ๋ถ | ์๋ฒ ์ ์ก ์ฌ๋ถ |
| autofocus | ์ปค์ ์๋ ์์น | ๊ฐ๋ฅ | ์ ์ก๋จ |
| placeholder | ์ ๋ ฅ ํํธ ํ์ | ๊ฐ๋ฅ | ์ ๋ ฅ๊ฐ ์ ์ก๋จ |
| readonly | ์ฝ๊ธฐ ์ ์ฉ์ผ๋ก ์ค์ | ๋ถ๊ฐ๋ฅ | ์ ์ก๋จ |
| required | ํ์ ์ ๋ ฅ ์ฒดํฌ | ๊ฐ๋ฅ | ์ ์ก๋จ |
โ๏ธ ์คโ์ ์์ ์ฝ๋ โ๏ธ
<form action="/update-profile" method="post">
<p>
<label for="uid">์์ด๋:</label>
<input type="text" id="uid" name="userid" value="coding_kim" readonly>
</p>
<p>
<label for="uname">์ด๋ฆ:</label>
<input type="text" id="uname" name="username"
placeholder="์ค๋ช
์ ์
๋ ฅํ์ธ์"
autofocus
required>
</p>
<p>
<label for="uemail">์ด๋ฉ์ผ:</label>
<input type="email" id="uemail" name="useremail"
placeholder="example@mail.com"
required>
</p>
<button type="submit">์์ ์๋ฃ</button>
</form>'<div>' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| Input Tag type ์์ฑ (2/2) (0) | 2026.03.11 |
|---|---|
| Form Tag ์์ฑ (2/2) (0) | 2026.03.11 |
| Form Tag ๊ตฌ์ฑ ์์ (1/2) (0) | 2026.03.11 |
| ๋ฉํฐ๋ฏธ๋์ด ํ์ผ (0) | 2026.03.10 |
| ์ด๋ฏธ์ง ํฌ๋งท (0) | 2026.03.10 |