HTML&CSS

form에 사용된 숫자 입력

Linda~! 2020. 3. 5. 10:38

input태그의 속성min은 최소값, max는 최대값, step은 얼만큼씩 값이 올라가고 내려가고! 아래에 화면 결과가 있어요!

 

아래에 코드가 있어요!

더보기

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <h3>숫자를 입력</h3>

    <!--숫자만 입력 가능-->

    <form>

        지속시간 : <input type="number" min="0.0" max="10.0" step="0.5"><br>

        온도 : <input type="range" min="10" max="30" list="temp">

        <datalist id="temp">

            <option value="12" label="low">

            <option value="20" label="medium">

            <option value="28" label="high">

        </datalist>

    </form>

</body>

</html>