<!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">
/* 자바스크립트를 통해서 액션 주기 */
var progressBar;
window.onload = function() {
/* document.getElementById 변수 값 가져오기 */
progressBar = document.getElementById("p");
//updateProgress(0); /* 초기화 */
/* 버튼을 클릭할 때 프로그래스바는 100으로 증가 */
myButton1 = document.getElementById("btn");
myButton1.onclick = function() {
updateProgress(100);
};
slider = document.getElementById("slider");
slider.onchange = function() {
document.getElementsByTagName("span")[0].textContent = slider.value;
};
};
function updateProgress(newvalue) {
progressBar.value = newvalue;
/* document.getElementsByTagName 배열 값 가져오기 */
document.getElementsByTagName("span")[1].textContent = newvalue;
}
</script>
</head>
<body>
<h2>HTML5에서 새로 지원하는 폼태그 경험하기</h2>
<!-- get방식은 주로 검색에 사용된다. -->
<form action="formproc.jsp" method="post">
<!-- required="required" 입력 필수 -->
<!-- label를 쓰면 input과 label 사이의 간격을 맞출 수 있다. -->
Name: <input type="text" name="name" placeholder="이름 입력" required="required" /><br/>
E_mail: <input type="email" placeholder="이메일 형식에 맞게 입력" name="email"/><br/>
URL: <input type="url" placeholder="해당 URL 입력"/><br/>
Number: <input type="number" name="pay" /><br/>
<!-- -->
Range: <input type="range" id="slider" min="0" max="100" step="10" value="0" name="slider"/>
<span>0</span><br/>
Tel : <input type="tel" name="tel" title="하이폰을 넣지말고 11자리의 전화번호를 입력하세요."/><br/><br/>
<input type="text" list="suggest" autofocus="autofocus" name="suggest"/>
<!-- OPERA에서만 지원 -->
<datalist id="suggest">
<option value="HTML5">
<option value="jQuery">
<option value="CSS">
</datalist>
<br/>
<progress max="100" value="0" id="p"></progress>
<span>0</span>
<!-- 프로그래스바는 한번 주면 reset이 되지 않는다. -->
<input type="button" id="btn" value="프로그래스바 실행"/>
<br/>
<input type="submit" value="send"/>
<input type="reset" value="reset"/>
</form>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 형식은 HTML, Java구문을 쓰려면 <'% 안에 쓰도록 한다. %'>-->
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String pay = request.getParameter("pay");
String email = request.getParameter("email");
String suggest = request.getParameter("suggest");
String slider = request.getParameter("slider");
String tel = request.getParameter("tel");
%>
<table style="border:2px solid green; width:300px;">
<tr>
<th width="100" bgcolor="orange">name</th>
<td><%=name%></td>
</tr>
<tr>
<th width="100" bgcolor="orange">Pay</th>
<td><%=pay%></td>
</tr>
<tr>
<th width="100" bgcolor="orange">email</th>
<td><%=email%></td>
</tr>
<tr>
<th width="100" bgcolor="orange">suggest</th>
<td><%=suggest%></td>
</tr>
<tr>
<th width="100" bgcolor="orange">slider</th>
<td><%=slider%></td>
</tr>
<tr>
<th width="100" bgcolor="orange">tel</th>
<td><%=tel%></td>
</tr>
</table>
</body>
</html>
