input을 사용할 때 form을 사용했었는데
form은 내용을 서버에 전달할 때 핵심인 개념이다.
저번 게시글에서 form으로 input 항목들을 묶었을 때 reset 버튼을 만들어 누르면 전부 리셋되는걸 확인 했었을 것이다.
이렇게 form으로 묶어 속성에 보낼 서버와 보낼 방식을 지정하고
특정 버튼을 누르면 작동이 된다.
방식에는 아래와 같이 두가지 지정 방법이 있다
get 방식은 url 그대로 보내 빠르지만 보안이 안좋다.
post 방식은 head와 붙여 보내 느리지만 보안에 좋다.
마지막으로 데이터가 전송된 것을 확인하려면 서버가 필요하지만 우선 서버는 생략한다.
form을 선언할 때 <form action="" method="POST">와 같이 만들면 된다.
아래의 예제를 확인해 get과 post의 차이를 확인해보자
<html>
<head>
<meta charset="UTF-8">
<title>Input</title>
<link rel="icon" href = "btn.png">
</head>
<body>
<!--action="보낼 서버", method="GET|POST"-->
<form action="" method="GET">
First Name<input type="text" name="firstname"/>
<br/>
Last Name<input type="text" name="lastname"/>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>
주소줄을 보면 내가 입력한 정보가 제출을 눌렀을때 url에 전부 나오는게 보인다.
이러한 이유로 보안에 안좋다.
참고로 한글을 입력하면 url에는 한글로 보이긴 한데 복사해서 붙여넣으면 url 코딩 방법으로 이상하게 나온다.
<html>
<head>
<meta charset="UTF-8">
<title>Input</title>
<link rel="icon" href = "btn.png">
</head>
<body>
<!--action="보낼 서버", method="GET|POST"-->
<form action="" method="POST">
First Name<input type="text" name="firstname"/>
<br/>
Last Name<input type="text" name="lastname"/>
<br/><br/>
<input type="submit"/>
</form>
</body>
</html>
method를 post로 바꾸면 url에 뜨지 않는다.
이것을 08(https://qdgbjsdnb.tistory.com/136)의 예제에 적용하면 다음과 같다.
<html>
<head>
<meta charset="UTF-8">
<title>로그인 박스</title>
<style>
th{
width: 50px;
}
td{
width: 50px;
}
</style>
</head>
<body>
<h2>로그인</h2>
<hr/>
<form action="" method="GET">
<fieldset>
<table>
<tr><!--행(row)선언-->
<th ><b>ID</b></th>
<th><input type="text" name = "UserID" value=""placeholder = "아이디를 입력 해주세요."/></th>
<th rowspan="2"><input type="submit" value="로그인"/></th>
</tr>
<tr><!--행(row)선언-->
<th><b>PW</b></th>
<th><input type="password" name = "UserPW" value=""placeholder = "비밀번호를 입력 해주세요."/></th>
</tr>
<tr><!--행(row)선언-->
<th colspan="3"><input type="button" value="회원가입"/> <input type="button" value="아이디/비번 찾기"></th>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>회원가입 페이지</title>
<style>
td{
width: 300px;
}
</style>
</head>
<body>
<fieldset>
<h2>회원가입</h2>
<hr/>
<form action="" method="GET">
<table>
<tr>
<th>아이디</th>
<td><input type="text" name = "UserID" value=""/></td>
</tr>
<tr>
<th>비밀번호</th>
<td><input type="text" name = "UserPW" value=""/></td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td><input type="text" name = "ReUserPW" value=""/></td>
</tr>
<tr>
<th>이름</th>
<td><input type="text" name = "Name" value=""/></td>
</tr>
<tr>
<th>이메일</th>
<td><input type="email" name="mail" required/></td>
</tr>
<tr>
<th>생년월일</th>
<td>
<select name="year">
<option value="1995">1995</option>
<option value="1996"d>1996</option>
<option value="1997" selected>1997</option>
<option value="1998">1998</option>
<option value="1999">1999</option>
<option value="2000">2000</option>
</select>
<select name="month">
<option value="01" selected>01</option>
</select>
<select name="day">
<option value="01" selected>01</option>
</select>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<input type="radio" name="gender" value="male"/> 남자
<input type="radio" name="gender" value="female"/> 여자
</td>
</tr>
<tr>
<th>취미</th>
<td>
<input type="checkbox" name="hobby" value="드라이브"/>드라이브
<input type="checkbox" name="hobby" value="스포츠"/>스포츠
<input type="checkbox" name="hobby" value="게임"/>게임
<input type="checkbox" name="hobby" value="낚시"/>낚시
</td>
</tr>
<tr>
<th>나이</th>
<td><input type="number" name="age" min="1" max="200" value="20"/></td>
</tr>
<tr>
<th>보안등급</th>
<td><input type="range" name="security" min="0" max="100" value="0" step="20"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="회원가입"/>
</td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
'HTML, CSS, JavaScript, jQuery > 02.HTML' 카테고리의 다른 글
| [HTML]02-08.Input(버튼, 텍스트박스 등 다양한 노드 생성) 예제 (0) | 2018.10.16 |
|---|---|
| [HTML]02-07.link(페이지 아이콘 이미지 추가),Input(버튼, 텍스트박스 등 다양한 노드 생성), fieldset(프레임 만들기) (0) | 2018.10.15 |
| [HTML]02-06.iframe, 다른 사이트 참조 + 예제 (0) | 2018.10.15 |
| [HTML]02-05.리스트, li, ul, ol, dl(dl, dt, dd) (0) | 2018.10.15 |
| [HTML]02-04.이미지, 하이퍼링크 태그(img, a) (0) | 2018.10.15 |