<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>input 태그 예제</title>
</head>
<body>
<!-- checkbox와 radio의 차이점
- checkbox는 0개 이상 (갯수 상관없이 체크를 할 수 있는 경우)
- radio는 1개 (성별처럼 하나만 입력해야 할 경우)
- check box와 radio는 name으로 그룹을 묶음
- checkbox는 name이 동일해야 여러 항복이 같은 이름으로 전송
- radio는 name이 동일해야 여러개 중 하나만 선택 됨, 체크 박스 해제가 안됨(누르면일단 무조건 선택된 상태 유지)
-->
<form action="/day1/base6.html" method="get">
<label> <!-- radio와 같이 둘때, label로 감싸주는게 더 편함-->
<input type="radio" name="gender" value="male"> 남성
</label>
<label>
<input type="radio" name="gender" value="female"> 여성 <!-- value로 전송할 값을 넣어주기-->
</label>
<br>
<!-- color
- 색상을 선택할 때 사용
- R: 0~255, G:0~255, B:0~255
0~255(십진수) : 0~ff(16진수)
- 전송 시, 16진수 전송
#RGB
예: 빨강은 RGB(255,0,0) => #ff0000
- 전송 시, #은 %23으로 인코딩 =>전송값 : %23ff0000
-->
<input type="color" name="color"> <br>
<!--
- method, week, date, datetime-local, time은 시간과 관련된 타입
- 해당 타입 대신 datepicker라는 플러그인을 이용하여 날짜나 시간을 선택하게 함
-->
<input type="month" value="month"> <br> <!-- 년,월까지-->
<input type="week" value="week"> <br> <!-- 년, 몇주차-->
<input type="date" value="date"><br> <!-- 우리가 제일 많이쓰는 것, 년/월/일 -->
<input type="datetime-local" value="datetime"> <br> <!--년,월,일,오전/오후 현재시간 -->
<input type="time" value="time"><br> <!-- 오전/오후 현재시간-->
<!--
- email, url, tel, search
- 형식을 검사하는 기능, 형식에 맞지 않으면 안내문구가 뜸
- email : xxx@yy.zz 형태로 작성해야 함. @가 꼭 있어야 함
- url : http://xxxx.com
- search : text에다가 x버튼이 추가
-->
<input type="email" name="email" placeholder="이메일">
<input type="url" name="url" placeholder="url">
<input type="search" name="search" placeholder="검색">
<br>
<!--
- file
- 첨부파일을 추가할 때 사용
- form태그에 enctype을 multipart/form-data로 설정해야 한다
-->
<input type="file">
<br>
<!--
- image
- 이미지를 넣기 위한 속성, 이미지 태그로 대체 가능
-->
<input type="image" src="../day1/rabbit.JPG" alt="어른이"> <br>
<!--
-number
- 숫자만 입력 가능
- up버튼과 down 버튼을 이용하여 숫자를 조정 가능
-->
<input type="number"><br>
<!--
- range
- 범위를 조절할 때 사용
- min : 최소
- max : 최대
-->
1<input type="range" min="1" max="10" name="range">10 범위 <br> <!-- 1, 10을 앞뒤에 쓰니까 bar 앞뒤에 나타남-->
<!--
- hidden
- 값을 숨겨주는 속성
- 화면 구현을 할 때 사용하지 않고 백엔드 개발자가 사용하는 속성
=> 서버에서 보내준 데이터를 화면에는 안보이게 하면서 나중에 서버로 전송하기 위해 사용
-->
<input type="hidden" value="안녕" name="str">
<br>
<input type="submit" value="전송">
</form>
</body>
</html>
