티스토리 뷰

[개발]프로그래밍/html5

[html5] input type = number,range,radio,checkbox - 숫자,슬라이드 막대,라디오,체크박스

좋은 블로그 2021. 2. 8. 10:58
1. 개념
input type = number,range,radio,checkbox - 숫자,슬라이드 막대,라디오,체크박스
number 타입 : 이 타입으로 설정하면 마우스 커서를 올리면 위아래로 보이는 버튼이 보이고 텍스트나 특수 문자는 입력이 안되고 오직 숫자만 입력됨
range 타입 : 슬라이드 막대를 움직여서 숫자 값을 입력함

속성

설명

min

최소값을 지정(기본 최소값 0)

max

최대값을 지정(기본 최대값 100)

step

숫자 간격을 지정(기본 값 1)

value

초기값 설정
radio 타입 : 여러개의 항목 중에서 하나의 항목을 선택하여 값을 서버에 보내줌
checkbox 타입 : 여러 개의 항목 중에서 한 개 이상의 항목을 선택하여 값을 서버에 보내줌

속성

설명

name

이름을 지정(radio:관련이 있는 항목은 같은 이름)

value

값 지정(영문이나 숫자이어야 함)

checked

기본적으로 선택해 놓고자 할 경우 설정
2. 태그
input type = number,range,radio,checkbox
html5 코드
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
<! DOCTYPE html>
<html lang = "kr" >
<head>
<meta charset = "utf-8" >
<title> 키보드와 하루 </title>
</head>
<body>
<form>
1
<label> number 필드 : </label>
<input type = "number" name = "number_value" ><br><br>
2
<label> range 필드 : </label>
<input type = "range" name = "range_value" ><br><br>
3
<label> radio 필드 </label><br>
<label><input type = "radio" name = "testrd" value = "test1" > 테스트1 </label>
<label><input type = "radio" name = "testrd" value = "test2" > 테스트2 </label>
<label><input type = "radio" name = "testrd" value = "test3" > 테스트3 </label><br><br>
4
<label> checkbox 필드 </label><br>
<label><input type = "checkbox" name = "testch1" value = "test4" > 테스트4 </label>
<label><input type = "checkbox" name = "testch2" value = "test5" > 테스트5 </label>
<label><input type = "checkbox" name = "testch3" value = "test6" > 테스트6 </label><br><br>
</form>
</body>
</html>
결과 화면
코드 설명
1
<input type = "number" ...... >
number 타입은 오로지 숫자만 입력이 됩니다.
숫자가 아닌 다른 문자를 입력하고자 할 경우에는 입력이 되지 않는 것을 확인 하실 수 있습니다.
마우스를 올리거나 숫자를 입력할 경우에 오른쪽에 위아래로 숫자를 변경할 수 있는 버튼이 나오는 것을 확인하실 수 있습니다.
2
<input type = "range" ...... >
range 타입은 슬라이드 막대 형식으로 숫자를 설정할 수 있습니다.
속성을 이용해서 min,max,step 등을 설정하면 원하는 범위 내에서 좀더 구체적으로 숫자를 설정할 수 있도록 할 수 있습니다.
3
<input type = "radio" ...... >
radio오 타입은 여러 항목 중에서 하나의 항목만을 선택하고자 할 경우에 사용합니다.
그래서 이 경우에는 radio에 선언된 name이 testrd로 모두 동일하게 설정되어 있습니다.
관련이 있는 항목끼리 묶어서 할 경우에는 name을 같은 걸로 설정해 주시면 됩니다.
4
<input type = "checkbox" ...... >
checkbox는 name이 다릅니다.
하나의 값만을 던지는 것이 아니라 여러개의 값들 중에서 하나 이상의 멀티 값을 서버로 보낼 수 있기 때문입니다.
저작자표시

'[개발]프로그래밍 > html5' 카테고리의 다른 글

[html5] input type = time,datetime-local,submit,reset - 시간,날짜와시간,전송,재작성  (0) 2021.02.10
[html5] input type = color,date,month,week - 색상,날짜,월,주  (0) 2021.02.09
[html5] input type = search,url,email,tel - 검색,웹주소,메일주소,전화번호  (0) 2021.02.05
[html5] input type(hidden,text,password) - 숨김,텍스트,비밀번호  (0) 2021.02.04
[html5] fieldset,legend - 폼에서 그룹으로 표현  (0) 2021.02.03
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday