λ°μν
Index νλͺ©μ ν΄λ¦νλ©΄ ν΄λΉ μμΉλ‘ μ΄λν©λλ€.
INDEX
1. <form>
2. <label>
3. <fieldset> , <legend>
4. <input>
5. <input> νκ·Έμ type
6. <input> νκ·Έμ μμ±
7. λλ‘λ€μ΄ λͺ©λ‘ λ§λ€κΈ°
8. <button> νκ·Έ
9. <meter> νκ·Έ
4. <input>
μΉμμμ νΌμ ν¬κ² μ¬μ©μκ° μ λ ₯νλ λΆλΆκ³Ό μ λ ₯ν λ΄μ©μ μλ²λ‘ 보λ΄λ λ²νΌ λΆλΆμΌλ‘ λλ μ μλ€.
μ¬μ©μκ° λ΄μ©μ μ λ ₯νλ λΆλΆμ λ§λ€ λ μ¬μ©νλ νκ·Έκ° λ°λ‘ <input>νκ·Έμ΄λ€.
<input>νκ·Έμ typeμμ±μμ μ¬μ©κ°λ₯ν μ ν
ν΄λΉ typeμμ±μ λλ₯΄λ©΄ μ΄λ
- <input type="text">
- <input type="password">
- <input type="search">
- <input type="url">
- <input type="email">
- <input type="tel">
- <input type="number">
- <input type="range">
- <input type="radio">
- <input type="checkbox">
- <input type="color">
- <input type="date">
- <input type="month">
- <input type="week">
- <input type="time">
- <input type="datetime">
- <input type="datetime-local">
- <input type="submit">
- <input type="reset">
- <input type="button">
- <input type="file">
type = "text" - ν μ€νΈ νλ λ§λ€κΈ°
<input type="text" [μμ± = "μμ± κ°"]>
<label>μμ΄λ <input name="user-id" size="10" type="text"></label>
μμ± | μ€λͺ |
name | ν μ€νΈ νλλ₯Ό κ΅¬λ³ |
size | ν μ€νΈ νλμ κΈΈμ΄ ( νλ©΄μ νμν κΈμ μ μ§μ ) |
value | ν μ€νΈ νλ μμκ° νλ©΄μ νμλ λ ν μ€νΈ νλ λΆλΆμ νμλ λ΄μ© |
maxlength | ν μ€νΈ νλμ μ λ ₯ν μ μλ μ΅λ λ¬Έμ κ°μλ₯Ό μ§μ |
type = "password" - λΉλ°λ²νΈ μ λ ₯ νλ λ§λ€κΈ°
<input type="password" [μμ± = "μμ± κ°"]>
<form>
<fieldset>
<legend>λ‘κ·ΈμΈ</legend>
<ul>
<li><label for="idin">μμ΄λ</label> <input id="idin" type="text" /></li>
</ul>
<ul>
<li><label for="pwin">λΉλ°λ²νΈ</label> <input id="pwin" type="password" /></li>
</ul>
</fieldset>
</form>
type = "search" - κ²μ μμ λ§λ€κΈ°
<input type="search" [μμ± = "μμ± κ°"]>
<form>
<fieldset>
<legend>λ‘κ·ΈμΈ</legend>
<ul>
<li><label for="idin">μμ΄λ</label> <input id="idin" type="text" /></li>
</ul>
<ul>
<li><label for="pwin">λΉλ°λ²νΈ</label> <input id="pwin" type="password" /></li>
</ul>
</fieldset>
<fieldset>
<legend>λΆνλ ν
μ€νΈ νλ</legend>
<ul>
<li><input type="search" /><input type="submit" value="κ²μ" /></li>
</ul>
</fieldset>
</form>
type = "url" - URL μ λ ₯ νλ λ§λ€κΈ°
<input type="url" [μμ± = "μμ± κ°"]>
type = "email" - μ΄λ©μΌ μ£Όμ μ λ ₯ νλ λ§λ€κΈ°
<input type="email" [μμ± = "μμ± κ°"]>
type = "tel" - μ°λ½μ² νλ λ§λ€κΈ°
<input type="tel" [μμ± = "μμ± κ°"]>
type = "number" - μ«μ μ λ ₯ νλ λ§λ€κΈ°
<input type="number" [μμ± = "μμ± κ°"]>
type = "range" - μ¬λΌμ΄λ λ§λλ‘ μ«μ μ§μ νκΈ°
<input type="range" [μμ± = "μμ± κ°"]>
type = "radio" - λΌλμ€ λ²νΌ
<input type="radio" [μμ± = "μμ± κ°"]>
type = "checkbox" - 체ν¬λ°μ€ λ§λ€κΈ°
<input type="checkbox" [μμ± = "μμ± κ°"]>
type = "color" - μμ μ ν μμ νμνκΈ°
<input type="color" [μμ± = "μμ± κ°"]>
type = "date" , type = "month" , type = "week" - λ μ§νμνκΈ°
<input type="text" [μμ± = "μμ± κ°"]>
type = "time" - μκ° μ§μ νκΈ°
<input type="time" [μμ± = "μμ± κ°"]>
type = "submit" , type = "reset" - μλ² μ μ‘ , 리μ λ²νΌ λ£κΈ°
<input type="submit" [μμ± = "μμ± κ°"]>
type = "button" - λ²νΌ λ£κΈ°
<input type="button" [μμ± = "μμ± κ°"]>
type = "file" - νμΌ μ²¨λΆ
<input type="file" [μμ± = "μμ± κ°"]>
μ λ‘λ μ¬μ© μ½λ
λ보기
<form>
<fieldset>
<legend>λ‘κ·ΈμΈ</legend>
<ul>
<li><label for="idin">μμ΄λ</label> <input id="idin" type="text" /></li>
</ul>
<p> </p>
<ul>
<li><label for="pwin">λΉλ°λ²νΈ</label> <input id="pwin" type="password" /></li>
</ul>
</fieldset>
<p> </p><p> </p>
<fieldset><legend>λΆνλ ν
μ€νΈ νλ</legend>
<ul>
<li><input type="search" /><input type="submit" value="κ²μ" /></li><p> </p><p> </p>
<p>μ΄ νλμλ λ°λμ http:// λ‘ μμνλ μ¬μ΄νΈ μ£Όμλ₯Ό μ
λ ₯ν΄μΌ ν©λλ€.</p><p> </p>
<li><label>URL μ
λ ₯ νλ <input type="url" /></label></li><p> </p><p> </p>
<p>λΈλΌμ°μ μ체μμ μ΄λ©μΌ νμμ΄ λ§λμ§ μλμΌλ‘ 체ν¬ν΄μ€λ€.</p><p> </p>
<li><label>email μ
λ ₯ νλ <input type="email" /></label></li><p> </p><p> </p>
<p>μ΄ κ°μ μ΄μ©νλ©΄ λ°λ‘ μ νλ₯Ό κ±Έ μ μλλ‘ λ³ν</p><p> </p>
<li><label>μ νλ²νΈ <input type="tel" /></label></li>
</ul>
</fieldset>
<p> </p><p> </p>
<fieldset>
<legend>μ«μ κ΄λ ¨</legend>
<ul>
<li><p>μ«μ μ
λ ₯</p><input type="number" min="1" max="5" value="1"></li><p> </p><p> </p>
<li>
<label class="reg" for="member">μ°Έμ¬μΈμ<small>(μ΅λ10λͺ
)</small></label>
<input type="number" id="member" value="1" min="0" max="10" step="1">
</li>
<p> </p><p> </p>
<li>
<label class="reg" for="satis">ν¬λ§ λ¨κ³<small>(ν,μ€,μ)</small></label>
<input type="range" id="satis" value="1" min="1" max="3">
</li>
</ul>
</fieldset>
<p> </p><p> </p>
<fieldset>
<legend>μ μ² κ³Όλͺ©</legend>
<p>μ΄ λ¬μ μ μ²ν κ³Όλͺ©μ μ ννμΈμ (1κ³Όλͺ©λ§ κ°λ₯)</p>
<label><input type="radio" name="subject" value="speaking">νν</label>
<label><input type="radio" name="subject" value="grammar">λ¬Έλ²</label>
<label><input type="radio" name="subject" value="writing">μλ¬Έ</label>
</fieldset>
<p> </p><p> </p>
<fieldset>
<legend>λ©μΌλ§</legend>
<p>λ©μΌλ‘ λ°κ³ μΆμ λ΄μ€ μ£Όμ λ₯Ό μ νν΄ μ£ΌμΈμ (볡μ μ ν κ°λ₯)</p>
<label><input type="checkbox" name="mailing1" value="news">ν΄μΈ λ¨μ </label>
<label><input type="checkbox" name="mailing2" value="dialog">5λΆ νν</label>
<label><input type="checkbox" name="mailing3" value="pops">λͺ¨λνμ€</label>
</fieldset>
<p> </p><p> </p>
<fieldset>
<legend>κ³Ό ν°μ
μΈ μ€λ¬Έ</legend>
<p>μ¬ν΄ κ³Ό ν°(T)λ₯Ό λ§λ€λ €κ³ ν©λλ€. μνλ μμμ μΆμ²ν΄ μ£ΌμΈμ.</p>
<label>μ νΈμμ <input type="color" value="#00ff00"> </label>
</fieldset>
<p> </p><p> </p>
<fieldset>
<h3>date,month,week</h3>
<label>μμμΌ<input type="date" id="start"></label>
<label>μ’
λ£μΌ<input type="date" id="end"></label>
</fieldset>
<p> </p><p> </p>
<fieldset>
<h3>λκ΄μκ°μ μ ννμΈμ(μ€λ)</h3>
<label>μμ μκ°<input type="time" value="09:00" id="start1"></label>
<label>μ’
λ£ μκ°<input type="time" value="18:00" id="end1"></label>
<p> </p><p> </p>
<h3>λκ΄μκ°μ μ ννμΈμ(λ€λ₯Έλ μ§)</h3>
<label>μμ μκ°<input type="datetime-local" value="2016-03-02T09:00" id="start2"></label>
<label>μ’
λ£ μκ°<input type="datetime-local" value="2016-03-02T18:00" id="end2"></label>
</fieldset>
<p> </p><p> </p>
<form action="register.php" method="post">
<label> λ©μΌ μ£Όμ <input type="text"></label>
<input type="submit" value="μ μΆ">
<input type="reset" value="λ€μμ
λ ₯">
</form>
<p> </p><p> </p>
<form>
<input type="button" value="μ ν μ΄κΈ°" onclick="https://ljg960730.tistory.com/">
</form>
<p> </p><p> </p>
<label>νμΌ μ²¨λΆνκΈ°<input type="file" /></label>
</form>