앱 만들기/HTML5 study

Input type="number" 예제

나도처음이야 2023. 4. 9.

Input type="number" 예제입니다.

상하 스핀박스에 의해서 손쉽게 숫자를 입력할 수 있는 form 타입입니다.

스핀박스는 마우스를 필드에 위치시키면 자동으로 나타납니다.

기본 상태
마우스를 위치시켰을때

위 결과물은 하기 코드로 작성이 가능합니다.

    <fieldset>
    <legend>Input type="number" 예제</legend>
          <label for="quantity">수량:</label>
          <input type="number" id="quantity" name="quantity" min="1" max="100" step="1" value="1">
    </fieldset>

type ="number"  숫자 입력 폼을 설정합니다.

min 속성은 입력할 수 있는 최소값.

max 속성은 입력할 수 있는 최댓값을 지정합니다.

step 속성은 사용자가 입력할 수 있는 숫자의 증가 단위를 설정합니다.

value는 초기값을 지정합니다.

 

form 요소 중 Input type="number"에 대해서 

알아보았습니다. 감사합니다.

 

https://soo0100.tistory.com/2194

 

Input type="range" 예제

Input type="range" 예제입니다. 슬라이드 막대바가 나타나서 손쉽게 숫자를 입력할 수 있는 form 타입입니다. 위 결과 화면을 만들어 봅니다. 밝기: type ="range"는 슬라이드 바가 있는 숫자 입력 폼을 설

soo0100.tistory.com

 

반응형

'앱 만들기 > HTML5 study' 카테고리의 다른 글

Input type 날짜 입력  (2) 2023.04.11
Input type="range" 예제  (1) 2023.04.10
Input 텍스트 필드 속성  (1) 2023.04.08
div 태그 란?  (6) 2023.03.17
전송,리셋 버튼 만들기  (4) 2023.03.16

댓글