코밍이의 하루
[HTML5] 기타 다양한 폼 요소들 본문
1. 개발 환경
| 구분 | 내용 |
| 사용 언어 | HTML5, CSS3 |
| 개발환경 | Visual Studio Code |
| 참고 도서 | [Do it] HTML5 + CSS3 웹 표준의 정석 |
| 웹브라우저 | Chrome |
2. 주요 폼 요소 태그
1) <button> 태그
- 폼을 전송하거나 리셋하기 위한 버튼 삽입
| 기본형 |
| <button [type="submit | reset | button"]> 내용 </button> |
- <button> 태그의 속성
| 속성 | 설명 |
| submit | - 폼을 서버로 전송 - <button type="submit">전송하기</button>과 같이 사용 |
| reset | - 폼에 입력한 모든 내용 초기화 - <button type="reset">다시 쓰기</button>과 같이 사용 |
| button | - 버튼 형태만 만들 뿐 자체 기능 없음 - <button type="button">주소 입력</button>과 같이 사용 |
2) <output> 태그
- 입력하는 값이 계산 결과라는 것을 브라우저에게 알려줌
| 기본형 |
| <output [속성="속성 값"]> 내용 </output> |
3) <progress> 태그
- 작업 진행 상태를 나타낼 때 사용
| 기본형 |
| <progress values="값" [max="값"]></progress> |
- <progress> 태그 속성
| 속성 | 설명 |
| value | - 작업 진행 상태를 나타내며 부동 소수저 표현 - 값은 0보다 크거나 같고 max 값보다 작거나 같아야 함 - max값이 없는 경우 1.0보다 작아야 함 |
| max | - 작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점 표현 - 값은 0보다 커야 함 |
4) <meter> 태그
- 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용
- 지정된 버위 내에서 해당 값이 어느 정도 차지하고 있는지 표현
- <meter> 태그 속성
| 속성 | 설명 |
| min,max | - 범위의 최솟값과 최댓값을 나타냄 - 값을 정하지 않으면 0과1로 간주 |
| value | 범위 내에서 차지하는 값을 나타냄 |
| low | "이 정도면 낮다." 라고 할 정도의 값 지정 |
| high | "이 정도면 높다." 라고 할 정도의 값 지정 |
| optimum | - "이 정도면 적당하다." 라고 할 정도의 값 지정 - optimum값이 high보다 크다면 value 값이 클수록 좋음 - optimum 값이 low보다 작다면 value 값이 작을수록 좋음 |
3. 소스 코드 및 실행 화면
- button-css.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>웹 폼</title>
<style>
.subm{ /* 버튼 스타일 */
display:block; /* 블록 레벨 요소 */
background-color:#fff; /* 배경색 */
border:1px solid #dedede; /* 테두리 */
cursor:pointer; /* 마우스 포인터 */
padding:5px 10px 6px 7px; /* 패딩 */
}
.subm img{ /* 버튼 내 왼쪽 이미지 */
border:0; /* 테두리 없음*/
padding:0; /* 패딩 없음 */
width:16px; /* 가로 크기 */
height:16px; /* 세로 크기 */
}
.subm:hover{ /* 버튼 위로 마우스 포인터 올렸을 때 스타일 */
background-color:#e6efc2; /* 배경색 */
border:1px solid #c6d880; /* 테두리 */
color:#529215; /* 글자색 */
}
</style>
</head>
<body>
<form>
<button type="submit" class="subm">
<img src="images/tick.png" alt=""> 전송하기
</button>
</form>
</body>
</html>
- output.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>웹 폼</title>
</head>
<body>
<form oninput="result.value=parseInt(num1.value)+parseInt(num2.value)">
<input type="number" name="num1" value="0">
+<input type="number" name="num2" value="0">
=<output name="result" for="num"></output>
</form>
</body>
</html>
- progress.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 웹 폼</title>
<style>
body {
background-color:#fff;
}
ul li{
list-style:none;
margin: 15px 0;
font-size:14px;
}
</style>
</head>
<body>
<ul>
<li>
<label>10초 남음</label>
<!-- 전체 60초 중 50초 진행 -->
<progress value="50" max="60"> </progress>
</li>
<li>
<label>진행률 30%</label>
<!-- 전체 100 중 30만큼 진행 -->
<progress value="30" max="100"></progress>
</li>
</ul>
</body>
</html>
- meter.html
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title> 웹 폼</title>
<style>
body {
background-color:#fff;
}
ul li{
list-style:none;
margin: 15px 0;
font-size:14px;
}
</style>
</head>
<body>
<ul>
<li>
<label>점유율 0.8 </label>
<!-- 전체 크기 1을 기준으로 0.8만큼 차지합니다 -->
<meter value="0.8"></meter>
</li>
<li>
<label>사용량 64%</label>
<!-- 전체 100 중에서 64만큼 차지합니다 -->
<meter min="0" max="100" value="64"></meter>
</li>
<li>
<label>트래픽 초과</label>
<!-- 전체 크기는 1024~10240까지인데 높다고 설정한 8192보다 현재 값 9216이 더 큽니다 -->
<meter min="1024" max="10240" low="2048" high="8192" value="9216"></meter>
</li>
<li>
<label>적절한 트래픽</label>
<!-- 전체 1 중에서 현재 0.5를 차지하고 있으며 적정도를 0.8로 설정했습니다 -->
<meter value="0.5" optimum="0.8"></meter>
</li>
</ul>
</body>
</html>
'웹언어 공부 > HTML5' 카테고리의 다른 글
| [HTML5] 여러 데이터 나열해 보여 주기 (0) | 2021.08.26 |
|---|---|
| [HTML5] <input> 태그의 다양한 속성 (0) | 2021.08.26 |
| [HTML5] 사용자 입력을 위한 <input> 태그 (0) | 2021.08.19 |
| [HTML5] 폼 만들기 (0) | 2021.08.19 |
| [HTML5] SVG 이미지 (0) | 2021.08.16 |
'웹언어 공부/HTML5' Related Articles
more
