폼 관련 태그들 - 기타 다양한 폼 요소

폼 관련 태그들 - 기타 다양한 폼 요소들

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

• <button> 태그를 사용하여 폼을 전송하거나 리셋하기 위한 버튼을 삽입할 수 있습니다.
• <button> 태그의 type 속성은 버튼이 활성화되었을 때 어떤 동작을 할지 지정합니다.
• 선택할 수 있는 값은 submit, reset, button 중 하나이고 지정하지 않으면 submit로 간주합니다.
• 웹 문서에서의 버튼은 <input type="submit"처럼 <input> 태그를 이용해 삽입할 수도 있고 <button>을 이용해 삽입할 수도 있습니다. 차이점이라면 <button> 태그는 태그 이름에서 그 역할을 알 수 있기 때문에 화면 낭독기에서 이 태그를 만나면 이 부분에 버튼이 있다는 것을 정확히 전달할 수 있다는 것입니다.
• 또한 <button> 태그를 사용한 버튼에는 콘텐츠를 포함할 수 있기 때문에 아이콘을 추가할 수도 있고 CSS를 이용해 원하는 형태로 꾸밀 수도 있습니다

 

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

 

속성 값	설 명
submit	폼을 서버로 전송합니다. <button type="submit">전송하기</button>과 같이 사용합니다.
reset	폼에 입력한 모든 내용을 초기화시킵니다. <button type="reset">다시 쓰기</button>과 같이 사용합니다.
button	버튼 형태만 만들 뿐 자체 기능은 없습니다. <button type="button">주소 입력</button>과 같이 사용합니다.

 

 

<div class="exam1" style="width: 500px; height: 50px; border: 2px solid pink; padding: 20px;">
    <input type="submit" value="전송하기">  
    <button type="submit">전송하기</button>
</div>

2. <output> 태그 - 계산 결과

• <output> 태그는 입력하는 값이 계산 결과라는 것을 브라우저에게 알려 줍니다.
• <output> 태그를 사용한다고 해서 브라우저 화면에 다르게 표시되는 것은 아니지만 <output> 태그로 묶인 부분이 일반 텍스트가 아니라 계산의 결과 값이라는 점을 웹 브라우저가 정확히 인식할 수 있습니다.

 

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

 

+ =

 

<div class="exam2" style="width: 500px; height: 50px; border: 2px solid pink; padding: 20px;">
    <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>
</div><br>

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

• <progress> 태그는 작업 진행 상태를 나타낼 때 사용하는 태그입니다.
• 작업 시작을 0으로 하고 최종 완료를 최댓값으로 해 얼마나 진척되었는지 숫자로 표현합니다. 이때 사용하는 값에는 특별한 단위가 없고 단위를 표시하지도 않습니다.

 

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

 

속 성	설 명
value	작업 진행 상태를 나타내며 부동 소수점으로 표현합니다. 이 값은 0보다 크거나 같고 max 값보다 작거나 같아야 합니다. 만약 max 값이 지정되지 않았다면 이 값은 1.0보다 작아야 합니다.
max	작업이 완료되려면 얼마나 많은 작업을 해야 하는지 부동 소수점으로 표현합니다. 이 값은 0보다 커야 합니다.

 

• 10초 남음

• 진행률 40%

 

<div class="exam3" style="width: 500px; height: 100px; border: 2px solid pink; padding: 20px;">
    <ul>
        <li>
            <label>10초 남음</label>
            <!-- 전체 60초 중 50초 진행 -->
            <progress value="50" max="60"></progress>
        </li>
    </ul>
    <ul>
        <li>
            <label>진행률 40%</label>
            <progress value="40" max="100"></progress>
        </li>
    </ul>
</div>

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

• <meter> 태그는 <progress> 태그를 사용했을 때와 결과 화면이 거의 같기 때문에 혼동되기도 하지만 진행상황을 나타내는 <progress> 태그와 달리 <meter> 태그는 전체 크기 중에서 얼마나 차지하는지를 표현할 때 사용합니다.
• <meter> 태그는 작업이 진행된다는 의미보다 하드 디스크 전체 용량 중 형태 얼마나 사용하고 있는지를 나타내는 사용량이나 전체 유권자 중에서 몇 명이 투표했는지를 보여 주는 투표율처럼 지정된 범위 내에서 해당 값이 어느 정도 차지하고 있는지를 표현합니다.

 

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

 

• 점유율 0.7
• 사용량 58%
• 트래픽 초과
• 적절한 트래픽

 

 

 

 

참고 : HTML5 + CSS3 웹 표준의 정석