예제 3-17. <input type="number|range">, 스핀버튼과 슬라이드바로 편리한 숫자 입력
WEB/HTML5-CONCEPT 2017. 11. 4. 18:46 |1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <title>편리한 숫자 입력</title></head> <body> <h3>홈 제어 시스템 - 온도 조절</h3> <hr> <form> // 스핀버튼으로 정교한 값 입력 : <input type="number"> 지속시간 (0.0~10.0시간) : <input type="number" min="0.0" max="10.0" step="0.5" value="3"><br><br> // 슬라이드바로 대략적인 값 입력 : <input type="range"> 온도 설정 : 10° <input type="range" min="10" max="30" list="temperatures">30° // list와 밑에 id를 똑같이 해줘야 연결이된다. <datalist id="temperatures"> <option value="12" label="Low"> // value값을 조절할수록 조절이된다. <option value="20" label="Medium"> <option value="28" label="High"> </datalist> </form> </body> </html> | cs |
'WEB > HTML5-CONCEPT' 카테고리의 다른 글
| 예제 3-19. 폼요소의 그룹핑, <fieldset> (0) | 2017.11.04 |
|---|---|
| 예제 3-18. 입력할 정보의 힌트 보여주기, 형식을 가진 텍스트 입력 (0) | 2017.11.04 |
| 예제 3-16. 생일 날짜 입력 받기 (0) | 2017.11.04 |
| 3. 폼 요소의 종류 (0) | 2017.11.04 |
| 예제 3-15. 시간 정보 입력 폼 요소 활용, 시간 정보 입력 (0) | 2017.11.04 |