😁 html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
form{
 border : 1px solid blue;
 padding : 15px;
 width : 50%;
 margin : 5px blue;
} 

.lab{
	display : inline-block; /* 인라인요소의 가로세로 크기 지정하기 위해 사용 */
	width : 70px;
	height : 35px;	
}
 
</style>
</head>
<body>
<form action="formsend3.jsp" method="post">

	<label class = "lab">이름</label>
	<input type="text" name="name"><br>
	
	<label class = "lab">첨부파일</label>
	<input type ="file" name="file"><br>
	<br>
	<label>좋아하는 음식(한국)</label><br>
	<select name="korea" multiple="multiple" size="6">
		<option>떡볶이</option>
		<option selected>김밥</option>
		<option>라면</option>
		<option>돈까스</option>
		<option selected>우동</option>
		<option>오징어찌개</option>
		<option>김치찌개</option>
		<option>된장찌개</option>
	</select>
	<br><br>
	
	<label>좋아하는 음식(양식)</label><br>
	<select name="ameri">
		<option>떡볶이</option>
		<option>김밥</option>
		<option>라면</option>
		<option>돈까스</option>
		<option>우동</option>
		<option selected>오징어찌개</option>
		<option>김치찌개</option>
		<option>된장찌개</option>
	</select>
	<br><br>
	<input type="image" src="../images/check.png" alt="check.png"><br>
	<input type="submit" value="전송">
	<input type="button" value="확인">
	<input type="reset">
	<br><br>
	<button type="button">전송</button>
	<button type="submit">전송</button>
	<button>전송</button>
	
</form>
</body>
</html>

😁 jsp

 

<%@ 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>
<style type="text/css">
h1{
	color : red;
}
p{
	font-size : 1.5em;
}
table{
	border : 2px solid green;
}
td{
	width : 200px;
	height : 50px;
	text-align : center;
}
</style>
</head>
<body>
<h1>JSP : Java Server Page</h1>
<p>클라이언트 요청(전송)시 데이터를 전달 받아서 처리 하는 서버프로그램 이다</p>
<p>처리결과를 html태그를 이용하여 응답한다</p>

<%
	request.setCharacterEncoding("UTF-8");

	String userName = request.getParameter("name");
	String userFile = request.getParameter("file");
	
	String korea[] = request.getParameterValues("korea");
	
	String res = "";
	for(int i =0; i < korea.length; i++){
		res += korea[i]; 
	}
	
	String ameri = request.getParameter("ameri");
	


%>

<table border ="1">
	<tr>
		<td>이름</td>
		<td><%= userName %></td>
	</tr>
	
	<tr>
		<td>파일</td>
		<td><%= userFile %></td>
	</tr>
	
		<tr>
		<td>좋아하는 음식(korea)</td>
		<td><%= res %></td>
	</tr>
	
		<tr>
		<td>좋아하는 음식(ameri)</td>
		<td><%= ameri %></td>
	</tr>
	
</table>
</body>
</html>

😁 참고자료

 

😁 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[html/jsp] 의사클래스 상태  (0) 2022.12.27
[HTML/jsp] placeholder, 전화번호  (0) 2022.12.25
[HTML&Script] formtest2  (0) 2022.12.23
[HTML&Script] buttonproc  (0) 2022.12.23
[HTML&Script] formtest  (0) 2022.12.23

😀 formtest2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action= "formsend2.jsp" method="post">

이름<input type="text" name="name"><br>
성별<input type="radio" name="gender" value = "남자" checked>남자
   <input type="radio" name="gender" value = "여자" checked>여자<br>
좋아하는 음식 
<input type = "checkbox" name="food" value = "떡볶이" checked>떡볶이  
<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 = "돈까스" checked>돈까스   
<input type = "checkbox" name="food" value = "우동">우동<br>
자기소개 <br>
<textarea rows="5" cols="50" name="area"></textarea>
<br><br>
<input type="submit" value="전송">    
<input type="reset" value="취소">    
   
</form>
</body>
</html>

😀 formsend2

<%@ 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>
<style>
h1{
	color : red;
}
table{
	border : 2px solid green;
}
td{
	width : 200px;
	height : 50px;
	text-align : center;
}

</style>
</head>
<body>
<h1>JSP : Java Server Page</h1>
<%
	request.setCharacterEncoding("UTF-8");

	String userName = request.getParameter("name");
	String userGender = request.getParameter("gender");
	
	String foods[] = request.getParameterValues("food");
	
	String vfood = "";
	for(int i = 0; i < foods.length; i++){
		vfood += foods[i] + "<br>";
	}
	String textInfo = request.getParameter("area");
	//textInfo에는 엔터기호(\r\n)가 포함되어 있다
	
	textInfo = textInfo.replaceAll("\r", "").replaceAll("\n", "<br>");
%>

<table border ="1">
	<tr>
		<td>이름</td>
		<td><%= userName %></td>
	</tr>
	
	<tr>
		<td>성별</td>
		<td><%= userGender %></td>
	</tr>
	
		<tr>
		<td>좋아하는 음식</td>
		<td><%= vfood %></td>
	</tr>
	
		<tr>
		<td>자기소개</td>
		<td><%= textInfo %></td>
	</tr>
	
</table>
</body>
</html>

😀 참고자료

😀 실행

😊 buttonproc.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="../css/public.css" type="text/css">

<style type="text/css">
span{
	display : inline-block;
	width : 100px;
	height : 30px;
}

form{
	border : 2px solid blue;
	padding : 5px;
	width : 60%;
}
input[type=submit]{
	margin-left : 15%;
}
</style>

<script type="text/javascript">
function proc(){
	
	// 스크립트에서 html요소를 검색해서 값을 가져오기
	var vqty = document.ff.qty;
	var vprice = document.getElementById("price");
	
	var qvalue = vqty.value;
	var pvalue = vprice.value;
	
	var result = qvalue * pvalue;
	
	alert("결과 : " + result);
	
	
}
</script>
</head>
<body>
<pre>
스크립트에서 html요소를 검색-
name을 이용 : document.폼이름.대상이름
	vqty = document.ff.qty
	vprice = document.ff.price
id를 이용하는 방법
	vqty = document.getElementById('qty')
	vprice = document.getElementById('price')
검색한요소에서 입력된 값을 스크립트에서 사용하기
	vqty.value
	vprice.value
</pre>
<form name="ff" action = "buttonproc.jsp" method="post">
	<span>수량</span>
	<input type = "text" name="qty" id="qty"><br>
	
	<span>물품가격</span>
	<input type="text" name="price" id="price"><br>
	
	<input type="hidden" name="code" value="p101">
	
	<input type="submit" value="전송">
	<input type="button" value="확인" onclick="proc()">
</form>
</body>
</html>

😊 buttonproc.jsp

<%@ 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>
<style>
h1{
	color : red;
}
</style>
</head>
<body>
<h1>JSP : Java Sever Page</h1>
<%
	int aa = Integer.parseInt(request.getParameter("qty"));
	int bb = Integer.parseInt(request.getParameter("price"));
	
	String code = request.getParameter("code");

	int result = aa * bb;	
%>

<h3>결과</h3>
코드 : <%= code %><br>
수량 : <%= aa  %><br>
가격 : <%= bb %><br>
결과 : <%= result %> 
</body>
</html>

😊 참고자료


😊 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[HTML/jsp] file, select, button, multiple  (0) 2022.12.25
[HTML&Script] formtest2  (0) 2022.12.23
[HTML&Script] formtest  (0) 2022.12.23
[HTML & Script] videotest  (0) 2022.12.23
[HTML & Script] audiotest  (0) 2022.12.22

😁 formtest1

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<link rel="stylesheet" href="../css/public.css" type="text/css">

<style>
span{
	display : inline-block; /*span에 가로세로를 주려면 인라인과 블럭을 같이 사용해야함 */
	width : 100px;
	height : 30px;
	/* border-bottom : 1px dotted gold; */
}
form{
	width : 300px;
	border : 1px solid blue;
	height : 200px;
	padding : 20px;
}
</style>

</head>
<body>
<pre>
전송을 하면 서버의 실행페이지를 요청해서 실행후 응답 받는다
&lt;form action="formsend1.jsp" method="post">
action="formsend1.jsp" : 전송시 서버내의 실행 페이지 이름 - jsp 또는 서블릿 클래스 파일
method="post" : 전송방식
</pre>

<form action="formsend1.jsp" method="post">
  	<span>이름</span>
  	<input type="text" name="name"> <br>
  	
	<span>비밀번호</span> 
	<input type="password" name="pass"> <br>
	
	<span>아이디</span> 
	<input type="text" name="id"> <br>
	
 	<span>전화번호</span>
 	<input type="text" name="tel"> <br>
 	
	<span>이메일</span> 
	<input type="text" name="email"> <br>
	
 <input type="submit" value="전송">
</form>
</body>
</html>

😁 formsend1

<%@ 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>

<style>
h1{
	color : red;
	text-align : center;
}
p{
	font-size : 1.5em;
	text-align : center;
}
table{
	border : 2px solid blue;
	margin : 20px auto;
}
td{
	width : 200px;
	height : 50px;
	text-align : center;
}
</style>

</head>
<body>
<h1>JSP : Java Server page</h1>
<p>서버내에서 실행되는 자바 프로그램</p>
<p>html코드와 자바코드를 같이 기술한다.</p>
<p>자바코드를 기술하기 위해서는 &lt;% %&gt; 기호가 필요하다</p>

<%
	request.setCharacterEncoding("UTF-8");

	String userName = request.getParameter("name");
	String userId= request.getParameter("id");
	String userPass = request.getParameter("pass");
	String userMail = request.getParameter("email");
	String userTel = request.getParameter("tel");

	// DB연결해서 CRUD처리를 수행하고 결과값을 발생
	// 결과값으로 클라이언트쪽으로 응답
%>

<table border="1">
	<tr>
		<td>이름</td>
		<td><%= userName %></td>
	</tr>
	
	<tr>
		<td>아이디</td>
		<td><%= userId %></td>
	</tr>
	
	<tr>
		<td>이메일</td>
		<td><%= userMail %></td>
	</tr>

	<tr>
		<td>전화번호</td>
		<td><%= userTel %></td>
	</tr>
	
</table>

</body>
</html>

😁 참고자료


😁 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[HTML&Script] formtest2  (0) 2022.12.23
[HTML&Script] buttonproc  (0) 2022.12.23
[HTML & Script] videotest  (0) 2022.12.23
[HTML & Script] audiotest  (0) 2022.12.22
[HTML& Script] div와 span  (0) 2022.12.22
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="shortcut icon" type="image/x-icon" href="../images/check.png"/>

<style type="text/css">
pre{
	font-size : 1.5em;
	border : 5px double blue;
	border-left : none;
	border-right : none;
	padding : 10px;
	background-color : #f1faad;
}
video{
	width : 400px;
	height : 300px;
}
img{
	width : 100px;
	height : 100px;
}
#vif{
 display : none; /* 초기값 : none 화면에서 안보이도록 설정 block/ inline */
}

</style>

<script type="text/javascript">
function proc(){
	
	// iframe을 보이도록 설정 - ifram요소를 검색 - id를 이용한 검색
	var aa = document.getElementById("vif");
	
	aa.style.display = "block";
	
}
</script>
</head>
<body>
<pre>
스크립트에서 html요소를 검색하는 방법
태그이름을 이용 - aa = document.getElementsByTagName("iframe")[0]
id이름을 이용 - aa = document.getElementById("vif");
class이름을 이용 aa= document.getElementsByClassName("vcifr")[0]

</pre>

<video  autoplay="autoplay" controls="controls" > 
	<source src="../multi/trailer.ogv">
	<source src="../multi/trailer.mp4">
	<source src="../multi/trailer.webm">
</video>
<h1>유튜브 영상</h1>
<img src="../images/라이언2.jpg" alt ="라이언2.jpg" onclick="proc()"> 
<br><br>

<iframe id="vif" width="560" height="315" 
src="https://www.youtube.com/embed/KJysqZBi14k" 
title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>
</html>

😄 실행

⬇⬇라이언을 클릭하면 밑에처럼 동영상이 나온다.

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[HTML&Script] buttonproc  (0) 2022.12.23
[HTML&Script] formtest  (0) 2022.12.23
[HTML & Script] audiotest  (0) 2022.12.22
[HTML& Script] div와 span  (0) 2022.12.22
[HTML] iframe  (0) 2022.12.20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
 <h1>오디오 실행</h1>
 <audio src="../multi/old_pop.mp3" autoplay controls>
</audio>
</body>
</html>

✨ 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[HTML&Script] formtest  (0) 2022.12.23
[HTML & Script] videotest  (0) 2022.12.23
[HTML& Script] div와 span  (0) 2022.12.22
[HTML] iframe  (0) 2022.12.20
[HTML] 테이블병합-1220  (0) 2022.12.20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	
<style>
div,p,hi,span{
	margin : 10px auto;
	padding : 5px;
}
div{
	border : 2px solid blue;
	width : 80%;
}
p{
	 border : 2px solid skyblue; 
	width : 95%; /* div를 기준으로 95% */
}
h1{
	/* border : 2px solid skyblue; */
	width : 95%; 
	text-align : center;
}
span{ /* 인라인 요소는 크기지정 불가(img는 예외), 줄바꿈 안됨 , 인라인요소의 margin,padding은 좌우 여백만 사용가능*/
    border : 2px solid red; 
	font-weight : bold;
	color : red;
	
	margin : 20px;
}
img{
	width : 100px;
	height : 100px;
}
#imgp{
	text-align : center;
}
</style>
	
</head>
<body>
  <div>
  	<h1>진달래</h1>
  	<p id="imgp">
    	<img src="../images/진달래.jpg" alt="진달래.jpg"> 
    	<img src="../images/진달래.jpg" alt="진달래.jpg"> 
    </p>	
  	<p>
  	봄꽃 중에 화사하기로는 제일이다. 철쭉과 매우 비슷하지만,[2] 독성이 강한 철쭉과 달리 <span>진달래는 식용이 가능하다</span>. 그래도 미량의 독이 있으니 잘못 먹으면 심한 복통에 시달릴 수 있어 주의해야 한다. 독소가 많은 꽃술은 떼어내고 먹어야 한다.

진달래와 철쭉은 꽃 자체만으로는 맨눈으로 구분하기 어려운데, 대신에 진달래가 피는 시기가 철쭉보다 이르고, 진달래는 철쭉과 달리 꽃이 다 지고 난 다음 잎이 돋아나므로 구별하기 쉽다. 반면에 철쭉은 잎이 먼저 나오고 꽃이 피거나, 꽃과 잎이 같이 핀다. 또한 진달래와 철쭉을 비교하면 진달래의 잎은 끝이 뾰족하고 철쭉의 잎은 끝이 둥글어 이것으로도 구분하기도 하나, 이 경우 진달래와 잎의 생김새가 비슷한 산철쭉이나 영산홍을 진달래와 헷갈릴 수 있다.

시기상으로도 진달래는 남부 지방을 기준으로 꽃이<span> 3월 초 무렵</span>부터 피는 데 반해, 철쭉은 훨씬 따뜻해져야 핀다. 3월 초 무렵에 산에 핀 <span>분홍색 빛깔의 꽃</span>은 거의 진달래라고 보면 된다.

또한, 철쭉은 주로 공원 등에 인위적으로 심는 게 많다 보니, 대체로 나무 자체가 작고 오밀조밀한 편이지만, 진달래는 야생 꽃나무들이 대체로 그렇듯이 가지가 얼기설기 나 있고 차지하는 공간의 넓이도 더 넓다.
  	</p>
  </div>
</body>
</html>

😀 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[HTML & Script] videotest  (0) 2022.12.23
[HTML & Script] audiotest  (0) 2022.12.22
[HTML] iframe  (0) 2022.12.20
[HTML] 테이블병합-1220  (0) 2022.12.20
[HTML] 테이블 -1220  (0) 2022.12.20
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<style>
iframe{
	width : 80%;
	height : 500px;
	border : 2px dotted orange;
}
</style>

</head>
<body>
<a href="http://www.naver.com" target="_blanck">네이버</a>
<a href="table연습.html" target="_self">table연습</a>
<a href="무궁화.html" target="flowers">무궁화</a>
<a href="진달래.html" target="flowers">진달래</a>
<a href="수선화.html" target="flowers">수선화</a>
<a href="라일락.html" target="flowers">라일락</a>
<br>
<hr color= "pink">
<br>
<iframe src="라일락.html" name="flowers" title="flowers"></iframe>
</body>
</html>
무궁화,진달래,수선화,라일락.html을 만들고 href을 이용해 해당html로 이동시킨다.

😀 실행

'웹프로그래밍(HTML, CSS3, JavaScript)' 카테고리의 다른 글

[HTML & Script] audiotest  (0) 2022.12.22
[HTML& Script] div와 span  (0) 2022.12.22
[HTML] 테이블병합-1220  (0) 2022.12.20
[HTML] 테이블 -1220  (0) 2022.12.20
[HTML/notepad++] id를 이용한 a링크-1219  (0) 2022.12.20

+ Recent posts