티스토리 뷰
window 내장객체
- location 내장객체
- history 내장객체
- document 내장객체
-- image
-- form --- text, password, textarea
--- checkbox, radio
--- select
form 내장객체
form 안의 내용을 서버에 전달 => action="a.jsp" 연결페이지(주소줄 변경, 이동)
=> 내용(데이터)을 전달하는 방식
- method="get" 주소줄에 담아서 전달(주소줄에 보임, 기본 방식)
- method="post" http에 담아서 전달(주소줄에 안 보임, form 태그에서만 가능)
type="submit" form 태그 안에 있어야 동작, form안의 내용을 서버에 전달하는 기능을 가진 버튼
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form practice</title>
<script type="text/javascript">
</script>
<body>
<form action="a.jsp" method="get" name="fr">
입력 : <input type="text" name="tx" value="값"> <br>
비밀번호 : <input type="password" name="pw" value="값값값값"> <br>
여러줄 입력 : <textarea name="ta" rows="2" cols="20">여러줄 값</textarea> <br>
라디오박스(하나 선택) : <input type="radio" name="ra" value="ra1"> 라디오1 <!-- value값 필수 -->
<input type="radio" name="ra" value="ra2"> 라디오2 <br>
체크박스(여러개 선택) : <input type="checkbox" name="ch" value="ch1"> 체크
<input type="checkbox" name="ch" value="ch2"> 박스 <br>
목록상자 : <select name="sel">
<option value="s1">하나</option>
<option value="s2">둘</option>
<option value="s3">셋</option>
</select> <br>
숨김태그 : <input type="hidden" name="hid" value="숨긴값"> <br> <!-- 숨겼지만 데이터 전송가능 -->
파일 : <input type="file" name="file"> <br> <!-- value 값 없음 -->
<input type="submit" value="서버에 전송">
<input type="reset" value="폼 초기화">
<input type="button" value="버튼">
</form>
</body>
</html>
document.폼이름.action 변수 : 폼태그 연결 페이지 저장
document.폼이름.method 변수 : 폼태그 데이터전송방식 저장
document.폼이름.submit( ) 함수 ( ) : 폼 안의 내용을 서버에 전달
document.폼이름.reset( ) 함수 ( ) : 폼 안의 내용을 초기화
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>form practice</title>
<script type="text/javascript">
function fun1() {
alert(document.fr.action);
alert(document.fr.method);
}
function fun2() {
document.fr.action="b.jsp";
document.fr.method="post";
document.fr.submit(); // 서버에 이동
}
function fun3(a) {
if(a == 'basket') {
document.fr.action="basket.jsp";
} else {
document.fr.action="order.jsp";
}
document.fr.submit(); // 서버에 이동
}
</script>
<body>
<form action="a.jsp" method="get" name="fr">
텍스트 상자 : <input type="text" name="tx"> <br>
<input type="button" value="폼정보 확인" onclick="fun1()">
<input type="button" value="폼정보 변경" onclick="fun2()">
<input type="button" value="담기" onclick="fun3('basket')">
<input type="button" value="주문" onclick="fun3('order')">
</form>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js2/test2.html</title>
<script type="text/javascript">
//window 내장객체 - document 내장객체 - form 내장객체 : 웹브라우저 html을 주제(멤버변수, 메서드() 정의)
//document.폼이름.action 변수 폼태그 연결페이지 저장 / document.폼이름.submit() 함수() 폼 안의 내용을 서버에 전달
//document.폼이름.method 변수 폼태그 데이터전송방식 저장 / document.폼이름.reset() 함수() 폼 안의 내용을 초기화
function fun1() {
alert(document.fr.action);
alert(document.fr.method);
}
function fun2() {
document.fr.action="b.jsp";
document.fr.method="post";
// 서버에 전송
document.fr.submit();
}
function fun3(a) {
// 장바구니 버튼 클릭 => basket.jsp 이동
// 바로구매 버튼 클릭 => order.jsp 이동
// 서버 전송
if(a=='basket'){
document.fr.action="basket.jsp";
} else {
document.fr.action="order.jsp";
}
// 서버 전송
document.fr.submit();
}
</script>
</head>
<body>
<form action="a.jsp" method="get" name="fr">
텍스트 상자 : <input type="text" name="tx"> <br>
<input type="button" value="폼정보 확인" onclick="fun1()">
<input type="button" value="폼정보 변경" onclick="fun2()">
<input type="button" value="장바구니" onclick="fun3('basket')">
<input type="button" value="바로구매" onclick="fun3('order')">
</form>
</body>
</html>'배운 것 기록 > web' 카테고리의 다른 글
| [js] 객체 (0) | 2022.05.08 |
|---|---|
| [js] javascript / 식별자 / 함수 (0) | 2022.05.07 |
| [js] 내장객체 document, img (0) | 2022.05.03 |
| [html] table (0) | 2022.05.02 |
| [html] 특수 문자 태그, 목록 (0) | 2022.05.02 |
댓글