Don't Panic
in HTML·CSS ☕ 2분 읽기

[HTML·CSS] HTML form과 회원가입 폼 — get/post·label

#HTML·CSS
목차

form 태그로 정보 전송하기

form은 클라이언트가 서버로 정보를 전송할 때 사용하는 태그다.

  • action 속성: 서버 쪽에서 정보를 받을 파일(자원)을 지정
  • method 속성: 서버로 보낼 전송 방식 지정
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- form: 클라이언트가 서버로 정보 전송시 사용하는 태그 -->
<!-- action 속성: 서버쪽에서 정보를 받을 파일(자원) -->
<h1>form test</h1>
<form action = "welcome.jsp" method = "get">
ID <input type = "text" name = "id"> <br>
PW <input type = "password" name = "pass"><br>

<br>
<input type = "reset" value = "취소">
<input type = "submit" value = "전송">

</form>



</body>
</html>

form test 화면

  • action에 적어 둔 welcome.jsp 부분으로 이동한다.
  • 사용자가 뭔가 입력하고 전송한다. 타입이 submit으로 되어 있는 전송 버튼을 누르면, 서버가 받아서 처리할 수 있게 해 준다.

get과 post 차이

  • 이걸 작성하고 실행하면 입력한 값이 주소창에 다 보이게 된다.
  • form action="welcome.jsp" method="get" 이 부분을 고쳐 주면 되지 않을까?
  • get과 post는 주소창에 입력된 값이 보이느냐 안 보이느냐의 차이다.

폼 전송 결과

  • 네이버에서는 저 검색창이 폼이다.

네이버 검색창 폼

  • 우리가 입력했던 부분이 주소창에 보인다. (get 방식으로 받았음을 알 수 있다)

get 방식 주소창 노출

다양한 input 타입

hr은 가로로 쭉 선을 긋는 것이다. (선 하나가 그어진다)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- form: 클라이언트가 서버로 정보 전송시 사용하는 태그 -->
<!-- action 속성: 서버쪽에서 정보를 받을 파일(자원) -->
<h1>form test</h1>
<form action = "welcome.jsp" method = "get">
ID <input type = "text" name = "id"> <br>
PW <input type = "password" name = "pass"><br>
<hr>
<!-- hr은 가로로 쭉 선을 긋는 거. -->
COLOR<input type = "color"> <br>
EMAIL<input type = "email"> <br>
RANGE<input type = "range"> <br>
Number<input type = "number"><br>
DATE<input type = "date"> <br>
<hr>
<input type = "reset" value = "취소">
<input type = "submit" value = "전송">

</form>



</body>
</html>

search, file 등 더 많은 타입을 추가한 버전:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- form: 클라이언트가 서버로 정보 전송시 사용하는 태그 -->
<!-- action 속성: 서버쪽에서 정보를 받을 파일(자원) -->
<!-- method 속성: 서버로 보낼 전송 방식 지정 -->
<h1>form test</h1>
<form action = "welcome.jsp" method = "get">
ID <input type = "text" name = "id"> <br>
PW <input type = "password" name = "pass"><br>
<hr>
<!-- hr은 가로로 쭉 선을 긋는 거. -->
COLOR<input type = "color"> <br>
EMAIL<input type = "email"> <br>
RANGE<input type = "range"> <br>
Number<input type = "number"><br>
DATE<input type = "date"> <br>
SEARCH <input type= "search"> <br>
Button <input type= "search"> <br>
FILE<input type= "file"> <br>
<hr>
<input type = "reset" value = "취소">
<input type = "submit" value = "전송">

</form>



</body>
</html>

JSP로 파라미터 받기

이제 이 action 부분을 실행해 줄 welcome.jsp를 만들어 주자. JSP는 내부적으로 자바로 바뀐다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%

/* jsp파일안에서 자바 코드 적을 때  % % 안에 적어둠. */
/*   jsp 파일 안에서 자바 코드 적을 때  */
String id = request.getParameter("id");
//아이디 받아옴.
String pass = request.getParameter("pass");
out.println(id);//browser에 출력
out.println(pass);//browser에 출력
%>

<br>
<a href = "formtest.html">back</a>
<!-- 링크 걸어두기 가능 -->
  • JSP 파일 안에서 자바 코드를 적을 때는 <% %> 안에 적어 둔다.
  • request.getParameter("id")로 아이디를 받아오고, out.println()으로 브라우저에 출력한다.
  • <a> 태그로 링크를 걸어 둘 수도 있다.

JSP 파라미터 출력 결과

웹 표준 회원가입 폼

fieldset은 테두리(네모박스)를 쳐 주는 박스 개념이고, legend는 그 박스의 제목이다.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원 정보</h1>
<form action = "#">
<fieldset>
<!-- 네모박스 -->
<legend>로그인 정보</legend>
<!-- 그 네모박스의 제목 -->
</fieldset>
<fieldset>
<legend>개인 정보</legend>
</fieldset>
</form>
</body>
</html>

fieldset 박스 화면

  • 이렇게 fieldset 같은 것을 쓰는 건 웹 표준 때문이다. (2000년 중반부터 웹 표준이 유행)

ul / li로 목록 구성하기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원 정보</h1>
<form action = "#">
<fieldset>
<!-- 네모박스 -->
<legend>로그인 정보</legend>
<!-- 그 네모박스의 제목 -->
<ul>
<!--순서가 없는 목록 -->
<li>
<label>아이디</label><input type = "text" name= "id">
</li>
<li>
<label>비밀번호</label><input type = "password" name= "pw">
</li>
</ul>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
</fieldset>
</form>
</body>
</html>

ul/li 목록 화면

  • 프로그램이 시작하면 처음부터 쭉 읽어 준다.

label과 for 속성 연결

입력하는 칸은 <input type="text" name="id">이고, 그 앞에 label을 붙여 줬다. 여기에 속성을 달아 줄 수 있다.

<label for = "name"> 이름 </label>
<input type = "text" id = "name" name = "name">
  • name은 서버 쪽에서 받아갈 때 쓰는 것이고, id가 name이다.
  • label은 for로 id를 가져가서, “이 라벨은 해당 입력 칸(name)을 위한 라벨”이라고 알려 준다.

label for 연결 화면

최종 회원가입 폼 코드

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>회원 정보</h1>
<form action = "#">
<fieldset>
<!-- 네모박스 -->
<legend>로그인 정보</legend>
<!-- 그 네모박스의 제목 -->
<ul>
<!--순서가 없는 목록 -->
<li>
<label for = "id">아이디</label><input type = "text" name= "id">
</li>
<li>
<label for = "pw">비밀번호</label><input type = "password" name= "pw">
</li>
</ul>
</fieldset>
<fieldset>
<legend>개인 정보</legend>
<ul>
<li>
<label for = "name"> 이름 </label>
<input type = "text" id = "name" name = "name">
<!-- name은 서버쪽에서 받아갈 떄 쓰는거고 id가 name인데 label은 id를 가져가서 name을 위한 라벨이라 알려줌. -->
</li>
<li>
<label for = "email"> 이메일 </label>
<input type = "email" id = "name">
</li>
			<li>
				<label for = "phone"> 연락처 </label>
				<input type = "phone" id = "phone">
			</li>
			<li>
				<label for = "blog"> 블로그 </label>
				<input type = "url" id = "blog">
			</li>
		</ul>
	</fieldset>
  <br>
	<input type = "submit" value = "가입하기">
</form>


</body>
</html>

관련 글