[HTML] 폼 태그(form)
1. 폼을 통해 정보를 입력받는 태그
웹사이트에서 회원가입 등 여러 정보를 입력받아 웹 서버로 전달할 때 사용하는 폼을 만들어주는 태그
1) form 태그
- 폼 안에 있는 모든 데이터를 백엔드 서버에 전달한다.
- 전체 양식 설정(화면에 보이지 않지만 양식을 지정해줌)
1-1) form 태그 필수속성
(1) action 속성
① form data를 서버로 보낼 때 해당 데이터가 도착 할 URL을 명시
<form action="https://yanacoding.tistory.com/">(2) method 속성
① get : 디폴트 값. 도메인에 입력값이 문서헤더에 그대로 보임
- 보안에 취약
② post : 파일 헤더에 정보값이 암호화되어 저장되어, 도메인에는 변화가 없음
- 보안이 필요한 부분에 사용. 로그인 값 등에 사용
<body>
<form action="#" method="get">
</form>
</body>
2) input 태그
- 실질적으로 데이터를 입력받을 양식을 입력하기 위한 태그.
2-1) input 태그 속성
(1) name : 입력된 데이터의 이름 정의
(2) value : 기본값 지정
(3) type : 종류 설정
① text : 일반문자
이름 : <input type="text" name="uname" /><br />
아이디 : <input type="text" name="uid" /><br />② password : 비밀번호
비밀번호 : <input type="password" name="upw" /><br />③ button : 버튼
④ submit : 양식 제출용 버튼
<input type="submit"/>⑤ size : 입력값 사이즈 설정
⑥ radio : 한 개의 값만 선택 가능한 체크박스 생성
성별구분 : <input type="radio" name="gender" value="m">남,
<input type="radio" name="gender" value="w">여 <br />⑦ checkbox : 여러개 선택 가능한 체크박스 생성
사용언어 : <input type="checkbox" name="lan" value="kor" checked="checked" />한글,
<input type="checkbox" name="lan" value="eng" />영어,
<input type="checkbox" name="lan" value="jap" />일어,
<input type="checkbox" name="lan" value="chi" />러시아어<br />⑧ file, hidden 외
3) textarea 태그 : 글을 길게 입력받는 태그
- rows 속성 : 행
- cols 속성 : 열
자기소개 : <textarea rows="5" cols="20">간단하게 입력하세요.</textarea><br />4) select 태그 : 여러개의 선택지중에 하나를 선택하게 만드는 태그
- option 태그 : select 태그의 선택지를 만드는 태그
국적 : <select>
<option>KOREA</option>
<option>USA</option>
<option>JAPAN</option>
<option>RUSSIA</option>
</select><br />
좋아하는음식 : <select multiple="multiple">
<option>김치</option>
<option>불고기</option>
<option>파전</option>
<option>비빔밥</option>
</select><br />