<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>입력 양식 및 폼 관련 태그</title>
</head>
<body>
<h1>입력양식 관련 태그</h1>
<h2>input 태그</h2>
<p>
사용자로부터 값을 입력받을 수 있는 텍스트 상자 및 체크박스, 라디오버튼 등을 만들 수 있음.
</p>
아이디 : <input type="text"><br>
비밀번호 : <input type="text"><br>
성별 : <input type="radio">남   <input type="radio">여 <br>
<input type="submit" value="회원가입">
<br>
<hr>
<h1>폼 관련 태그</h1>
<p>
form태그 내에 submit 버튼 클릭 시 해당 for안에 작성된 <br>
사용자가 입력한 값들을 서버로 전송하면서 요청하는 역할 수행<br><br>
form action="" method=""<br><br>
* action 속성 : 해당 form에 사용자가 입력한 값들을 전달하면서 요청할 서버의 경로 넣어줌<br>
* method 속성 : 요청 전송 방식을 지정하는 속성(get(기본값) | post)<br>
> get 방식 : 요청 시 사용자가 입력한 값들이 url에 노출되는 방식<br>
> post 방식 : 요청 시 사용자가 입력한 값들이 url에 노출되지 않는 방식<br>
form내의 submit버튼 클릭 시 action 지정한 서버로 사용자가 입력한 값들이<br>
넘어가면서 요청됨(사용자가 입력한 값들은 key=value 세트로 전달)
</p>
<form action="search.jsp" method="get"> <!-- method="get" 기본 값-->
검색어 : <input type="text" name="keyword"> <!-- keyword는 내가 검색한 값-->
<input type="submit" value="검색">
</form>
<form action="search.jsp" method="post">
검색어 : <input type="text" name="keyword">
<input type="submit" value="검색">
</form>
<h3>fieldset : 그룹을 묶는 태그(기본적인 테두리 존재)</h3>
<h3>legend : 해당 그룹의 제목을 붙이는 태그</h3>
<form action="">
<fieldset>
<legend>제목1</legend>
입력1 : <input type="text" name="text1"><br> <!-- type="text" 기본 값, type이 없으면 기본값임-->
입력2 : <input name="text1"><br>
</fieldset>
<fieldset>
<legend>제목2</legend>
입력3 : <input name="text3"><br>
입력4 : <input name="text4"><br>
</fieldset>
</form>
<hr>
<h2>text와 관련된 input태그의 타입</h2>
<form action="">
<h3>type="text"</h3>
<p>
-한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자(기본값 또한 input type의 기본값)
</p>
아이디 : <input type="text" name="userId" placeholder="아이디를 넣으세요" maxlength="12" required>
<!-- placeholder : 상자 안에 들어가는 글자, maxlength : 최대길이, required : 반드시 입력해야되는 값. 이것은 꼭 붙여줘야 된다. -->
<h3>type="password"</h3>
<p>
- 비밀번호를 입력할 수 있는 텍스트 상자
</p>
비밀번호 : <input type="password" name="userPW" placeholder="영문, 숫자, 특수문자만 가능" maxlength="20" required>
<h3>type="search | url | email | tel"</h3>
<p>
- 겉모슾은 일반 텍스트 상자와 유사하지만 각각의 정보에 맞게 세분화된 기능 제공
</p>
검색 : <input type="search" name="q"> <!-- 상자안에 입력하면 x 표시가 뜨고 누르면 입력한 값이 삭제한다. -->
<br>
홈페이지 : <input type="url" name="homepage"> <!-- http로 시작하는지 안하는지 확인하고선, 아니면 경고 얼럿을 띄운 다음 submit한다.-->
<br>
이메일 : <input type="email" name="email"> <!-- email, tel도 홈페이지와 상동-->
<br>
전화번호 : <input type="tel" name="tel">
<br>
<input type="submit">
</form>
<hr>
<h2>숫자와 관련된 input태그의 타입</h2>
<form action="">
<h3>type="number"</h3>
<p>
- 숫자값만 작성 가능한 텍스트 상자<br>
- 스핀박스가 표시됨(스핀박스 : 위/아래 화살표 버튼)
</p>
수량 : <input type="number" name="amount" min="0" max="100" step="5" value="0">
<!-- step : 5씩 증가 step을 안넣으면 1씩 증가, value : 초기 값, value를 빼면 공란이 됨 -->
<br>
<h3>type="range"</h3>
<p>
- 슬라이드바를 통해 숫자 지정가능
</p>
점수 : <input type="range" name="score" min="0" max="100" step="10">
<br><br>
<input type="submit">
</form>
<h2>날씨 및 시간과 관련된 타입</h2>
<form action="">
<h3>type="date | month | week | time | datetime-local"</h3>
<p>연도, 월, 일 입력 받을 수 있는 텍스트 상자</p>
date : <input type="date" name="dataIn">
<p>연도, 월 입력 받을 수 있는 텍스트 상자</p>
month : <input type="month" name="monthIn">
<p>해당 년도에 몇번째 주인지 입력받을 수 있는 텍스트 상자</p>
week = <input type="week" name="weekIn">
<p>오전 | 오후 시 분 입력받을 수 있는 텍스트 상자</p>
time = <input type="time" name="timeIn">
<p>연, 월, 일, 오전/오후, 시, 분 입력받을 수 있는 텍스트 상자</p>
datetime-local : <input type="datetime-local" name="dtlin">
<input type="submit" value="서버로 전송">  <!-- 버튼의 글씨 바꾸고 싶다면 value값을 이용하면 됨 -->
<input type="reset"> <!-- reset : 초기화 -->
</form>
<hr>
<h2>라디오버튼과 체크박스 관련 input태그와 타입</h2>
<form action="text.do">
<h3>라디오버튼(type="radio")</h3>
<p>
- 여러 개의 값들 중 오로지 1개만 선택해야 할 때
- name속성값이 같아야 1개가 선택
- 서버에 value의 값이 전송됨
</p>
<fieldset>
<legend>성별</legend>
<!-- name이 같아야 된다. name이 다르면 다중선택할 수 있다. -->
<input type="radio" name="gender" value="x" id="rx"> <!-- value는 서버로 넘어가는 값 -->
<label for="rx">선택안함</label>   <!-- 글씨를 클릭하면 라디오버튼이 클릭되게 만드는 것, for을 써주고 input에 id를 써주며 똑같은 값을 써야 된다.-->
<input type="radio" name="gender" value="m" id="rm">
<label for="rm">남자</label>  
<input type="radio" name="gender" value="f" id="rf">
<label for="rf">여자</label>  
</fieldset>
<br>
<fieldset>
<legend>고향</legend>
<input type="radio" name="hometown" value="seoul" id="s">
<label for="s">서울</label> 
<input type="radio" name="hometown" value="geonggido" id="g">
<label for="g">경기</label> 
<input type="radio" name="hometown" value="andsoon" id="x">
<label for="x">기타</label> 
</fieldset>
<br><br>
<input type="submit">
<input type="reset">
</form>
<hr>
<form accept="test.do">
<h3>체크박스(type="checkbox")</h3>
<p>
- 여러개의 값들 중 여러개를 선택하고자 할 때 <br>
- 서버로 value의 값이 전송 됨
</p>
취미 :
<input type="checkbox" name="hobby" value="reading" id="reading"> <!-- 여기선 name 다른 이름으로 해도 된다. -->
<label for="reading">독서</label> 
<input type="checkbox" name="hobby" value="sports" id="sports">
<label for="sports">스포츠</label> 
<input type="checkbox" name="hobby" value="movie" id="movie">
<label for="movie">영화</label> 
<br><br>
<input type="submit">
<input type="reset">
</form>
<br>
<hr>
<form action="tese.do">
<h3>type="color"</h3>
<p>
- 색상을 선택할 수 있는 input 타입
</p>
색상 선택 : <input type="color" name="color">
<br>
<h3>type="file"</h3>
<p>
- 첨부하고자하는 파일을 선택할 수 있는 input 타입
- 파일 타입은 상관 없음(jpg, java, ...)
</p>
첨부파일 : <input type="file" name="uploardfile">
<br>
<h3>type="hidden"</h3>
<p>
- 특정값을 화면에 노출시키지 않고 서버로 전송해야하는 정보가 있을 때 사용
</p>
<input type="hidden" name="pageNum" value="3">
<br>
<h3>type="submit | reset | button"</h3>
<p>
- submit : 서버로 form안에 들어있는 모든 값들을 전송
- reset : form안에 값들을 초기화
- button : 일반버튼(사용자 정의 버튼)
</p>
<input type="submit">
<input type="reset">
<input type="button" value="일반버튼"> <!-- value값을 안넣으면 비워져있는 버튼이 생성 -->
<br>
<h3>button[type="submit | reset | button"]</h3>
<button type="submit">전송</button> <!-- button의 기본값 submit -->
<button type="reset">초기화</button>
<button type="button">일반버튼</button>
<br>
<button>type을 생략하면 submit버튼</button>
</form>
<br>
<hr>
<h2>select태그와 option태그</h2>
<p>
- 사용자에게 직접 키보드로 입력받는 것이 아니라 내가 제시한 목록들 중 선택할 수 있는 태그
- 서버에 전송시 선택된 option의 값이 넘어감
</p>
<form action="text.do">
국적 :
<select name="national">
<option value="Ko" selected>한국</option>
<option value="Us">미국</option>
<option value="Uk">영국</option>
<option value="Ru">러시아</option>
<option value="etc">기타</option>
</select>
점심메뉴선택 :
<select name="lunch" multiple> <!-- mutiple : 여러개 선택할 수 있다. ctrl으로 이용해 다중선택 가능 -->
<option value="bob" selected>해장국</option> <!-- selected : 선택이 되고선 보여짐-->
<option value="sand">샌드위치</option>
<option value="salad">샐러드</option>
<option value="egg">오므라이스</option>
<option value="curry">카레</option>
</select>
<br><br>
수강신청 :
<select>
<optgroup label="공과대학">
<option value="archi">건축공학과</option>
<option value="machanic">기계공학과</option>
<option value="computer">컴퓨터공학과</option>
<option value="electronic">전기전자공학과</option>
<option value="chemical">화학공학과</option>
</optgroup>
<optgroup label="인문대학">
<option value="history">사학과</option>
<option value="lang">어문학과</option>
<option value="philo">철학과</option>
</optgroup>
</select>
<br><br>
<h3>datalist : html5에서 새로 추가된 기능</h3>
<p>
- 내가 제시한 목록 중에서 선택도 할 수 있고, 만약 목록에 없다면 직접 입력 가능
</p>
제일 가고싶은 여행지 :
<input name="travle" list="travleList"> <!-- list와 id 이름이 같아야 됨-->
<datalist id="travleList">
<option value="Ko">한국</option>
<option value="Us">미국</option>
<option value="Uk">영국</option>
</datalist>
<br><br>
<input type="submit">
</form>
</body>
</html>