폼 관련 태그들 - 사용자 입력을 위한 <input> 태그 3

폼 관련 태그들 - 사용자 입력을 위한 <input> 태그 3

type="number" - 숫자 입력하기

• type="number"를 사용하면 사용자가 입력한 내용을 숫자로 인식합니다.
• type="number"라고 지정하면 입력 창에 숫자를 직접 입력하는 것이 기본이지만 브라우저에 따라 스핀 박스가 표시되기도 합니다. 스핀 박스란 입력 창 오른쪽에 작은 화살표를 표시해 화살표를 클릭하면 숫자를 증감시킬 수 있게 한 것입니다.
• 크롬이나 익스플로러 창에서는 일반 텍스트 필드처럼 표시되지만 파이어폭스에서는 스핀 박스로 표시됩니다.

 

기본형 : <input type="number" [속성="속성 값"]>

 

스핀박스 예제

주문 개수 : 개

 

<div class="exam1" style="width: 300px; height: 30px; border: 2px solid pink; padding: 15px">
    <b>주문 개수 :</b> <input type="number" min="1" max="10" value="1">개   
</div>

type="range" - 슬라이드 막대로 숫자 지정하기

• type="range"는 슬라이드 막대를 움직여 숫자 값을 입력하게 합니다.
• 오페라 미니를 제외한 대부분의 모바일 브라우저와 인터넷 익스플로러10 이상의 데스크톱 브라우저에서 지원합니다.
• 브라우저마다 클릭해 움직이는 슬라이더는 다른 모습으로 나타냅니다.

슬라이드 막대 예제

주문 개수 : 개

 

<div class="exma2" style="width: 300px; height: 30px; border: 2px solid pink; padding: 15px">
    <b>주문 개수 :</b> <input type="range" min="1" max="10" value="1">개
</div>

type="number"필드와 type="range"필드에서 사용할 수 있는 속성

속 성	설 명
min	필드에 입력할 수 있는 최솟값을 지정합니다. type="range"일 때 기본 최솟값은 0입니다.
max	필드에 입력할 수 있는 최댓값을 지정합니다. type="range"일 때 기본 최댓값은 100입니다.
step	짝수나 홀수 등 특정 숫자로 제한하려고 할 때 숫자 간격을 지정할 수 있습니다. 기본 값은 1이며 생략할 수 있습니다.
value	필드에 표시할 초기값입니다.

type="radio", type="checkbox" - 라디오 버튼과 체크박스 넣기

• 라디오 버튼과 체크박스는 여러 항목 중 원하는 항목을 선택할 때 사용하는 폼 요소입니다.
• 이때 한개만 선택하게 할 경우 라디오 버튼을 사용하고, 두 개 이상 여러 가지를 선택해도 될 경우 체크박스를 사용합니다.
• 라디오 버튼에서는 하나의 항목만 선택할 수 있으므로 이미 선택된 항목이 있을 경우, 다른 항목을 선택하면 기존 선택한 항목은 취소됩니다.
• 체크박스는 두 개 이상의 항목도 선택할 수 있다는 점만 빼면 라디오 버튼과 사용법이 비슷합니다.

 

속 성	설 명
name	라디오 버튼이나 체크박스가 여러 개 있을 경우, 서버의 폼 프로그램에서 라디오 버튼이나 체크박스를 구분하기 위해 이름을 지정합니다. 라디오 버튼은 여러 개 중에서 하나만 선택하는 것이기 때문에 관련 있는 그룹끼리는 name 속성 값을 똑같이 만듭니다.
value	선택한 라디오 버튼이나 체크박스를 서버로 알려 줄 때 넘길 값을 지정합니다. 이 값은 영문값이거나 숫자여야 하며 필수 속성입니다.
checked	라디오 버튼의 항목들은 처음에 아무 것도 선택되지 않은 상태로 화면에 표시되는데 기본으로 선택해 놓을 항목이 있다면 checked 속성을 사용합니다.

좋아하는 색

좋아하는 색을 선택해 주세요 (1가지만 가능)

파란색 빨간색 노란색

 

좋아하는 과일

좋아하는 과일을 선택해 주세요 (복수 선택 가능)

사과 바나나 포도

<div class="exam3" style="width: 400px; height: 100px; border: 2px solid pink; padding: 20px;">
    <fiedlset>
        <legend><b>좋아하는 색</b></legend>
        <p>좋아하는 색을 선택해 주세요 (1가지만 가능)</p>
        <label><input type="radio" name="color" value="blue">파란색</label>
        <label><input type="radio" name="color" value="red">빨간색</label>
        <label><input type="radio" name="color" value="yellow">노란색</label>       
    </fiedlset>
</div><br>

<div class="exam4" style="width: 400px; height: 100px; border: 2px solid pink; padding: 20px;">
    <fiedlset>
        <legend><b>좋아하는 과일</b></legend>
        <p>좋아하는 과일을 선택해 주세요 (복수 선택 가능)</p>
        <label><input type="checkbox" name="fruit1" value="apple">사과</label>
        <label><input type="checkbox" name="fruit2" value="banana">바나나</label>
        <label><input type="checkbox" name="fruit3" value="grape">포도</label>       
    </fiedlset>
</div>

 

 

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