반응형
폼 양식 자바 스크립트 (JS) 로 불러내기
폼 양식을 자바 스크립트로 불러오는 문법이다.
<script>
f.t1.value
// 폼이름.불러올input이름.불러올값
</script>
text, password, number 폼 받기
변수 html 에 위 문법을 사용해 값을 받고 html 변수를 출력하는 코드이다.
<script>
\function a (){ // 값 읽어오기 방법
let html = "";
html += "id:" +q.id.value + "\n"; //form name이 q인 id 박스의 정보를 읽어오기
html += "pwd:" +q.pwd.value + "\n"; //form name 은 겹치면 안된다.
html += "phone:" +q.phone.value + "\n";
alert (html); //받아온 html 불러와 알림으로 띄우기
}
</script>
<body>
<h3>폼 양식 종류</h3>
<form action = "/webApp1/MyServlet" name = "q" method = "post">
id : <input type = "text" name = "id"><br/>
pwd : <input type = "password" name = "pwd"><br/>
phone : <input type = "number" name = "phone"><br/>
</form>
</body
checkbox(체크 박스) 폼 받기
여러개 선택을 하는 checkbox 를
check 된 것 : true,
check 안된 것 : false 로 구분해 check 된 것 만을 선택
<script>
function a (){ // 값 읽어오기 방법
for(i=0;i<q.ch.length;i++){
// f.ch 는 배열.
// ch라는 이름의 요소, value가 4개이니 배열의 크기는 4
if(q.ch[i].checked){
//checked된 속성.
// check 된 : true, check 없는 : false. check 가 true 인 것만 선택
alert(q.ch[i].value); //check 된 항목의 value 값을 받아 alert로 출력
}
}
</script>
<body>
<form action = "/webApp1/MyServlet" name = "q" method = "post">
체크박스 :
<input type = "checkbox" name = "ch" value = "1" checked> 오렌지
<input type = "checkbox" name = "ch" value = "2"> 키위
<input type = "checkbox" name = "ch" value = "3"> 사과
<input type = "checkbox" name = "ch" value = "4"> 배 <br/>
</form>
</body>
raido (라디오 버튼) 폼 받기
라디오 버튼은 하나만 체크하니 하나의 값만 받아오면 된다.
라디오 버튼의 value 값을 출력해준다.
//라디오 버튼은 하나만 체크 가능.
alert(q.ra.value);
라디오 버튼 :
<input type = "radio" name = "ra" value ="f"> 여성복
<input type = "radio" name = "ra" value ="m"> 남성복
<input type = "radio" name = "ra" value ="c"> 아동복 <br/>
combo box (콤보 박스) 폼 받아오기
콤보 박스도 하나만 체크하니 하나의 값만 받아오면 된다.
콤보 박스의 value 값을 출력해준다.
//select 박스도 value 로 선택한 항목의 value 값 읽음
alert(q.sel.value);
콤보 박스 :
<select name = "sel">
<option value = "a">1학년</option>
<option value = "b">2학년</option>
<option value = "c">3학년</option>
<option value = "d">4학년</option>
</select><br/>
Textarea (여러줄 입력) 폼 받아오기
//textarea
alert(q.hello.value);
여러줄 입력 :
<textarea name = "hello" rows= "5" cols="40">가입 인사를 남기시오</textarea><br/>
hidden 폼 받아오기
//hidden
alert(q.h.value);
<input type = "hidden" name = "h" value = "asdf">
<!-- 화면에는 안보이지만 value 값을 서버로 전송할 때 사용 -->
버튼으로 값 읽어오기 함수 호출
<input type = "button" value = "일반버튼" onclick = "a()">
반응형
