다양한 폼 요소들

<Do it! HTML5+CSS3>을 기본으로 배운 내용입니다.

1. 버튼
2. 계산 결과 보여주기
3. 진행 상태 보여주기
4. 값이 차지하는 크기 표시하기

<다양한 폼 요소들>

1. 버튼

1) 버튼 넣기 - <button>태그

폼을 전송하거나 리셋하기 위한 버튼을 삽입할 때 사용한다.

<button [type="submit 또는 reset 또는 button"]> 내용 <button>

- <button>태그와 사용하는 속성들

속성 값	설명
submit	폼을 서버로 전송한다.
reset	폼에 입력한 모든 내용을 초기화시킨다.
button	버튼 형태만 만들 뿐 자체 기능은 없다.

2) <input>태그 vs <button>태그

웹 문서에서의 버튼은 <input>과 <button>태그를 이용해 삽입할 수 있다.

하지만 <button>태그를 사용하면 <input>태그를 이용했을 때와 달리 콘텐츠를 사용할 수 있기 때문에 아이콘을 추가할 수도 있고 CSS를 이용해 원하는 형태로 꾸밀 수 있다.

2. 계산 결과 보여주기

1) <output>태그

계산 결과를 화면에 보여주어야할 때 사용하는 태그이다.

<output>태그를 사용한다고 해서 브라우저에 다르게 표시되지는 않는다.

2) 예제

<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"></out>
  </form>
</body>

3. 진행 상태 보여주기

1) <progress>태그

작업 진행 상태를 나타낼 때 사용하는 태그이다.

작업 시작을 0으로 하고 최종 완료를 최댓값으로 해 얼마나 진척되었는지 숫자로 표현한다. 사용하는 값에는 특별한 단위가 없고 단위도 표시하지 않는다.

<progress value="값" [max="값"]></progress>
//value 속성에는 작업 진행 상태를 나타낸다.

4. 값이 차지하는 크기 표시하기

1) <meter>태그

진행 상황을 나타내는 <progress>태그와 달리 <meter>태그는 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용한다.

2) <meter>태그와 사용하는 속성

속성	설명
min, max	범위의 최댓값과 최솟값을 나타낸다. 값을 정하지 않으면 0과 1로 간주한다.
value	범위 내에서 차지하는 값을 나타낸다.
low, high	"이 정도면 낮다/높다"라고 할 정도의 값을 지정한다.
optimum	- "이 정도면 적당하다"라고 할 정도의 범위를 지정한다. - optimum값이 high값보다 크다면 value값이 클수록 좋고 optimum값이 low값보다 작으면 value값이 작을수록 좋다.

3) 예제

<ul>
<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>

저작자표시 비영리 변경금지

'💻WEB FrontEnd > HTML5' 카테고리의 다른 글

시맨틱 태그 (0)	2020.08.13
폼, 드롭다운 목록 (0)	2020.07.07
하이퍼링크 태그 (0)	2020.07.06
이미지 태그 (0)	2020.07.06
텍스트, 목록, 표 관련 태그 (0)	2020.07.05

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

winnih_B

LINKS

CATEGORY

다양한 폼 요소들