input type의 range 속성은 인터넷 브라우저마다 다르다고 하였다!
그래서 실험!!
실험 브라우저는 익스플로러, 크롬, 파이어폭스, 오페라이다.
각 브라우저 별 range는 그림을 보면 알 수 있겠다.
Internet Exploer
CHROME
FIREFOX
OPERA
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/* 닫기 버튼을 클릭하였을 때 창이 닫히도록 이벤트 설정 */
$(function() {
$(".win_close").click(function(event) {
window.close();
});
});
</script>
</head>
<body>
<h2>포상 포인트</h2>
<!-- action:데이터 보낼 때 -->
<form action="#" method="post">
<fieldset>
<legend>입력 자료</legend>
<ol>
<li>
<!-- label과 input 태그의 id와 name을 갖게 해줘야 input이 label에 속하게 된다.-->
<label for="name">이름</label>
<!-- placeholder: text입력시 '이름 입력'은 사라진다. -->
<input type="text" name="name" autofocus="autofocus" id="name" placeholder="이름 입력">
</li>
<li>
<label for="point">포인트</label>
<!-- range:지원하는 프로그램, 오페라,크롬,파이어폭스 -->
<input type="range" min="0" max="10" name="point" value="5" id="point">
</li>
<li>
<label for="email">EMail 연락처</label>
<input type="email" name="email" id="email">
</li>
<li>
<input type="submit" value="전송">
</li>
<li>
<input type="button" value="닫기" class="win_close">
</li>
</ol>
</fieldset>
</form>
</body>
</html>'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] audio와 video 예제 (0) | 2019.05.21 |
|---|---|
| [HTML5/CSS3/JQUERY] canvas (0) | 2019.05.21 |
| [HTML5/CSS3/JQUERY] HTML5에서 새로 지원하는 폼태그 경험하기 (0) | 2019.05.21 |
| [HTML5/CSS3/JQUERY] header,section,article,aside,footer (0) | 2019.05.21 |
| [HTML5/CSS3/JQUERY] 작업환경 설정, HTML5에 JQUERY 적용하기 (0) | 2019.05.21 |
