폼 Form 만들기
<form> 태그
form을 만들기위한 가장 큰 뼈대
※element
1.method
사용자가 입력한 내용들을 서버 쪽 프로그램으로 어떻게 넘겨줄지 지정해준다.
1-1.get : 주소창에 사용자가 입력한 내용이 그대로 드러나며 길이 제한이 있다.. 어지간하면 안쓸 것 같다.
1-2 post : 사용자의 입력을 표준입력으로 넘겨주기때문에 입력내용 길이 제한이 없고 내용이 드러나지않는다.(★)
2. name
말그대로 form의 이름이다.
3. action
form태그 내의 내용을 처리해줄 서버의 프로그램을 지정한다.
서버 측 페이지를 지정해준다.
4. target
a에서의 역활과 동일하다. 기존창에서 불러올지, 새창에서 불러올지를 결정 한다.
5. autocomplete
자동완성기능이다. 암호에서는 끄도록 하자.
<input> 태그
사용자로부터 정보를 입력받을 수 있는 대화형 컨트롤을 생성하는 데 사용된다.
<input> 요소의 type 속성을 사용하여 입력 필드의 유형을 지정할 수 있다.
※Attribute
type : 입력받을 데이터의 종류
name : 저장할 변수명
※type element
1.text: 일반 텍스트 입력 필드를 생성한다. 직접 입력한 텍스트를 받는다.
2. password: 비밀번호를 입력받을 수 있는 필드를 생성한다. 입력한 내용은 마스킹되어 표시되지 않고, 보안을 위해 숨겨진다.
3. number: 숫자를 입력받을 수 있는 필드를 생성한다. 사용자는 숫자 값을 입력할 수 있으며, 일부 브라우저는 증감 화살표를 표시하여 값을 증가 또는 감소시킬 수도 있다.
3-1. range : 숫자를 드래그를 통해 입력을 받아 저장한다.
4. email: 이메일 주소를 입력받을 수 있는 필드를 생성한다. 입력한 내용은 이메일 형식에 맞는지 유효성 검사한다.
5. date: 날짜를 입력받을 수 있는 필드를 생성한다. 사용자는 달력 또는 기타 날짜 선택 도구를 사용하여 날짜를 선택할 수 있다.
6. checkbox: 다중 선택 옵션을 제공하는 체크박스를 생성한다. 사용자는 여러 옵션 중 필요한 옵션을 선택할 수 있다.
7. radio: 여러 옵션 중 하나를 선택할 수 있는 라디오 버튼을 생성한다. 그룹으로 묶인 라디오 버튼 중 하나만 선택할 수 있다.
8. file: 파일 업로드를 위한 필드를 생성한다. 사용자는 컴퓨터에서 파일을 선택하여 업로드할 수 있다.
9. submit: 폼을 제출하는 버튼을 생성한다. 사용자가 이 버튼을 클릭하면 폼의 내용이 서버로 제출된다.
10. reset: 폼의 내용을 초기화하는 버튼을 생성한다. 사용자가 이 버튼을 클릭하면 입력된 내용이 모두 초기화된다.
예시
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h2>form 을 연습 하겠습니다</h2>
<h3>입력해보자고</h3>
<form>
<ul>
<li>아이디<input type="text" name="userName"/></li>
<li>비밀번호<input type="password" name="userPW"/></li>
<li>생년월일<input type="date" name="userBirthdate"/></li>
<li>주소<input type="text" name="userAddress"></li>
<li>핸드폰번호<input type="tel" name="userTlno"/></li>
<input type="submit">
<input type="reset">
</ul>
</form>
</body>
</html>이렇게 입력하여 만들 경우
드디어 그럴듯 한 사이트의 모양을 갖추고있다.
※만약 유저에게 받지 않은 정보를 우리가 가져오고싶다면 hidden을 입력하면 유저에게 출력하지않은채로 그대로 전달 받을 수 있다. (Ex: 게시글번호)
<label>태그
폼요소에 라벨을 붙인다고 생각하자.
폼태그가 무엇인지 이름을 붙여 무엇인지 알게 하고, 그 텍스트가 서로 연결되어있다는 것을 직관적으로 알게 해준다.
HTML에서 입력받은 데이터의 처리
<%@ page language="java" contentType="text/html; charset=EUC-KR"
pageEncoding="EUC-KR"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<h2>form 을 연습 하겠습니다</h2>
<h3>입력해보자고</h3>
<pre>
</pre>
<form action="ok.jsp">
<ul>
<li>아이디<input type="text" name="userID" value="아이디를 입력하세요"/></li>
<li>비밀번호<input type="password" name="userPW"/ value="**********"></li>
<li>생년월일<input type="date" name="userBirthdate"/></li>
<li>주소<input type="text" name="userAddress" value="주소를 입력하세요"></li>
<li>핸드폰번호<input type="tel" name="userTlno" value="핸드폰 번호를 입력하세요"/></li>
<input type="submit" value="회원가입하기"/>
<input type="reset" value="취소"/>
</ul>
</form>
</body>
</html>이와같은 형태로 우리는 HTML페이지에서 데이터를 입력받고, 그것의 타입과 name, 기본값인 value 까지 정해주었다.
여기에 정보를 입력하면 페이지는 이것을 받아
http://localhost:8081/example/CH04_FORM/ok.jsp?userID=%C5%D7%BD%BA%C6%AE&userPW=dlqfur&userBirthdate=1992-11-11&userAddress=%BF%A9%B1%E2%B4%C2%C1%D6%BC%D2&userTlno=059135
와 같은 페이지로 연결 해준다. 우리가 입력받은것을 데이터로 변형하여 만들어 준 것이다.
페이지를 받아서 이것을 우리가 출력하고, 데이터로 다루어야하는데 우선 출력부터 해보자.
이것을 받을 jsp 페이지를 만들어보자.
<%--
<%@ %>는 지시어 부분이다.
jsp페이지에 대한 정보 지정
--%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>서버쪽 페이지 입니다.</title>
</head>
<body>
ok.jsp 입니다
<!-- html 주석문 -->
<%-- jsp 주석문
이 문서는 form01.jsp문서에서 보낸 data를 받아 처리하는 서버측 문서이다. --%>
<% //스크립트릿. java코드
request.setCharacterEncoding("utf-8");
String userID = request.getParameter("userID");
String userPW = request.getParameter("userPW");
String userBirthdate = request.getParameter("userBirthdate");
String userAddress = request.getParameter("userAddress");
String userTlno = request.getParameter("userTlno");
%>
<h2>ok.jsp 문서</h2>
<ul>
<li> 아이디 : <%=userID%></li>
<li> 비번 : <%=userPW%></li>
<li> 생일 : <%=userBirthdate%></li>
<li> 주소 : <%=userAddress%></li>
<li> 핸드폰번호 : <%=userTlno%></li>
</ul>
</body>
</html>
<% %>
scriptlet(스크립틀릿) java코드를 실행한다.
<%= %>
expression(표현식)으로 값을 브라우저에 출력해준다.
<%@ %>
지시어부분이다.
jsp페이지에 대한 정보를 가지며, 생성하는 문서타입, 에러페이지 등등 여러가지 정보를 설정한다.
※요약
input에서 name을 통해 지정된 parameter값을
request객체에서 getParameter 메서드로 해당 값을 return하여
스크립틀릿에서 변수에 저장한 후
그것을 expression으로 페이지에 나타낸 것이다.
이외에도 기능들이 많으니 구현해보고 사용해보나 정리하기엔 너무 사소하고 방대하다.
추후 필요할 때 다시 찾아서 쓰는 용도로도 충분할것같다.
Visual Studio Code설치
https://code.visualstudio.com/Download
Download Visual Studio Code - Mac, Linux, Windows
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Download Visual Studio Code to experience a redefined code editor, optimized for building and debugging modern web and cloud applications.
code.visualstudio.com
해당링크에서 다운로드 받아 설치한다.
그리고
설치 후 좌측위 메뉴중 가장 아래에 가서 필요한 애드온 들을 설치한다.
마지막으로 기존에 쓰던 폴더를 가져와서 편집을 한다.
여긴서 나는
총 4개의 애드온을 설치했으며,
이곳에 내가 쓰던 폴더를 불러와서 사용하면 된다.
이클립스에 비하여 상대적으로 가볍고 애드온기능이 많아 쓰는법을 알아두면 좋을것으로 보인다.
'Web > JSP국비지원 수업 정리' 카테고리의 다른 글
| Web 6일차 수업내용(javascript이어서 + jquery) (0) | 2023.06.26 |
|---|---|
| Web 5일차 수업내용(form / input / javascript function / js로 유효성 검사) (0) | 2023.06.23 |
| Web 3일차 수업내용 ( 선택자 이어서 / CSS 전반적인 사용 연습 ) (0) | 2023.06.21 |
| Web 2일차 수업내용 ( table마무리/이미지와 하이퍼링크) (0) | 2023.06.20 |
| Web 1일차 수업내용 (tomcat서버 연결 / html 문법1) (0) | 2023.06.19 |