[HTML]입력양식_<form> 태그

티스토리 뷰

수업/└HTML&CSS

[HTML]입력양식_<form> 태그

onlyun 2022. 1. 2. 01:28

*데이터가 오가는 것을 제대로 확인하기 위해 환경 구축

아파치 톰캣(웹 서버), jdk(java developer kit)

웹 양식 : 웹 문서에 어떤 데이터를 입력하고 그 결과값을 가져오기 위해 사용.

ex) 구글 텍스트 입력 폼, 네이버 로그인 입력 폼 등등

1. <form> 태그

웹 양식을 만드는데 사용하는 태그. <input> 태그를 감쌈.

사용자가 입력할 수 있는 HTML 폼을 생성하는데 사용되는 태그

<input> 태그의 부모 태그, 틀 같은 거

<form name="입력 폼 이름" action="웹 프로그램 페이지" method="전달 방식">
    <input type="유형" name="입력 폼 변수" value="전달 값">
</form>

-<form> 태그 속성

└action : 사용자가 입력한 데이터를 받아 처리하기 위한 웹 프로그램(JSP, PHP, ASP 등)의 페이지 지정

└method : 웹 서버와 클라이언트(웹 브라우저) 간의 통신 방법 지정. get 방식, post 방식

└name : 폼

-<input> 태그 속성

사용자가 데이터를 입력할 수 있는 입력 필드 지정

└type : 유형(폼의 모양과 기능) 결정. text, password, radio, checkbox 등등.

└name : 서버로 전달되는 이름을 설정. 서버에게 중요. name을 기준으로 찾음. key값. 변수 역할.

└value : 입력 태그의 초기 값을 설정

radio, checkbox는 초기값 설정. text나 password 같은 건 초기값 설정 x

*input 태그 속성의 종류는 <input>글에서 ↓

https://exploreryun.tistory.com/21

(1) method - get

URL 뒤에 파라미터(매개변수)를 붙여서 데이터 전달 방식. 글자수 제한(2,048자)

URL을 보면 어떤 데이터를 전송하고자 하는지 알 수 있어서 보안에 취약.

<form name="INPUT01" action="01_getdata.jsp" method="get">
    <p>이름<input type="text" name="user"></p> <!--이름 적는 곳-->
    <p>전공<input type="text" name="dept"></p> <!--전공 적는 곳-->
    <input type="submit" value="전송"> <!--제출 버튼-->
    <input type="reset" value="초기화"> <!--초기화 버튼-->
</form>

[ 전송 ] 클릭하면 다음 URL로 전달됨.

http://localhost/book/page.jsp?user=Hong&dept=computer

사용자가 입력한 이름, 전공 값이 보여짐.

(2) method - post

HTTP Request 헤더에 파라미터(매개변수)를 붙여 데이터 전송하는 방식. 글자수 제한 없음.

위의 소스코드에서 전달 방식만 post로 바꾸었을때

[ 전송 ] 클릭하면 다음 URL로 전달됨. 파일만 표시됨.

http://localhost/book/page.jsp

*웹에서 데이터가 넘어가는 것을 '쿼리스트링'이라고 한다.

(참고) <form> 태그에 참조된 jsp 파일 소스 코드

<%@page language="java" contentType="text/html; charset=EUC-KR" pageEncoding="EUC-KR"%>
<html>
<head>
<title>GET 방식 요청</title>
</head>
<body>
<!-- JSP 문법 작성 -->
<%
String strName=request.getParameter("name");
String strMajor=request.getParameter("major");
out.println("이름 :" + strName + "<br/>");
out.println("학과 :" + strMajor + "<hr/>");
%>
웹 브라우저 URL 주소 입력 부분을 살펴보세요.
</body>
</html>

ch05_입력양식 태그와 공간 분할 참조

저작자표시 (새창열림)

'수업 > └HTML&CSS' 카테고리의 다른 글

[HTML]입력양식_<input> (0)	2022.01.02
[HTML]입력양식_<fieldset>, <legend> (0)	2022.01.02
[HTML]미디어 태그 <img>, <audio>, <video> (0)	2022.01.02
[HTML]표를 만드는 <table> 태그 (0)	2022.01.01
[HTML]목록 태그 <ul>, <ol>, <dl> (0)	2022.01.01

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/12 »
일	월	화	수	목	금	토
	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	31

글 보관함

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

티스토리 뷰