23.03.28 화 14일차
PHP(오라클,비쥬얼 스튜디오)
- 폼 태그 특징
: <body></body> 태그 안에 작성
: <table></table> 태그 밖에 <form></form> 태그로 감싸주기- 자주 사용하는 폼 태그
<form action=파일명.확장자 method="age or post">
<input type="text"> 텍스트 박스
<input type="radio"> 라디오 버튼
<input type="checkbox"> 체크박스
<input type="submit"> 버튼(다음 액션으로 전송)
<input type="button"> 버튼(단순 클릭)
</form>- 메소드 get 과 post의 공통점, 차이점
-- 공통점
:웹에서의 사용
-- 차이점
get
: url에 넘어가는 값이 보인다. (오래된 방법)
: 소량 전송(약 2MB (2048자))
ex)링크
post
: 자료실( 파일(바이너리값)을 넘길때) ,대량 전송
: url에 값이 보이지 않음(조금 더 발전된 방법)
*태그
<font size=숫자> 텍스트 </font>
: 폰트 사이즈 및 폰트 수정 태그
<caption></caption>
: 제목 고정
<select></select>
: 드롭박스
<option value="Text">text</option>
: 드롭박스 메뉴(옵션)- ID
id = 사용할 태그 이름
:객제로 불러올때 대비해 각 객체별 ID 부여< INPUT > 태그 코드
- 코드 1(TEXT)
-- HTML 파일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<br><br><br>
<div align="center">
<h2> 회원가입 </h2>
<form action=form_ok0328.jsp method=get>
<table border=1>
<tr>
<td>아이디 :</td>
<td><input type=text name=id ></td>
</tr>
<tr>
<td>이름 :</td>
<td><input type=text name=name ></td>
</tr>
<tr>
<td colspan=2 align="center">
<input type=submit value="보내기" ></td>
</tr>
</form>
</table>
</div>
</body>
</html>
- 코드 2(RADIO)
-- HTML 파일(RADIO)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<br><br><br>
<form action="form_ok0328.jsp" method=get>
<table border=1 >
<caption><font size=5>회원 가입 페이지</font></caption>
<br>
<tr>
<td>이름 </td>
<td><input type=text name=name ></td>
</tr>
<tr>
<td>나이 </td>
<td><input type=text name=age ></td>
</tr>
<tr>
<td>좋아하는과일 </td>
<td>
<input type=radio name=radio value="apple" > 사과
<input type=radio name=radio value="banana" > 바나나
<input type=radio name=radio value="orange" > 오렌지
</td>
</tr>
<tr>
<td>좋아하는 과일 </td>
<td>
<input type=radio name=radio1 value="apple" > 사과
<input type=radio name=radio1 value="banana" > 바나나
<input type=radio name=radio1 value="orange" > 오렌지 </td>
</tr>
</table>
</form>
</div>
</body>
</html>-- JSP 파일(RADIO)
: HTML 파일에서 submit 동작시 액션되는 화면
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF=8">
- 방법 1 스트
<%
-- 대소문자 구분 필요
String radio1=request.getParameter("radio1");
%>
좋아하는 과일 : <%=request.getParameter("radio1")%> <br>
----------------------------------------------------------------
- 방법 2 (테이블 td 추가하여 출력)
<meta charset="UTF=8">
<style>
table{
width:300px;
}
td{
font-size:14px;
height:30px:
}
</style>
<%
String radio1 =request.getParameter("radio");
%>
<div align=center>
<br><br><br>
<table border=1>
<caption><font size=5> 회원가입 </font></caption>
<tr>
<td>좋아하는 과일</td>
<td><%=radio1 %></td>
</tr>
</table>
</div>
- 코드 3 (CHECKBOX)
-- HTML 파일 (CHECKBOX)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<br><br><br>
<form action=form_ok0328.jsp method=post>
<table border=1 >
<caption><font size=5>회원 가입 페이지</font></caption>
<tr>
<td>좋아하는취미 </td>
<td>
<input type=checkbox name=ch1 value="등산" > 등산
<input type=checkbox name=ch1 value="여행" > 여행
<input type=checkbox name=ch1 value="영화" > 영화
</td>
</tr>
</table>
</form>
</div>
</body>
</html>jsp 파일에서 String과 if,for문을 통해
라디오 버튼을 복수로 체크한 목록을
출력할 수있도록 코딩하였다.
String을 처음 사용해보니 보지 않고는 작성하기가
꽤나 어렵다.
String, for, while, if 문이
코딩의 주된 구성이라고 하셨으니
집중적으로 이해하고 암기해야겠다.
-- JSP 파일 (CHECKBOX 복수선택 목록출력)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF=8">
<style>
table{
width: 300px;
}
td{
font-size: 14px;
height: 30px:
}
</style>
<%
String[] chs = request.getParameterValues("ch1");
// 배열값을 복수선택하여 출력하기
String[] chs = {"A1","B2","C3","D4","E5"};
//배열값을 입력한 대로 전부 출력하는 방식
String str = "";
int i=0; int k=0;
for(String ch : chs){
i++;
int k= chs.length;
if (i != k){
str += ch + ", ";
}else{
str += ch +" ";
}
}
System.out.print(" 선택개수 : " + k); -- 콘솔창에 표시
%>
<div align=center>
<br><br><br>
<table border=1>
<caption><font size=5> 회원가입 </font></caption>
<tr>
<td>좋아하는 취미</td>
<td><%=str %></td>
</tr>
</table>
</div>- 코드4 (SELECT,OPTION)
-- HTML 파일(SELECT,OPTION)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<br><br><br>
<form action=form_ok0328.jsp method=post>
<table border=1 >
<caption><font size=5>회원 가입 페이지</font></caption>
<tr>
<td>학년 </td>
<td>
<select name=select1>
<option value="1학년" > 1학년 학생</option>
<option value="2학년" > 2학년 학생</option>
<option value="3학년" > 3학년 학생</option>
</select>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>-- JSP 파일 (SELECT,OPTION)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF=8">
<style>
table{
width: 300px;
}
td{
font-size: 14px;
height: 30px:
}
</style>
<%
request.setCharacterEncoding("UTF-8");
String select1 = request.getParameter("select1");
%>
<br>
<div align=center>
<br><br>
<table border=1>
<caption><font size=5> 회원가입 </font></caption>
<tr>
<td>학년 </td>
<td><%=select1 %></td>
</tr>
</table>
</div>- 코드5 (TEXTAREA)
: rows는 열(가로), cols는 행(세로)
-- HTML파일 (TEXTAREA)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<br><br><br>
<form action=form_ok0328.jsp method=post>
<table border=1 >
<caption><font size=5>회원 가입 페이지</font></caption>
<tr>
<td>특이사항 </td>
<td>
<textarea rows=5 cols =30 name=textarea1></textarea>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
-- JSP 파일 (TEXTAREA)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF=8">
<style>
table{
width: 400px;
}
td{
font-size: 14px;
height: 30px:
}
</style>
<%
request.setCharacterEncoding("UTF-8");
String textarea1 = request.getParameter("textarea1");
%>
<br>
<div align=center>
<br><br>
<table border=1>
<tr>
<td>특이사항 </td>
<td><textarea cols=30 rows=5 ><%=textarea1 %></textarea></td>
</tr>
</table>
</div>- 코드6 (EMAIL)
-- HTML파일 (EMAIL)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<br><br><br>
<form action=form_ok0328.jsp method=post>
<table border=1 >
<caption><font size=5>회원 가입 페이지</font></caption>
<tr>
<td>이메일 </td>
<td>
<input type=email name=email1 id=email1>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>-- JSP 파일 (EMAIL)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF=8">
<style>
table{
width: 400px;
}
td{
font-size: 14px;
height: 30px:
}
</style>
<%
request.setCharacterEncoding("UTF-8");
String email1 = request.getParameter("email1");
%>
<br>
<div align=center>
<br><br>
<table border=1>
<tr>
<td>이메일 </td>
<td><%=email1 %></td>
</tr>
</table>
</div>- 1-6번 코드 form 출력 화면
- 코드 7 (COLOR)
-- HTML 파일 (COLOR)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<br><br><br>
<form action=form_ok0328.jsp method=post>
<table border=1 >
<caption><font size=5>회원 가입 페이지</font></caption>
<tr>
<td>색상 </td>
<td>
<input type=color name= color >
</td>
</tr>
</table>
</form>
</div>
</body>
</html>-- JSP 파일 (COLOR)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF=8">
<style>
table{
width: 400px;
}
td{
font-size: 14px;
height: 30px:
}
</style>
<%
request.setCharacterEncoding("UTF-8");
String color = request.getParameter("color");
%>
<br>
<div align=center>
<br><br>
<table border=1>
<tr>
<td>색상 </td>
<td><%=color %></td>
</tr>
</table>
</div>- 코드 8 (DATE)
-- HTML 파일 (DATE)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<br><br><br>
<form action=form_ok0328.jsp method=post>
<table border=1 >
<caption><font size=5>회원 가입 페이지</font></caption>
<tr>
<td>날짜 </td>
<td>
<input type= date name= date >
</td>
</tr>
</table>
</form>
</div>
</body>
</html>-- JSP 파일 (DATE)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF=8">
<style>
table{
width: 400px;
}
td{
font-size: 14px;
height: 30px:
}
</style>
<%
request.setCharacterEncoding("UTF-8");
String date = request.getParameter("date");
%>
<br>
<div align=center>
<br><br>
<table border=1>
<tr>
<td>날짜 </td>
<td><%=date %></td>
</tr>
</table>
</div>- 코드 9 (PASSWORD)
-- HTML 파일 (PASSWORD)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<div align="center">
<br><br><br>
<form action=form_ok0328.jsp method=post>
<table border=1 >
<caption><font size=5>회원 가입 페이지</font></caption>
<tr>
<td>비밀번호 </td>
<td>
<input type= password name= password>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>-- JSP 파일 (PASSWORD)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<meta charset="UTF=8">
<style>
table{
width: 400px;
}
td{
font-size: 14px;
height: 30px:
}
</style>
<%
request.setCharacterEncoding("UTF-8");
String password = request.getParameter("password");
%>
<br>
<div align=center>
<br><br>
<table border=1>
<tr>
<td>비밀번호 </td>
<td><%=password %></td>
</tr>
</table>
</div>- 7-9번 코드 form 출력 화면
- 느낀점
코딩을 하며 전문 지식이 많이 부족하단걸 느꼈다.
기본 For, While, if문을 작성하는 부분에서
이해한 부분보다 더 심화 과정이 필요하다는
생각이 들었다.
String을 이용해서 출력문을 작성하는 방법도
배웠으니 내것으로 만들도록 자주 작성해 봐야겠다.
그래도 내가 만든 코드로 결과물이 눈으로 보여지니
보다 더 흥미가 생기고 재밌는거 같다.
꼭 다방면에서 능력있는 개발자가 되고싶다.
Back-end Developer Preparation Students