๋ฐ์ํ
Index ํญ๋ชฉ์ ํด๋ฆญํ๋ฉด ํด๋น ์์น๋ก ์ด๋ํฉ๋๋ค.
INDEX
1. <form>
2. <label>
3. <fieldset> , <legend>
4. <input>
5. <input> ํ๊ทธ์ type
6. <input> ํ๊ทธ์ ์์ฑ
7. ๋๋กญ๋ค์ด ๋ชฉ๋ก ๋ง๋ค๊ธฐ
8. <button> ํ๊ทธ
9. <meter> ํ๊ทธ
1. <form>
- ๊ธฐ๋ณธํ
<form [์์ฑ = " ์์ฑ ๊ฐ"]>
~ ์ฌ๋ฌ ํผ ์์ ~
</form>
<form action="search.php" method="post">
<input type="text" title="๊ฒ์">
<input type="submit" value="๊ฒ์">
</form>
์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ๋ด์ฉ์ search.php๋ก ๋๊ฒจ์ค๋ค.
search.php๋ ์๋ฒํ๋ก๊ทธ๋๋ฐ ์ธ์ด๋ฅผ ๊ณต๋ถํด ๋ฐ๋ก ์์ฑํด์ผ ํ๋ค.
2. <label> - ํผ ์์์ ๋ ์ด๋ธ ๋ถ์ด๊ธฐ
-๊ธฐ๋ณธํ
<label>์์ด๋<input type="text"></label>
2-1) ๋ผ๋์ค ๋ฒํผ๊ณผ ์ฒดํฌ๋ฐ์ค์์ ์ฌ์ฉํ๋ <label>ํ๊ทธ
<h3>์๊ฐ ๋ถ์ผ(๋ค์ ์ ํ ๊ฐ๋ฅ)</h3>
<ul>
<li><input type="checkbox" value="grm">๋ฌธ๋ฒ </li>
<li><input type="checkbox" value="wr">์๋ฌธ</li>
<li><input type="checkbox" value="rd">๋
ํด</li>
</ul>
<h3>์๊ฐ ๊ณผ๋ชฉ(1๊ณผ๋ชฉ๋ง ์ ํ ๊ฐ๋ฅ)</h3>
<ul>
<li>
<label><input type="radio" name="subject" value="eng">์์ดํํ</label>
</li>
<li>
<label><input type="radio" name="subject" value="ch">์ค๊ตญ์ดํํ</label>
</li>
<li>
<label><input type="radio" name="subject" value="jp">์ผ์ดํํ</label>
</li>
</ul>
์๊ฐ ๋ถ์ผ(๋ค์ ์ ํ ๊ฐ๋ฅ)
- ๋ฌธ๋ฒ
- ์๋ฌธ
- ๋ ํด
์๊ฐ ๊ณผ๋ชฉ(1๊ณผ๋ชฉ๋ง ์ ํ ๊ฐ๋ฅ)
3.<fieldset> , <legend> - ํผ ์์ ๊ทธ๋ฃน์ผ๋ก ๋ฌถ๊ธฐ
<form>
<fieldset>
<legend>๊ฐ์ธ ์ ๋ณด</legend>
<ul>
<li>
<label for="name">์ด๋ฆ</label>
<input type="text" id="name">
</li>
<li>
<label for="mail">๋ฉ์ผ ์ฃผ์</label>
<input type="text" id="mail">
</li>
</ul>
</fieldset>
<fieldset>
<legend>๋ก๊ทธ์ธ ์ ๋ณด</legend>
<ul>
<li>
<label for="id">์์ด๋</label>
<input type="text" id="id">
</li>
<li>
<label for="pwd">๋น๋ฐ๋ฒํธ</label>
<input type="text" id="pwd">
</li>
</ul>
</fieldset>
</form>