버튼
특정 기능을 하는 버튼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function send(){
window.alert("id를 이용해 form을 선택해 데이터를 전달");
//버튼에 역할부여 - test.jsp로 데이터를 전달하는 기능
// 태그를 사용할경우 인덱스를 붙여줘야한다.
document.getElementsByTagName("form")[0].submit();
// 태그에 아이디를 부여했을 경우
// document.getElementById("f1").submit();
}
</script>
</head>
<body>
<form action="test.jsp" method="post">
ID : <input name="id"> <br/>
PW : <input type = "password" name = "pw">
<input type = "button" value = "버튼!" onclick ="send()">
</form>
</body>
</html>이미지 버튼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function send(){
window.alert("id를 이용해 form을 선택해 데이터를 전달");
//버튼에 역할부여 - test.jsp로 데이터를 전달하는 기능
// 태그를 사용할경우 인덱스를 붙여줘야한다.
document.getElementsByTagName("form")[0].submit();
// 태그에 아이디를 부여했을 경우
// document.getElementById("f1").submit();
}
</script>
</head>
<body>
<form action="test.jsp" method="post">
ID : <input name="id"> <br/>
PW : <input type = "password" name = "pw">
<input type = "image" src = "../images/check.png" value ="imgBtn">
</form>
</body>
</html>여러가지 버튼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<pre>
input type="radio" 여러 값 중 하나만 선택 가능
input type="checkbox" 하나 또는 여러개 선택 가능
input type="hidden" 클라이언트에게 보이지 않지만 서버로 전송되는 숨겨진 값
</pre>
<form action="test2.jsp"> <!-- method의 디폴트는 GET방식 -->
이름 : <input name ="name"><br/>
성별 : 남<input type="radio" name="gender" value="남">
성별 : 여<input type="radio" name="gender" value="여"><br/>
<input type = "hidden" value="비밀데이터" name="hd">
좋아하는 음식 :
<input type = "checkbox" name ="food" value="떡볶이"> 떡볶이
<input type = "checkbox" name ="food" value="피자"> 피자
<input type = "checkbox" name ="food" value="파스타"> 파스타
<input type = "checkbox" name ="food" value="곱창"> 곱창
<input type = "checkbox" name ="food" value="빙수"> 빙수
<input type = "checkbox" name ="food" value="냉면"> 냉면 <br/>
파일 : <input type = "file" name = "file"><br/>
<input type = "submit" value="전송">
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
String nm = request.getParameter("name");
String gd = request.getParameter("gender");
String hd = request.getParameter("hd");
String fl = request.getParameter("file");
//String fd = request.getParameter("food");
// 위처럼 하면 값이 하나만 나옴, 다중으로 값 사용하려면
String[] fd =request.getParameterValues("food"); //이러면 주소값이 나오고
String foods = "";
for(int i = 0; i<fd.length; i++){
foods += fd[i]+" ";
}
%>
<%="이름은 "+nm %><br/>
성별은 <%=gd %><br/>
사용자 몰래 넘어온 정보는 <%=hd %><br/>
선택한 파일 : <%=fl %><br/>
좋아하는 음식 [<%=foods %>]
</body>
</html>예전엔 서블릿을 통해 컴파일해서 복잡하게 처리해 보여줬는데 이젠 JSP를 통해 좀더 간편하게 HTML코드와 자바코드를 병행해 사용하는 공간이 만들어진것! (그 데이터를 받아서 한번에 처리 할 수 있는 형태를 제공)
JSP : Java Server page
클라이언트의 요청데이터를 받아서 처리하고 결과값을 출력 할 수 있는 페이지
post로 요청받았을경우 한글처리가 필요(request.setChara..)
서버 내에서 실행되고 결과만 클라이언트로 전송되는 형태
다중선택
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action ="test3.jsp" method="post">
<textarea name="ta" rows = "5" cols="20"></textarea><br/>
<select name="cars" multiple size="5">
<option value ="부가티">부가티</option>
<option value ="마세라티">마세라티</option>
<option value ="페라리">페라리</option>
<option value ="제네시스">제네시스</option>
<option value ="그랜저">그랜저</option>
</select><br/><br/>
<button>전송Btn</button>
</form>
</body>
</html><%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
request.setCharacterEncoding("utf-8");
String ta = request.getParameter("ta");
// 줄넘김 처리
ta = ta.replace("\r", "").replace("\n", "<br>");
String[] cars = request.getParameterValues("cars");
String car="";
for(int i=0; i<cars.length; i++){
car += cars[i] + " ";
}
%>
<%= "textarea에 입력한 내용 [" +ta +"]" %> <br/>
선택한 자동차 :<%=car %>
</body>
</html>필수입력항목
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
label{
<!-- label들이 인라인이라 조절이 안되니까 인라인블록으로 변경 --!>
display : inline-block;
width : 100px;
}
#b {
display : inline-block;}
}
</style>
<script>
window.onload=function(){
var btn = document.getElementsByTagName('button')[0];
btn.addEventListener('click',function(){
// alert("1");
var frm = document.getElementsByTagName('form')[0];
frm.submit();
})
}
</script>
</head>
<body>
<form action = "test4.jsp" method="post">
<fieldset>
<legend> 인적사항 </legend>
<label for="a">이름</label>
<input id ="a" name="nm"> <br>
<label for="b">성별</label>
<!-- 둘다 id = "b" 쓸 수 없기 때문에 div로 묶어야한다 -->
<div id="b">
여<input type="radio" value="여" name="gd">
남 <input type="radio" value="남" name="gd">
</div><br>
<label for="c">이메일</label>
<input type ="email" id="c" name="em"
pattern = "" > <br>
<label for="d">전화</label>
<input type ="tel" id="d" name ="t" required pattern = "[0-9]{2,3}-[0-9]{3,4}-[0-9]{4}"> <br>
<label for="e">생일</label>
<input type ="date" id="e" name="bir">
<input type = "color">
</fieldset>
<br>
<
<button type = "button">버튼</button>
</form>
</body>
</html>
0개의 댓글
