■ 폼에서 입력 요소를 사용하는 방법을 보여준다.
▶ test.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script language="javascript"> function onChange() { var value = document.getElementById("userRange").value; document.getElementById("label").innerHTML = value; } </script> </head> <body> <form> <p>텍스트 <input type="text" /></p> <p>이메일 <input name="userEmail" type="email" /></p> <p>URL <input name="userURL" type="url" /></p> <p> 범위 <input id="userRange" type="range" max="10" step="0.5" value="0" onchange="onChange();" /> <span id="label">0</span> </p> <p>숫자 <input type="number" /></p> <p>전화번호 <input type="tel" placeholder="02)123-4567" /></p> <p>일자 <input type="date" /></p> <p>연월 <input type="month" /></p> <p>주 <input type="week" /></p> <p>시간 <input type="time" step="0.1" /></p> <p>UTC 시간 <input type="datetime" /></p> <p>지역 시간 <input type="datetime-local" /></p> <input type="submit" /> </form> </body> </html> |