[HTML/HTML5] 폼에서 입력 요소 사용하기

icodebroker HTML5 2024-06-18

■ 폼에서 입력 요소를 사용하는 방법을 보여준다.

▶ test.html


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <script language="javascript">
            function onChange()
            {
                var value = document.getElementById("userRange").value;

                document.getElementById("label").innerHTML = value;
            }
        </script>
    </head>
    <body>
        <form>
            <p>텍스트 <input type="text" /></p>
            <p>이메일 <input name="userEmail" type="email" /></p>
            <p>URL <input name="userURL" type="url" /></p>
            <p>
                범위 <input id="userRange" type="range" max="10" step="0.5" value="0" onchange="onChange();" />
                <span id="label">0</span>
            </p>
            <p>숫자 <input type="number" /></p>
            <p>전화번호 <input type="tel" placeholder="02)123-4567" /></p>
            <p>일자 <input type="date" /></p>
            <p>연월 <input type="month" /></p>
            <p>주 <input type="week" /></p>
            <p>시간 <input type="time" step="0.1" /></p>
            <p>UTC 시간 <input type="datetime" /></p>
            <p>지역 시간 <input type="datetime-local" /></p>
            <input type="submit" />
        </form>
    </body>
</html>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

<!DOCTYPE html>

<html>

<head>

function onChange()

{

var value = document.getElementById("userRange").value;

document.getElementById("label").innerHTML = value;

}

</script>

</head>

<body>

<form>

<p>

범위 <input id="userRange" type="range" max="10" step="0.5" value="0" onchange="onChange();" />

</p>

</form>

</body>

</html>