2020.10.29 HTML 수업노트

BUTTON.html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

select{

width : 150px;

}

form {

witdh : 50 % ;

padding : 5px;

bordr : 1px solid blue;

}

div {

border : 1px dotted orange;

padding : 10px;

}

</style>

//변수 선언 : var 변수명 or let 변수명 or const 변수명

// const 상수를 뜻함

function proc1(){

var name = document.ff.name.value

var area = document.ff.area.value

area = area.replace (/\r/g, "").replace(/\n/g, "<br>");

// //g 는 모든것 거기 안에 다가 \r\n 을 넣어줌

//const name 일때는 name 을 바꿀 수 없다, final 같은 개념인듯

//ECMAScript

//표준 no - es2 , es4 , es6, es8

// alert(name + "\n" + area );

sel = document.ff.fruit.options.length;

var res = "<h1>실행결과</h1>"

res += "이름 : " + name + "<br>";

res += "내용 : <br> " + area + "<br>";

res += "좋아하는 과일 : <br> ";

//<h1> 요소가 들어있으니까 textContent 가 아니라 innerHtml 로 출력

for(var i=0; i < sel ; i++){

if (document.ff.fruit.options[i].selected ) {

res += document.ff.fruit.options[i].value + " ";

}

document.querySelector('#result').innerHTML = res;

//document.querySelector('#result').textContent = res; 를 쓰면 <h1> 같이 html

//요소가 있어도 전부 문자취급처럼 처리된다.

}

function proc2() {

document.ff.submit(); // jsp 가 수행된다.

}

</script>

</head>

<body>

<pre>

여러줄 입력 : <textarea> </textarea>

기능이 없다 . onclick=""에 의해서 기능을 부여

: <button type="button" onclick="">확인</button>

전송기능을 수행

: <button type="submit">전송</button>

select 요소의 선택한 값 전달

jsp 에서는 : String sel[] = request.getParameterValues("fruit") -sel[i]

script 에서는 : document.ff.fruit.options[i].value //(name="fruit")

</pre>

이름<input name="name"><br>

남기고 싶은말 <br>

<br>

좋아하는 과일 <br>

<!-- multiple 하면 여러개를 선택할 수 있다. size="6" 는 6개가 다 보이게 한다.

"multiple" 은 있어도 되고 없어도 된다. -->

</select>

<button type="button" onclick="proc1()">확인</button> - proc1 () 함수 호출.script (프론트엔드에서 실행) 에서 결과를 실행한다. <br>

<button type="button" onclick="proc2()">확인전송</button> --proc2() 함수 호출-> 함수내에서 submit() 을 실행한다. -> jsp 로 간다. <br>

<button type="submit">전송</button> -직접 form 의 action="buttonsend.jsp" (서버에서 실행) 이 실행되어 결과 <br>

<button>전송</button> - -직접 form 의 action="buttonsend.jsp" (서버에서 실행) 이 실행되어 결과 <br>

</form>

//form 안에 있는게 아니라서 ff.~ 이렇게 호출이 안되니까. <br>

확인버튼 클릭하면 proc1() 함수가 호출되어 실행결과를 출력한다. <br>

script 에서 div 에 접근하기 위해서 <br>

표준넘버 6번이전에는 이렇게 사용 : 실행효율면에서는 더 낫다. 시간이 더 빠르다.

document.getElementById('result') <br>

document.getElementsByTagName('div') [0] <br>

-------------------------------------

표준넘버 6에서는 이렇게사용. 편리하다. <br>

document.querySelector("#result"") <br>

document.querySelector("div") //여러개가 있어도 첫번째꺼 1개만 접근이 가능하다. <br>

이 방법으로 접근한다. <br>

-접근요소의 출력 - innerHTML / textContent <br>

: content (출력하고자 하는 내용 속) 라는 곳에 html 태그가 있을때 innerHTML 사용 <br>

출력하고자 하는 내용 속에 html 태그가 없을때 textContent 를 이용한다. <br>

</div>

</div>

</body>

</html>

----------------------------------------------------------------------------------------------------

buttonsend.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html >

<html>

<head>

<title>Insert title here</title>

</head>

<body>

request.setCharacterEncoding("UTF-8");

String userName = request.getParameter("name");

String content = request.getParameter("area");

//입력시 엔터(\r\n)를 출력을 위해서 <br> 태그로 변환 한다.

// carriage return / new line

content = content.replaceAll("\r\n", "<br>");

//만약 잘 안먹으면 밑에처럼 한다.

//content = content.replaceAll("\r", "").replaceAll("\n", "<br>");

String sel[] = request.getParameterValues("fruit");

String res = " ";

for(int i = 0 ; i <sel.length ; i++){

res += sel[i] + " , ";

}

int idx = res.lastIndexOf(",");

res = res.substring(0, idx);

이름 : <%=userName %><br>

내용 : <br>

<%=content %>

<br>

좋아하는 과일 : <%=res %><br>

</body>

</html>

----------------------------------------------------------------------------------------------------

form 전송 html

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

label{

display : inline-block;

width : 120px;

height : 30px;

}

form {

border : 1px solid blue;

padding : 10px;

width : 60% ;

margin-left : 10% ;

margin-top : 100px;

}

pre {

background : rgba(30%, 55%, 80%, 0.3);

}

</style>

</head>

<body>

<pre>

화면에서 보이지 않지만 서버로 데이터를 전송한다.

전송 submit 을 수행한다.

<input> 에서 type 을생각하면 default 는 text 다 .

</pre>

<label>좋아하는 과일 :</label> <input type="checkbox" name="fruit" value="사과">사과

<input type="checkbox" name="fruit" value="복숭아">복숭아

<input type="checkbox" name="fruit" value="참외">참외

<input type="checkbox" name="fruit" value="포도">포도

<input type="checkbox" name="fruit" value="수박">수박

<input type="checkbox" name="fruit" value="오렌지">오렌지

<input type="checkbox" name="fruit" value="딸기">딸기

<br>

<label>성별 :</label> <input type="radio" name="gender" value="남자"> 남자

</form>

</body>

</html>

-----------------------------------------------------------------------------------------------------

send.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"

pageEncoding="UTF-8"%>

<!DOCTYPE html>

<html>

<head>

<title>Insert title here</title>

<style>

table {

border : 1px solid blue;

}

td {

width : 150px;

height : 40px;

padding : 5px;

text-align : center;

}

#cont {

width : 250px;

/*td 뒤에 나와야 한다. 만약 cont 가 먼저나오면 그 뒤에 td가 나오면서 td로 바뀌게되 */

}

</style>

</head>

<body>

//한글 인코딩해주기

request.setCharacterEncoding("utf-8");

//자바 코드 기술 자리 - 클라이언트가 전송시 입력한 값들을 가져온다.

String userId = request.getParameter("id");

//과일은 여러개라서 배열로 받으려고 getParameterValues

String[] fr = request.getParameterValues("fruit");

String res=" ";

for(int i = 0 ; i <fr.length ; i++ ){

res += fr[i] + "&nbsp ";

}

String gender = request.getParameter("gender");

String userName = request.getParameter("name");

String file = request.getParameter("file");

<tr>

</tr>

<tr>

</tr>

<tr>

<td> 좋아하는과일 </td>

</tr>

<tr>

</tr>

</table>

</body>

</html>

데이터 좋아하는 개발자의 블로그

이 블로그 검색

2020.10.29 HTML 수업노트 - FORM 전송

댓글

댓글 쓰기