20180910 폼 태그

## form 태그 ##

 -> 사용자가 입력한 data를 보내는 방식과 처리할 페이지를 정하는 태그

속성

method : get방식과 post방식이 있음

※ get 방식

 - URL 창을 통하여 데이터를 보내는 방식

 - data 크기에 제한이 있음 (256~4096Byte)

 - data가 가시적으로 보임

※ post방식

 - http header 안에 포함하여 보내는 방식

 - data 크기에 제한이 없음

 - data를 쉽게 볼 수 없음(기술적으로는 볼 수 있음)

name : <form> 태그의 고유 이름을 지정(form태그를 구분할때 사용)

action : 데이터를 처리할 페이지를 지정

target : action 속성의 페이지를 어떻게 열 것인지를 지정

autocomplete : 이전 입력 내용 출력하는 기능, 생략하면 자동 출력

※ 자동 저장 기능 같은 것(default : on)

## fieldset , legend 태그 ##

 -> 폼 요소를 그룹으로 묶는 태그, 묶은 폼 요소에 명칭을 붙이는 태그

속성

name : fieldset의 이름 지정

form : fieldset이 속한 form의 이름 지정

fieldset으로 폼요소를 묶고 legend를 통하여 묶은 폼요소에 명칭을 붙임

## input 태그 ##

 -> 사용자로부터 data를 입력받기 위한 태그

송성

type : 입력창의 타입을 결정하는 속성(text, checkbox, radio, select 등)

- text : 한줄 짜리 텍스트 입력 창이 생김

- password : 비밀번호 입력 창이 생김

- hidden : 사용자에게 보이진 않지만 값을 넣을 수 있음

- button : 버튼을 생성

- checkbox : 체크박스 생성

- file : 파일 선택 양식 출력

- image : 이미지 형태를 생성

- radio : 라디오 버튼 생성

- submit : form을 실행하기 위한 버튼을 생성

- reset : 입력한 데이터를 취소 시키는 버튼을 생성

value : input 요소의 기본값 표시

name : input 마다 구별 할 수 있는 명칭

min/max/step : 허용하는 범위 최소값 / 최대값 / 값의 증감값

autocomplete : 자동완성 기능

height/width : 입력창의 높이와 넓이

readonly : 읽기 전용 필드

accept : 파일 타입에 대해 사용자에게 알려주는 기능

multiple : 여러 개의 값 입력 가능

placeholder : 사용자 입력전 표시글

autofocus : 입력창 커서 표시

maxlength : 사용자가 입력할 수 있는 글자수 제한

size : 화면에서 표시하는 크기

minlength : 최소 입력 글자 (최신 크롬, 안드로이드만 지원)

※ input 사용하는 속성들은 이외에도 다양하게 많음...(찾아보세요...)

@ 여러 타입

## hidden 타입 ##

ex) <input type="hidden" name="명칭" value="값">

name : input tag의 구분자 또는 명칭

value : hidden에 들어갈 값 설정

## text 타입 ##

ex) <input type="text" name="명칭" value="값" size="숫자" maxlength="숫자"/>

속성

name : text type 구분자 또는 명칭

size : 사용자 화면에 보여줄 문자 입력 창의 길이

value : text에 들어갈 값, 설정하지 않으면 빈 값

maxlength : 사용자가 총 입력 할수 있는 개수

placeholder : 사용자가 입력전 안내하는 표시글

## password 타입 ##

ex) <input type="password" name="명칭"/>

name : password type의 이름 또는 명칭

## button 타입 ##

ex) input type="button" id="명칭" value="값" onclick="스크립트 함수"/>

id : id type의 구분자 

(name은 다음 페이지에 값을 넘겨줄때 구분하는 용도로 사용하고,

id는 해당 페이지에서 구분할때 사용함)

value : button에 표시될 값

event : 행동에 따른 스크립트를 불러올 값 (ex : onclick)

html : web page의 구조

css : web page의 스타일

javascript : web page의 기능

jquery : web page의 기능

## checkbox / radio type ##

ex) 

<input type="checkbox" name="명칭" value="값"/>

<input type="radio" name="명칭" value="값"/>

name : 구분자 또는 명칭

value : 전송시 전달할 값

checked : 처음에 선택될 값 지정

## file type ##

ex) <input type="file" name="명칭"/>

multiple : 다중 파일선택 가능

## <label> 타입 ##

 -> <form> 요소에 레이블(명칭)을 붙이기 위해 사용하는 태그

(타입이 아닙니다.)

속성

for : label로 묶을 id

ex)

<label for="id">아이디 : </label>

<input type="text" id="id" placeholder="아이디를 입력하세요" />

## image 타입 ##

ex)

<input type="image" name="chicken" src="img/chicken.jpg" value="치킨"/>

name/id : type을 구분할 구분자

src : 출력할 이미지 경로 지정

## submit / reset type ##

 -> submit은 전송, reset은 취소

 -> submit 클릭시 해당 폼 내용을 action page로 전송

 -> reset 클릭시 해당 폼에 입력된 내용을 모두 clear

ex)

<input type="submit" value="전송"/>

<input type="reset" value="취소"/>

URL을 보면 query String라고 부른다.

앞에 주소부분 나와있는건 IP이나 DNS이다.

/뒤에 부분은 page locaion이다.

?가 나오는건 값을 구분하는 역할이다.

? 뒷부분은 다 값이다.

키밸류라 생각해도 된다.

https://search.naver.com/search.naver?query=pizza하면된다.

## html5 양식 type ##

속성

color : 색상 선택 양식 출력

date : 년,월,일 선택 양식 생성

detetime-local : 년,월,일 시간 선택 양식 생성

time : 시간을 선택하는 양식 생성

month : 년,월을 선택하는 양식을 생성

week : 주를 선택하는 양식을 생성

number : 숫자를 입력하는 창 생성

range : 슬라이드 막대로 숫자 지정

search : 검색어를 입력하는 창 출력 

tel : 전화번호를 입력하는 창 출력

email : @를 포함하여 작성하여야 하는 창 생성

url : url 주소값을 입력하는 창 출력

    <!-- 종규짱 -->

<form action="https://search.naver.com/search.naver?where=nexearch&sm=top_hty&fbm=1&ie=utf8">

    <input type="text" name="query">

    <input type="submit" value="검색/">

    

    </form>

    

이렇게 하면 보내진다.

## color type ##

ex)

<input type="color" name="명칭"/>

## date, datetime-local, month, week 타입 ##

-> 기존에는 datetime이 있었으나 사용이 중단되고,

datetime-local을 사용함 (datetime은 사용자가 직접 입력하는 방식이였음)

min : 최소 표시 날짜 지정 (ex. 1988-01-01)

max : 최대 표시 날짜 지정 (ex. 2050-12-31)

value : 초기 표현 값

ex) 

<input type="date" id="date" min="1988-01-01" max="2050-12-31"

value="2018-09-10"/>

## number / range ##

 -> range는 익스플로러에서 확인

속성

min : 최소 표시 숫자 지정

max : 최대 표시 숫자 지정

step : 숫자 간격 지정

value : 초기 표현 값

ex)

<input type="number" id="명칭" min="숫자" max="숫자"

step="숫자" value="숫자"/>

<input type="range" id="명칭" min="숫자" max="숫자"

step="숫자" value="숫자"/>

## search / url / email / tel  type ##

속성

id/name : 구분자

value : 초기 표현 값

ex)

<input type="타입" id="명칭" value="초기값"/>

※ search 타입은 지원하는 웹 브라우저가 많지 않음

(모바일을 겨냥하여 만든 타입이기 때문에!!)

@ 여러값 표현 태그

## select 태그 ##

-> select를 만드는 태그

속성

size : 화면에 표시될 항목 개수 지정

multiple : 여러항목을 선택 지정, ctrl 누른상태에서 선택

## option 태그 ##

-> select 안에 사용되며 목록을 만드는 태그

속성

value : 옵션 선택시 넘겨질 값

selected : 기본으로 선택된 값

ex)

<select size="숫자" id="id값">

<option value="값1">표시내용1</option>

<option value="값2">표시내용2</option>

<option value="값3" seleted>표시내용3</option>

</select>

## optgroup 태그 ##

-> select 안에 option들을 그룹지어서 사용

-> label을 이용하여 목록이름으로 출력됨

ex)

<select size="숫자" id="id">

<optgroup label="목록이름1">

<option value="값1">표시내용1</option>

<option value="값2">표시내용2</option>

</optgroup>

<optgroup label="목록이름2">

<option value="값3">표시내용3</option>

<option value="값4">표시내용4</option>

</optgroup>

</select>

## button 태그 ##

ex) <button>클릭</button>

## textarea 태그 ##

-> 긴 장문의 글을 작성할 때 사용하는 텍스트 영역

(게시판 종류에 많이 쓰임)

ex) 

<textarea rows="10" cols="50"></textarea>

---

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html 종합 실습 문제1</title>
</head>
<body>

    <form>
    
    고객명 : <input type="text"><br><br>
    전화번호 : <input type="text"><br><br>
    E-mail : <input type="text"><br><br>
    <fieldset>
    <legend>피자 사이즈</legend>
        <input type="radio" id="small" name="size">Small <br><br>
        <input type="radio" id="medium" name="size">Medium<br><br>
        <input type="radio" id="Large" name="size">Large<br><br>
    </fieldset>
    
    <fieldset>
    <legend>토핑 선택</legend>
        <input type="checkbox" id="bacon" name="topping">베이컨<br><br>
                <input type="checkbox" id="cheese" name="topping">치즈<br><br>
                <input type="checkbox" id="anion" name="topping">양파<br><br>
                <input type="checkbox" id="mushroom" name="topping">버섯<br><br>
    </fieldset>
    
    <br>
    희망 배송 시간 : <input type="time" ><br><br>
    배송시 요청사항 : <textarea rows="3"></textarea><br><br>
		<button type="submit">주문하기</button>
    
    </form>
    
    
    
    
</body>
</html> 

---

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTMl 종합 실습 문제2</title>
</head>
<body>

    <form>
    <fieldset>
    <legend>납품자 정보</legend>
        1. 납품자명 : <input type="text" placeholder="ex)홍길동"><br><br>
        2. email : <input type="email" placeholder="ex)ex@ex.com"><br><br>
        3. 홈페이지 : <input type="url" placeholder="http://"><br><br>
        
    </fieldset>
    
    <fieldset>
    <legend>납품 정보</legend>
    <li>상품명 : <input type="text"></li><br>
        <li>납품수량 : <input type="number" min="100" placeholder="최소100"></li><br>
        <li>납품등급 : <input type="range"></li><br>
        <li>기타사항 : <textarea rows="2"></textarea></li><br><br>
    </fieldset>
    
    <input type="submit" name="send message" value="send message">
    <input type="reset" name="reset" value="reset">
    </form>
    
    
    
    
    
</body>
</html> 

---

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<p align="center"> 네이버화면 </p>
<table border="1"; align="center">
	<tr>
		<td width="100px" ; height="100px" ; align="center"><img src="image/naver_logo.jpg" width="100px" height="100px"></td>
		<th width="500px" colspan="5">
		<form action="https://search.naver.com/search.naver" method="get">
		<input type="text" id="query" size="50px" name="query">
		<input type="submit" value="검색">
		</form>
		</th>
	</tr>
	<tr>
		<td align="center">메일</td>
		<td width="50px" ; align="center" >카페</td>
		<td width="80px" ;  align="center">블로그</td>
		<td width="80px" ;  align="center">지식In</td>
		<td width="40px" ;  align="center">쇼핑</td>
		<td rowspan="2" width="60px">
            
            
          <form action="https://nid.naver.com/nidlogin.login" method="post">
            <table>
				<tbody><tr height="30px"><td width="100px">
					<input type="text" name="id" size="10px">
				</td>
				<td rowspan="2" width="60px">
					<button> 로그인</button>
				</td></tr>
				<tr height="30px">
				<td width="100px">
					<input type="password" name="pw" size="10px">
				</td>
				</tr>
			</tbody></table>
            </form>
            <a href="https://nid.naver.com/user2/join.nhn?m=init&amp;lang=ko_KR">회원가입</a>
			<a href="https://nid.naver.com/user2/help/idInquiry.nhn?menu=idinquiry">ID</a> /
			<a href="https://nid.naver.com/user2/help/pwInquiry.nhn?menu=pwinquiry">PW 찾기
            
            
            </a></td></tr>
	<tr>
		<td height="20px" ; rowspan="5" ; colspan="5">
			<table border="1" align="center">
				<tr>
					<td width="80px" ; height="75px" ; align="center">MBN</td>
					<td align="center">NewDelity</td>
					<td align="center">중앙일보</td>
					<td align="center">연합뉴스</td>
				</tr>
				<tr>
					<td width="80px" ; height="80px" ; align="center">파이낸셜</td>
					<td align="center">SBS</td>
					<td align="center">매일경제</td>
					<td align="center">동아일보</td>
				</tr>
				<tr>
					<td width="80px" ; height="80px" ; align="center">KBS</td>
					<td align="center">전자신문</td>
					<td align="center">시사IN</td>
					<td>노컷뉴스</td>
				</tr>
				<tr>
					<td width="80px" ; height="80px" ; align="center">프레시안</td>
					<td align="center">OSEN</td>
					<td>이투데이</td>
					<td>뉴스타파</td>
				</tr>
			</table>
		</td>
	</tr>
	<tr>
		<td height="265px" ; align="center"><img src="image/tropicana.gif" width="250px"></td>
	</tr>
    
</table>

</body>
</html>

---

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>


<h1><p align="center">회원 가입</p></h1>
    <br>
    <h3><p align="center">가입할 회원 정보를 입력하세요</p></h3>
    <br>
    <form>
    <table align="center">
    <tr><td align="center">아이디 : <input type="text" placeholder="아이디를 입력하세요"></td></tr>
        <tr><td align="center">비밀번호 : <input type="password" placeholder="비밀번호를 입력하세요" id="pw1" name="pw1">
            <span id="idPassword"></span>
            
            </td></tr>
        <tr><td align="center">비밀번호(re) : <input type="password" placeholder="비밀번호 재확인" id="pw2" name="pw2"></td></tr>
        <tr><td align="center">이름 : <input type="name" placeholder="이름을 입력하세요"></td></tr>
        <tr><td align="center">나이 : <input type="age" placeholder="나이를 입력하세요"></td></tr>
        <tr><td align="center">이메일 : <input type="email" placeholder="이메일을 입력하세요"></td></tr>
        <tr><td align="center">폰번호 : <input type="phone" placeholder="폰번호를 입력하세요"></td></tr>
        <tr><td align="center">주소 : <input type="address" placeholder="주소를 입력하세요"></td></tr>
        <tr><td align="center">성별 : <input type="radio">남<input type="radio">여</td></tr>
        <tr><td>취미 : <input type="checkbox">운동<input type="checkbox">음악<input type="checkbox">춤<input type="checkbox">맛집탐방</td></tr>    
    <tr><td align="center"><input type="submit" value="가입하기">  <input type="reset" value="취소"></td></tr>
        </table>
        
        
    </form>
    
    


</body>
</html>