HTML5에 추가된 input 태그 type 타입 에 대한 설명 2

2019. 4. 10. 19:00프로그래밍/HTML

안녕하세요 아이굿입니다.

어제에 이어 HTML5에 추가된 input태그 type에 대해 알려드리려고합니다.

 

 type=”number” 일 때

 number 타입은 숫자를 입력 받기 위한 값입니다. 텍스트는 아예 입력이 되지 않으며 숫자를 입력하는 순간 입력란 끝에 스핀 컨트롤이 생깁니다. 화살표를 클릭해서 값을 올리거나 내릴 수 있습니다

<form id="frm" action="action.jsp">
    <p>숫자입력 :</p>
    <div><input type="number" id="usernumber" name="usernumber"></div>
    <div><input type="submit" value="전송"></div>
</form>

 

 숫자를 입력 받을 수 있는 input 을 만들게 되면 유효성 체크를 위해 범위 입력을 받아야 되는 경우가 있습니다. input  type  number 로 주고 min, max, step, value 속성으로 범위와 초기값, 증가 값을 세팅할 수 있습니다. 범위는 min, max 로 하고 스핀 컨트롤을 클릭했을 때 증가 값은 step 으로 합니다. 그리고 화면에 나타나는 초기값은 value 에 입력하시면 됩니다. 범위를 벗어나면 더 이상 숫자는 변화가 없습니다

<form id="frm" action="action.jsp">
    <p>숫자입력 :</p>
    <div><input type="number"
                id="usernumber" name="usernumber"
                value="100"
                step="10"
                min="0"
                max="1000"></div>
    <div><input type="submit" value="전송"></div>
</form>

 

 type=”range” 일 때

 range 타입은 범위에 있는 숫자를 슬라이드로 입력할 수 있는 형태로 만들어 줍니다. 슬라이드로 선택한 숫자는 텍스트로 표현되지 않으므로 javascript 를 이용해서 표시해 주셔야 합니다. 그리고 범위와 증가 값은 number 유형과 동일합니다. min  max 를 이용해서 범위를 지정하고 step 으로 증가 값을 세팅하시면 됩니다

<form id="frm" action="action.jsp">
    <p>범위 입력 :</p>
    <div><input type="range"
                id="userrange" name="userrange"
                value="100"
                step="10"
                min="0"
                max="1000"></div>
    <div><input type="submit" value="전송"></div>
</form>

 type=”date” 일 때

 date 타입은 날짜 형식을 입력 받을 수 있습니다. 날짜를 편리하게 선택할 수 있도록 달력창이 뜹니다. 달력 팝업창에서 화살표를 클릭해 이동하면서 날짜를 선택해 주시면 됩니다. 화면이 로딩될 때 나타나는 날짜 값은 value 속성에 입력하면 됩니다. 그림에서처럼 입력 박스 끝에는 스핀 컨트롤과 화살표 두 개가 나타나는데 스핀 컨트롤은 클릭할 때 마다 선택한 년, , 일을 증감시킬 수 있습니다. 그리고 바로 옆에 있는 화살표는 달력을 띄우는 버튼입니다

<form id="frm" action="action.jsp">
    <p>날짜 입력:</p>
    <div><input type="date" id="userdate" name="userdate"
                value="2015-10-10"></div>
    <div><input type="submit" value="전송"></div>
</form>

 type=”color” 일 때

 color 타입은 윈도우에서 제공하는 색상 선택 기본 컨트롤을 보여 줍니다. 팝업창에 나타난 색상입력 창에서 색상을 선택하시면 input 박스에 나타나게 됩니다. 기본 색상값은 value 속성에 16진수로 입력하시면 됩니다

<form id="frm" action="action.jsp">
    <p>날짜 입력:</p>
    <div><input type="color" id="usercolor" name="usercolor" value="#FFFFF"></div>
    <div><input type="submit" value="전송"></div>
</form>

 만약 선택한 색상값을 알고 싶으면 input 태그의 value 값을 가져오면 됩니다

<form id="frm" action="action.jsp">
    <p>날짜 입력:</p>
    <div><input type="color" id="usercolor" name="usercolor" value="#FFFFF"></div>
    <div><input type="submit" value="전송"> 
    <input type="button"
           onclick="alert(document.getElementById('usercolor').value);"
           value="색상값"></div>
</form>

 

 

 


출처: https://mainia.tistory.com/4326 [녹두장군 - 상상을 현실로]