<!--
<form> 태그 (중요함중요중요중요중요)
1.사용자로부터 정보를 입력 받을 때 사용하는 태그
2.주용 속성
1) action : 정보를 받아서 어디에서 처리할 것인지 처리할 장소(위치,경로)를 지정
2) method : 정보를 전달하는 방식
(1) get : default,정보를 herder에 포함시켜서 보냄
정보가 노출됨(보안 처리가 안된다)
빠름(ex: 검색)
(2) post :정보를 body에 포함시켜서 보냄
정보가 보안 처리됨
느림(ex: 회원가입,로그인)
3) enctype :파일 업로드 할 때 사용
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="#">
<!-- 1.텍스트 상자 -->
<h3>텍스트 상자</h3>
일반 텍스트 상자 : <input type="text" placeholder="일반 텍스트 상자"><br> <!-- (많이쓴대) -->
비밀번호 텍스트 상자 : <input type="password" placeholder="비밀번호"><br> <!-- (많이쓴대) -->
숫자용 텍스트 상자 : <input type="number"><br> <!-- (많이쓴대) -->
이메일 텍스트 상자 : <input type="email"><br>
URL 텍스트 상자 : <input type="url"><br>
전화번호 텍스트 상자 : <input type="tel"><br>
날짜 텍스트 상자 : <input type="date"><br>
시간 텍스트 상자 : <input type="time"><br>
```
<hr>
<!-- 2.버튼 -->
일반 버튼 : <input type="button" value="전송"><br> <!-- (많이쓴대) -->
일반 버튼 : <button>전송2</button><br> <!-- (많이쓴대) -->
전송 버튼 : <input type="submit" value="전송"><br> <!-- (많이쓴대) -->
<!-- submit : 폼에 입력된 모든 테이터를 actiopn 위치로 전송-->
취소 버튼 : <input type="reset" value="취소"><br> <!-- (많이쓴대) -->
이미지 버튼 : <input type="image" src="images/bart.jpg" style="width: 200px"><br>
숨김 버튼 : <input type="hidden" name="age" value="20"><br> <!-- name속성 알고있으세요 -->
<!-- 변수 age에 값 20저장 -->
<hr>
<!-- 3.라디오 버튼 --> <!-- (많이쓴대) -->
<!-- 여러 선택 중에서 하나만 선택하는 경우에 사용(남,여) -->
<!-- 라디오 버튼 name 속성을 같은 값으로 설정 -->
<h3>라디오 버튼</h3>
<input type="radio" name="gender" value="m" checked="checked">남
<input type="radio" name="gender" value="f">여<br>
<!-- checked 옵션으로 초기 값 설정 가능 -->
<hr>
<!-- 4.체크 박스 --> <!-- (많이쓴대) -->
<!-- 여러 선택 중에서 자유롭게 선택하는 경우에 사용(취미 등) -->
<!-- 체크 박스는 name 속성을 같은 값으로 설정 -->
<h3>체크 박스</h3>
<input type="checkbox" name="hoddies" value="영화">영화
<input type="checkbox" name="hoddies" value="음악">음악
<input type="checkbox" name="hoddies" value="게임">게임<br>
<hr>
<!-- 5.필드 셋 --> <!-- (많이쓴대) -->
<h3>필드 셋</h3>
<fieldset>
<legend>지역</legend> <!-- 필드셋의 제목은 legend> -->
<input type="checkbox" name="region" value="강남">강남<br>
<input type="checkbox" name="region" value="강동">강동<br>
<input type="checkbox" name="region" value="강서">강서<br>
<input type="checkbox" name="region" value="강북">강북<br>
</fieldset>
<!-- 6.textarea -->
<!-- 많은 양의 텍스트를 처리할 때 사용 -->
<!-- 속성 (행 : row, 열 : cols) -->
<h3>textarea</h3>
<textarea rows="10" cols="100" placeholder="자기소개 1000자 입력" style="resize:none"></textarea>
<!-- 엔터 치지마세요 앞에 공백이 생김</textarea> -->
<hr>
<!-- 7.목록 상자(선택만 가능) --> <!-- (많이쓴대) -->
<!-- <select> 태그로 목록을 만들고, <option> 태그로 값을 추가 -->
<h3>목록 상자</h3>
<select name="addr1">
<option value="seoul">서울</option>
<option value="gyeonggi">경기</option>
<option value="incheon">인천</option>
</select>
<select name="addr2" size="4" multiple="multiple">
<option value="강남">강남</option>
<option value="강동">강동</option>
<option value="강서">강서</option>
<option value="강북">강북</option>
</select>
<hr>
<!-- 8.콤보 상자(목록상자 + 직접입력) -->
<h3>콤보 상자</h3>
<input type="text" list="animals">
<datalist id="animals">
<option value="개">개</option>
<option value="고양이">고양이</option>
<option value="앵무새">앵무새</option>
<option value="햄스터">햄스터</option>
<option value="고슴도치">고슴도치</option>
</datalist>
<!-- 9.기타 -->
<!-- 진행 바 : 전체 100중 50진행상태 -->
50진행 : <progress value="50" max="100"></progress><br>
<!-- 색상 표 -->
색상 표 : <input type="color"><br>
<!-- 범위 바 : 0~100사이 10단위로 표시 -->
범위 : <input type="range" min="0" max="100" step="10"><br>
<!-- 파일 첨부 --> <!-- (많이쓴대) -->
첨부 파일 :<input type="file">
</form>
```
</body>
</html>
