달리는 자동차
html 정리4 본문
<!--역동적으로 보이게끔 0.1초마다 1%씩 오르는 progress코드-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>progress태그</title>
<script>
cnt=0;
stopCheck=false;
setInterval(function(){
if(stopCheck == false){
document.getElementsByTagName('progress')[0].value=cnt;
document.getElementsByTagName('b')[0].innerText=cnt+'%';
cnt++;
if(cnt>100){
stopCheck=true;
document.getElementsByTagName('p')[0].innerText='업무를 모두 끝냈군요.축하합니다.'
}
}
},100);
</script>
</head>
<body>
<progress value="0" max="100"></progress><b></b>
<p></p>
</body>
</html><!--select 태그-->
<select name="서버에서 인식할 값">
<option value="실제 서버에 전송할 값">101호</option>
<option value="실제 서버에 전송할 값">102호</option>
<option value="실제 서버에 전송할 값">103호</option>
</select>
<!--select태그의 기본값 설정-->
<select name="ho">
<option value="num" selected>호 선택</option>
<option value="101">101 호</option>
<option value="102">102 호</option>
<option value="102">103 호</option>
</select>
| label label은 폼의 양식에 이름 붙이는 태그이다. 주요 속성은 for이다. ->label의 for의 값과 양식의 id 값이 같으면 연결된다. label을 클릭하면, 연결된 양식에 입력할 수 있도록 하거나 체크박스에 체크를 하거나 체크를 해제할 수 있다. <label for="연결할 태그의 id속성의 값">표시할 명칭</label> <input type="text" id="id"/> input 태그의 id속성의 값을 myid로 한다면 위의 코드는 이렇게 표현 할 수 있다. <label for="myid">input 태그 표시 명칭</label> <input type="text" id="myid"/> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>label태그</title>
</head>
<form name="해당폼의 이름" action="값을 보낼 주소" method="post">
<label for="id">글자클릭</label>
<input type="text" id="id"/>
</form>
<body>
</body>
</html>
| datalist 입력창에 텍스트를 입력 할 때 유사한 키워드 목록을 보여줄 때 datalist를 사용한다. 실사용을 위해서라면 많은 데이터가 필요하다. 아래 사용방식으로 값을 주기 보다는 데이터베이스를 조회하여 목록화 하여 사용할 수 있다. <input type="text" list="datalist태그의 id속성의 값"> <datalist id=""> <option value="옵션태그의 값">옵션태그 표시 내용</option> </datalist> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>datalist태그</title>
</head>
<body>
<h1>좋아하는 과일은?</h1>
<input type="text" list="fruit">
<datalist id="fruit">
<option value="사과">사과</option>
<option value="바나나">바나나</option>
<option value="포도">포도</option>
<option value="배">배</option> <!--list목록에는 value값이 표시된다.-->
</datalist>
</body>
</html>| progress 작업의 진행도를 나타내려면 progress태그를 사용한다. progress태그는 value속성에 값을 max속성에 최대치의 값을 입력한다. 예를 들어 현재 100%가 최대치이고 현재 30%정도 업무를 진행했다면 value 속성에 30 max속성에 100을 입력한다. <progress value="40" max="100"></progress> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>proglress 태그</title>
</head>
<body>
<progress value ="40" max="100"></progress><b>40%</b>
</body>
</html><!--역동적으로 보이게끔 0.1초마다 1%씩 오르는 progress코드-->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>progress태그</title>
<script>
cnt=0;
stopCheck=false;
setInterval(function(){
if(stopCheck == false){
document.getElementsByTagName('progress')[0].value=cnt;
document.getElementsByTagName('b')[0].innerText=cnt+'%';
cnt++;
if(cnt>100){
stopCheck=true;
document.getElementsByTagName('p')[0].innerText='업무를 모두 끝냈군요.축하합니다.'
}
}
},100);
</script>
</head>
<body>
<progress value="0" max="100"></progress><b></b>
<p></p>
</body>
</html>| range <input type="range" name="서버에서 인식할 값" min="최솟값" max="최댓값" value="기본값" step="이동단위"> <input type="range" name="userage" min="20" max="29" value="25" step="1"/> |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>input 태그의 type속성 값 range</title>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post">
<input type='range' name='userAge' min='20' max='29' value='25' step='1'/>
</form>
</body>
</html>위의 소스를 보면 선택은 할 수 있으나 정확히 숫자로 표현해 주지 않아 어떤 값을 선택했는지 알 수 없다. 콘솔에서 확인할 수 있으나 개발자 입장에서만 알 수 있는 방식이므로 자바스크립트를 사용해본다.
| document.getElementsByTagName('input')[0].value |
위의 코드는 자바스크립트의 코드이며 가장 첫번째 있는 input태그의 값을 확인하는 코드이다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>input 태그의 속성값 range</title>
<script>
document.addEventListener("DOMContentLoaded",function(){
document.getElementById('range').onchange=function(){
document.getElementById('rangeValue').innerText=this.value
}
});
</script>
</head>
<body>
<form name="해당 폼의 이름" action="값을 보낼 주소" method="post">
<input type='range'' id='range' name="usernumber" min="0" max="100" value="50" step="10"/>
</form>
<p id='rangeValue'>50</p>
</body>
</html>| date태그 -달력을 보여주는 input type의 속성이다. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>input태그의 type속성 값 date</title>
</head>
<body>
<h1>당신의 생일은?</h1>
<form name="폼이름" action="값을 보낼 주소" method="post">
<input type="date" name="userBirthday"/>
</form>
</body>
</html>
출처 : 에버디벨님의 소중한 지식을 참고하여 공부하였습니다. 에버디벨 사이트: https://www.everdevel.com/HTML
Comments