<HTML5+CSS3>기타 다양한 폼 요소들,버튼넣기,결과 및 진행 ,진행상태

<button>태그-버튼넣기

-<button>태그를 이용하면 문서에 버튼을 넣고 폼을 전송하거나 리셋할 수 있습니다

ex) <button type="submit" or "reset" > 내용 </button>

속성

type속성은 버튼이 활성화 되었을때 어떤 동작을 할지 지정합니다. 선택할 수 있는 값은 submit , reset , button 중 한가지 지정하지 않으면 submit으로 간주합니다.

type 속성 값

(1) submit : 폼을 제출합니다. ex) <button type="submit">전송하기 </button>과 같이 사용

(2) reset    : 폼에 입력한 내용을 모두 리셋

(3) button  : 버튼 형태만 만듭니다.

% <button>태그를 이용해 삽입한 버튼은 <input>태그를 이용해서 삽입하는 버튼과 거의 비슷한 모습을 하고 있고 용도도 비슷하다 

 - > <input type="submit" >이나 <input type="reset">, <input type="button">처럼 <input>태그를 이용해서 삽입 가능

ex)(1) <input type = "submit" value="전송하기">        == input 태그 이용

    (2) <button type="submit">전송하기</button>      == 버튼  태그 이용 

차이 : 인풋태그 보다는 버튼 태그를 이용하면 버튼을 좀더 예쁘게 꾸밀 수 있다. (콘텐츠를 포함할 수 있기 때문)

결과 : 버튼태그가 더 이쁘게 꾸밀 수 있음 비슷하긴하지만.

<output>태그- 결과 출력하기

-이 태그는 계산 결과를 표시하기 위한 것입니다. <output>태그로 묶인 부분이 일반 텍스트가 아니라 계산의 결과 값이라는 점을 웹 브라우저에서 정확히 인식할 수 있다.

ex)<output 속성="속성 값"> 내용 </output>

(300page 참고) 계산 과정 상세히 설명 됨.

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

-이 태그는 작업의 진행 상태를 나타낼 때 사용할 수 있는 태그이다. 작업 시작을 0 ,최종 완료를 최대값으로 하여 얼마나 진척되었는지 숫자로 표현하는 것이다. 이때 사용하는 값에는 특별한 단위가 없고, 그 단위가 표시되지도 않는다.

ex) <progress value="값" max="값" >  </progress>

ex) <progress value="10" max="100" > </progress>      =(10%라고 표시됨)

속성

(1) value : 작업이 얼마나 진행되었는지 나타내며, 부동 소수점으로 표현한다. 이 값은 0보다 크거나 같고, max값보다 작거나 같아야 한다. 만일 max 값이 지정되지 않았다면 이 값은 1.0보다 작아야한다.

(2) max   : 작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현한다. 이 값은 0보다 커야한다

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

-이 태그는 결과 화면만 비교했을 때는 <progress>태그를 사용했을 때와 같기 때문에 혼동되기도 한다 <meter>태그는 작업이 진행된다는 의미보다,

하드 디스크 전체 용량 중 현재 얼마나 사용하고 있는지 나타내는 사용량이나 전체 유권자 수 중에서 몇 명이나 투표했는지를 보여주는 투표율 처럼 지정된 범위 안에서 해당 값이 어느 정도 차지하고 있는지를 표현합니다.

ex) <meter value="10" max="100" > </meter>   (==10%)

% meter태그와 progress태그의 차이는, progress는 작업량의 진행상태 meter는 전체중 몇프로 사용하는지 잔여량,차지량을 나타냄

속성

(1) min,max : 범위의 최소,최댓값을 나타냄. 값을 정하지 않으면 0,1로 간주

(2) value     : 범위 안에서 차지하는 값을 나타냄. 즉 현재 값

(3) low       : "이정도면 낮다." 라고 할 정도의 범위를 지정

(4) high      : "이정도면 높다"  라고 할 정도의 범위를 지정

(5) optimum: "이정도면 적당하다" 범위 지정. optimum이 high값보다 크다면 value값이 클수록 좋고, optimum이 low값보다 작으면 value값이 작을수록 좋다.

303 page  예제 문제 참고하면 좋다.