[CH06]폼 태그

티스토리 뷰

수업/└JSP

[CH06]폼 태그

onlyun 2022. 2. 14. 15:44

-[HTML]입력양식 폼

https://exploreryun.tistory.com/18

-[HTML]입력양식 인풋

https://exploreryun.tistory.com/21?category=991572

※ 폼 태그 종류 ※

1. 폼(form) 태그

사용자가 웹 브라우저를 통해 입력한 데이터를 한번에 웹 서버로 전송. 사용자와 웹 어플리케이션의 상호작용.

전송한 데이터는 웹 서버가 처리하고 처리 결과에 따라 다른 웹 페이지 보여줌

사용자 요구사항 파악할 때 가장 많이 사용하는 웹 어플리케이션

(1) 폼 태그 속성

필요에 따라 선택적 사용

action	method	name
입력받은 데이터를 처리하는 페이지	GET \| POST	식별값
target	enctype	accept-charset
응답 실행할 프레임	MIME 유형 설정	문자 인코딩 설정

2. Input 태그

입력 또는 선택 등을 할 수 있도록 공간을 만드는 태그. 단독 사용 가능(종료 태그 생략 가능)

-name : 식별값

-value : 초기값

-hidden : 보이지 않게 숨겨서 값을 전송할 때 사용

-submit : form 태그 action 속성에 설정된 url로 전송(전달)

(*action="#" 설정하면 자기자신 페이지로 이동)

#예제) 폼 태그 및 인풋 태그 사용해 회원가입 양식 만들기

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
    <h3>회원가입</h3>
    <form action="#" name="member" method="post">
        <p>I  D : <input type="text" name="id" required> <input type="button" value="중복검사"></p>
        <p>P  W : <input type="password" name="pw"></p>
        <p>NAME : <input type="text" name="name" autofocus></p>
        <p>TEL  : <input type="text" name ="phone1" maxlength="4" size="4">
                  - <input type="text" name ="phone2" maxlength="4" size="4">
                  - <input type="text" name ="phone3" maxlength="4" size="4"></p>
        <p>SEX  : <input type="radio" name="sex" value="male" checked>MALE
                  <input type="radio" name="sex" value="female">FEMALE</p>
        <p>HOBBY : BOOK<input type="checkbox" name="hobby1" checked>
                   EXERCISE<input type="checkbox" name="hobby2">
                   MOVIE<input type="checkbox" name="hobby3"> </p>
        <p><input type="submit" value="SUBMIT">
           <input type="reset" value="RESET"></p>
    </form>
</body>
</html>

3. select 태그

선택할 수 있는 목록을 만드는 태그.

<form>
    <select name="subjects">
        <option value="1" selected>HTML</option>
        <option value="2">CSS</option>
        <option value="3">JavaScript</option>
        <option value="4">Jquery</option>
    </select> <!--데이터가 전송될 때는 value값으로 넘어감.-->
</form>

#예제) 위의 회원가입 양식에서 전화번호를 select로 변경

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
    <h3>회원가입</h3>
    <form action="#" name="member" method="post">
        <p>I  D : <input type="text" name="id" required> <input type="button" value="중복검사"></p>
        <p>P  W : <input type="password" name="pw"></p>
        <p>NAME : <input type="text" name="name" autofocus></p>
        <p>TEL  : <select name="phone1">
                      <!-- value값이 실제 서버에 전송되는 값 -->
                      <option value="010">010</option> 
                      <option value="011">011</option>
                      <option value="016">016</option>
                      <option value="019">019</option>
                   </select>
                   - <input type="text" name ="phone2" maxlength="4" size="4">
                   - <input type="text" name ="phone3" maxlength="4" size="4"></p>
        <p>SEX  : <input type="radio" name="sex" value="male" checked>MALE
                  <input type="radio" name="sex" value="female">FEMALE</p>
        <p>HOBBY : BOOK<input type="checkbox" name="hobby1" checked>
                   EXERCISE<input type="checkbox" name="hobby2">
                   MOVIE<input type="checkbox" name="hobby3"> </p>
        <p><input type="submit" value="SUBMIT">
           <input type="reset" value="RESET"></p>
    </form>
</body>
</html>

└option value값이 실제 서버에 전달되는 값.

4.textarea

여러 줄의 텍스트 입력.

<form>
    <textarea row="5" cols="50">텍스트를 작성하는 공간</textarea>
</form>       <!--5행, 50개 문자가 들어갈 정도의 열 크기-->

-name : 이름 설정

-wrap : soft(자동줄바꿈) | off(줄바꿈 안 함) | hard(soft와 비슷)

5. 폼데이터 처리 ★

getParametter() 메소드를 이용하여 요청 파라미터의 값을 얻을 수 있음.

String 변수 = request.getParameter(요청 파라미터 이름);

-요청 파라미터 이름 : 각 인풋 태그에서 설정한 name의 속성값

#예제) 회원가입 입력 페이지 출력방식 1

체크박스의 취미 값을 배열로 가져와 출력하는 방법

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
    <h3>회원가입</h3>
    <form action="#" name="member" method="post">
        <p>I  D : <input type="text" name="id" required> <input type="button" value="중복검사"></p>
        <p>P  W : <input type="password" name="pw"></p>
        <p>NAME : <input type="text" name="name" autofocus></p>
        <p>TEL  : <select name="phone1">
                      <!-- value값이 실제 서버에 전송되는 값 -->
                      <option value="010">010</option> 
                      <option value="011">011</option>
                      <option value="016">016</option>
                      <option value="019">019</option>
                   </select>
                   - <input type="text" name ="phone2" maxlength="4" size="4">
                   - <input type="text" name ="phone3" maxlength="4" size="4"></p>
        <p>SEX  : <input type="radio" name="sex" value="male" checked>MALE
                  <input type="radio" name="sex" value="female">FEMALE</p>
        <p>HOBBY : BOOK<input type="checkbox" name="hobby" value="Book" checked>
                   EXERCISE<input type="checkbox" name="hobby" value="Exercise">
                   MOVIE<input type="checkbox" name="hobby" value="Movie"> </p>
        <p><input type="submit" value="SUBMIT">
           <input type="reset" value="RESET"></p>
    </form>
</body>
</html>

-프로세스 : 취미(hobby)의 값을 배열로 가져와 출력

<%@ 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>
	<%
		request.setCharacterEncoding("utf-8");
	
		String id = request.getParameter("id");
		String pw = request.getParameter("pw");
		String name = request.getParameter("name");
		String phone1 = request.getParameter("phone1");
		String phone2 = request.getParameter("phone2");
		String phone3 = request.getParameter("phone3");
		String sex = request.getParameter("sex");
		String[] hobby = request.getParameterValues("hobby");
		String comment = request.getParameter("comment");
	%>
	<p> I  D : <%= id %></p>
	<p> P  W : <%= pw %></p>
	<p> NAME : <%= name %></p>
	<p> PHONE : <%= phone1 %>-<%= phone2 %>-<%= phone3 %></p>
	<p> S E X : <%= sex %></p>
	<p> HOBBY : <%
		if(hobby != null){
			for(int i=0; i<hobby.length;i++){
				out.println(" "+hobby[i]);
			}
		}
	%></p> <!--x표시 뜨는데 실행은 됨. 근데 취미 값이 출력 안 됨. 뭐야?-->
	<p> COMMENT : <%= comment %></p>
</body>
</html>

└체크박스 선택 시, 선택한 Value값 출력됨.

-출력 결과

#예제) 값 한꺼번에 가져오기(한꺼번에 출력하기)

-프로세스 수정

출력문을 일일이 적어주는 방식 대신 Enumeration과 getParameterNames()를 이용해 값들을 한꺼번에 받아와

테이블 형식으로 출력.

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ page import="java.io.*, java.util.*" %><!-- Enumeration 사용 준비 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- 테이블형태로 출력 -->
    <table border="1">
        <tr>
            <th>요청 파라미터 이름</th>
            <th>요청 파라미터 값</th>
        </tr>
        <%
            request.setCharacterEncoding("utf-8");
			
            Enumeration paramNames = request.getParameterNames();
            while(paramNames.hasMoreElements()){
                String name = (String) paramNames.nextElement();
                out.println("<tr><td>"+name+"</td>\n");
                String paramValue = request.getParameter(name);
                out.println("<td>"+paramValue+"</td></tr>\n");
            }
        %>
    </table>
</body>
</html>

-출력결과

#예제)체크 박스에서 여러 개 선택했을 때, 값이 한 줄에 출력되도록.

~~-프로세스 수정__안 나옴(나중에 수업코드 받아서 확인)~~ → 오타 확인

<%@ page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<%@ page import="java.io.*, java.util.*" %><!-- Enumeration 사용 준비 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
</head>
<body>
<!-- 테이블형태로 출력 -->
    <table border="1">
        <tr>
            <th>요청 파라미터 이름</th>
            <th>요청 파라미터 값</th>
        </tr>
        <%
            request.setCharacterEncoding("utf-8");
			
            Enumeration paramNames = request.getParameterNames();
            while(paramNames.hasMoreElements()){
                String name = (String) paramNames.nextElement();
                out.println("<tr><td>"+name+"</td>\n");
                if(name.equals("hobby")){
                    String[] hobby = request.getParameterValues("hobby");
                    if(hobby != null){
                        out.println("<td> ");
                        for(int i=0; i<hobby.length;i++){
                            out.println(" "+hobby[i]);
                        }
                        out.println("</td></tr>\n");
                    }else{
                        out.println("<td></td></tr>\n");
               }
           }else{
               String paramValue = request.getParameter(name);
               out.println("<td>"+paramValue+"</td></tr>\n");
           }
        }
        %>
    </table>
</body>
</html>

-출력 결과

취미(체크박스)에서 여러 개 선택한 결과가 출력됨.

저작자표시

'수업 > └JSP' 카테고리의 다른 글

[CH13]세션(Session) (0)	2022.02.17
[CH07]파일업로드 (0)	2022.02.15
[CH05]내장객체 (0)	2022.02.14
[00]주석 (0)	2022.02.13
[04]액션태그 (0)	2022.02.11

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/04 »
일	월	화	수	목	금	토
		1	2	3	4	5
6	7	8	9	10	11	12
13	14	15	16	17	18	19
20	21	22	23	24	25	26
27	28	29	30

글 보관함

LOG.info("yun's dev");

티스토리 뷰

[CH06]폼 태그

1. 폼(form) 태그

2. Input 태그

3. select 태그

4.textarea

5. 폼데이터 처리 ★

'수업 > └JSP' 카테고리의 다른 글

티스토리툴바