649
No
select.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 스타일시트 -->
<style type="text/css">
ul li {
list-style:none;
margin:15px 0;
font-size:14px;
}
</style>
<script>
function dwn(){
var bar=document.getElementById("bar"),
progress=document.getElementById("progress"),
loaded=0;
var load=function(){
loaded +=5;
bar.value=loaded;
if(loaded==100){
clearInterval(dummyLoad);
}
};
var dummyLoad=setInterval(function(){
load();
}, 500);
}
</script>
</head>
<body>
<form action="select_result.jsp" method="post">
<fieldset> <!-- 폼의 테두리 -->
<legend>차량 선택</legend>
자동차를 선택하세요.
<select name="cars"> <!-- 변수명 -->
<!-- value : 서버에 전달되는 값 -->
<option value="bmw">BMW</option>
<option value="benz">BMW</option>
<option value="hyundai">현대</option>
<option value="kiz">기아</option>
</select>
<button>확인</button>
</fieldset>
</form>
<form>
<fieldset>
<legend>과 티셔츠 설문</legend>
<p>원하는 색상을 선택하세요</p>
<label>선호색상
<input type="color" value="#00ff00">
</label>
</fieldset>
</form>
<!-- progress.html -->
<ul> <!-- 번호없는 목록 -->
<li> <!-- List Item -->
<label>10초 남음</label>
<progress value="50" max="60"></progress>
</li>
</ul>
<ul>
<li> <!-- List Item -->
<label>진행률 30%</label>
<progress value="30" max="100"></progress>
</li>
</ul>
<p></p>
<input type="button" value="다운로드 시작" onClick="dwn()">
<progress id="bar" value="0" max="100">
<span id="progress"></span>
</progress>
</body>
</html>
buttonf.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript"> //자바스크립트 코드 영역
function check(){ //리턴 타입이 없음
//document 웹페이지의 루트 노드
var price =document.form1.price.value;
var amount=document.form1.amount.value;
alert("가격 : " + price + " , 수량 :"+ amount);
//alert("버튼을 눌렀습니다.") ;
//가변자료형
if(price==""){ //빈값이면
alert("가격을 입력하세요."); //경고창
document.form1.price.focus(); //입력포커스 이동
return ; //함수 종료
}
if(amount==""){
alert("수량을 입력하세요.");
document.form1.amount.focus();
return;
}
document.form1.submit(); //폼 데이터를 제출함
}
</script>
</head>
<body>
<!-- buttonf.html -->
<form action="buttonf_result.jsp" method="post" onsubmit="check()" name="form1">
가격 : <input name="price"><br>
수량 : <input name="amount" ><br>
<input type="submit" value="계산" >
<button type="button">계산</button>
</form>
</body>
</html>
- 10초 남음
- 진행률 30%
댓글 ( 4)
댓글 남기기