HTML5+CSS3]4-5 기타 다양한 폼 요소들

https://www.youtube.com/user/easyspub

 

easyspub

✔<button>태그 : 버튼 넣기

👉기본형 : <button [type="submit | reset | button"] 내용 </button>

👉<button>태그의 type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정한다.

속성 값을 지정하지 않으면 subnit으로 간주한다.

👉<button>의 속성 값

<input>태그로 만든 버튼과 차이점은 화면 낭독기에서 이 태그를 만나면 '이 부분에는 버튼이 있다는 것;을 알고 정확히 전달할 수 있다. CSS를 이용해 원하는 형태로 꾸밀 수도 있다.

 

✔<output>태그 : 계산 결과

👉기본형 : <output [속성="속성 값"]> 내용 </output>

👉브라우저 화면에 다르게 표시되는 것은 아니지만 <output> 태그로 묶인 부분이 일반 텍스트가 아니라 계산의 결과 값이라는 점을 웹 브라우저가 정확히 인식할 수 있다.

✔<progress>태그: 진행 상태 보여주기

👉기본형 : <progress value="값" [max="값"]></progress>

👉작업 진행 상태를 나타낼 때 사용한다.

작업 시작을 0으로 하고 최종 완료를 퇴댓값으로 해 얼마나 진척되었는지 숫자로 표현한다.

사용하는 값에는 특별한 단위가 없고 단위를 표시하지도 않는다.

👉<progress>에 사용할 수 있는 속성

 

 

✔<meter>태그 : 값이 차지하는 크기 표시하기

👉기본형 : <meter value="값" [속성="속성 값"]></meter>

👉전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용한다.

하드 디스크 전체 용량 중 현재 얼마나 사용하고 있는지, 전체 유권자 중에서 몇 명이 투표했는지 등과 같이 사용한다.

👉<meter>태그에서 사용할 수 있는 속성