★ 데이터 폼 전송 복습
◎ HTML과 달리 CSS에는 반드시 단위를 붙인다
https://sas-study.tistory.com/159
[CSS] 수치표현 (pt,px,em,%,rem,ex,mm,cm,pc, in)
HTML 수치 표현 1. 숫자 : px , 문자수 2. 숫자% : 부모를 기준으로 하는 상대값. CSS 수치 표현 - 반드시 수치 뒤에는 단위를 표시해야 한다. 1. pt : 포인트(글꼴 단위) 1/72 단위 2. px : 픽셀(화소) 크기,글
sas-study.tistory.com
◎ window.open
가운데는 name
마지막은 ''하나로 width와 height를 묶어서 설정한다
window.open('2021_09_26_dataSend.html','name', 'width=300, height=200');
◎ DataOpen
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<!-- CSS -->
<style type="text/css">
/* 가끔 데이터 입력전에 오류 표시되는 경우가 있기에 입력해보고 결정하기 */
/* css에서는 =가 아니라 :로 표현 */
/* !!!css에서는 반드시 단위를 붙인다!!! */
th{
width: 100px;
}
td{
width: 200px;
}
</style>
<!-- 자바스크립트 -->
<script type="text/javascript">
function dataOpen(){
/* window.open 함수의 가운데는 name */
/* 마지막은 ''하나로 width와 height를 묶어서 설정한다 */
window.open('2021_09_26_dataSend.html','name', 'width=300, height=200');
}
</script>
</head>
<body>
<!-- 폼 전송을 할 것 -->
<form action="" name="frm">
<table>
<tr>
<th>이름</th>
<!-- 인풋 테그는 table 아래 출력되기에 td로 감싸주어야함 -->
<td><input type=text name="name" readonly=readonly></td>
</tr>
<tr>
<th>주소</th>
<td><input type=text name="addr" readonly=readonly></td>
</tr>
<tr>
<th>연락처</th>
<td><input type=text name="hp" readonly=readonly></td>
</tr>
<tr align="center">
<!-- 버튼의 이름은 value 값으로 설정 -->
<td colspan="2"><input type="button" value="데이터 입력" onclick="dataOpen()"></td>
</tr>
</table>
</form>
</body>
</html>
◎ DataSend
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<!-- CSS -->
<style type="text/css">
/* 가끔 데이터 입력전에 오류 표시되는 경우가 있기에 입력해보고 결정하기 */
/* css에서는 =가 아니라 :로 표현 */
/* !!!css에서는 반드시 단위를 붙인다!!! */
th{
width: 100px;
}
td{
width: 200px;
}
</style>
<!-- 자바스크립트 -->
<script type="text/javascript">
function dataSend(){
/* 오픈된 창을 opener 라고함 */
opener.frm.name.value=frm.name.value;
opener.frm.addr.value=frm.addr.value;
opener.frm.hp.value=frm.hp.value;
/* 버튼 누를시 함수 종료 */
window.close();
}
</script>
</head>
<body>
<!-- 폼 전송을 할 것 -->
<form action="" name="frm" onsubmit="return false">
<table>
<tr>
<th>이름</th>
<!-- 인풋 테그는 table 아래 출력되기에 td로 감싸주어야함 -->
<!-- required는 마우스 올려놓으면 반드시 입력해야하는 사항임을 명시해줌 -->
<td><input type=text name="name" required="required"></td>
</tr>
<tr>
<th>주소</th>
<td><input type=text name="addr"></td>
</tr>
<tr>
<th>연락처</th>
<td><input type=text name="hp"></td>
</tr>
<tr align="center">
<!-- 버튼의 이름은 value 값으로 설정 -->
<td colspan="2"><input type="button" value="데이터 전송" onclick="dataSend()"></td>
</tr>
</table>
</form>
</body>
</html>
댓글