HTML의 <form> 요소는 서버로 데이터를 전송하기 위한 요소로 <form> 요소 내부에는 사용자로부터 입력받은 데이터를 전송할 수 있는 다양한 폼 요소들이 있다. 이 때, 사용자로부터 입력받은 데이터를 서버로 전송하기 위해서는 JavaScript를 사용하여 해당 폼 요소의 값을 가져와야 한다. 이 때, "value" 속성을 사용하면 해당 폼 요소에 입력된 값을 간편하게 가져올 수 있다.
HTML에서 사용 가능한 폼 요소
- <input>: 텍스트, 비밀번호, 숫자, 날짜, 시간 등 다양한 형식의 입력을 받을 수 있는 요소
- <textarea>: 여러 줄의 텍스트를 입력할 수 있는 요소
- <select>: 드롭다운 목록을 만들 수 있는 요소
- <option>: <select> 요소 내에서 드롭다운 목록의 각 항목을 나타내는 요소
- <checkbox>: 체크박스를 만들 수 있는 요소
checkbox는 여러개 체크가 가능해서 배열로서 value 값을 저장하기에 배열처럼 다루어 주어야 한다. - <radio>: 라디오 버튼을 만들 수 있는 요소
- <button>: 버튼을 만들 수 있는 요소
- <submit>: 폼을 제출하는 버튼을 만들 수 있는 요소
- <reset>: 폼을 초기화하는 버튼을 만들 수 있는 요소
작성법 :
폼 태그 이름 . 폼 요소의 name . value
"textContent", "innerHTML" 등의 속성을 사용하여 값을 가져와야 하는 HTML
- <div>: 일반적으로 컨텐츠를 담는 데 사용되는 요소
- <span>: 인라인 텍스트를 묶는 데 사용되는 요소
- <p>: 문단을 나타내는 데 사용되는 요소
- <h1> ~ <h6>: 제목을 나타내는 데 사용되는 요소
- <a>: 링크를 나타내는 데 사용되는 요소
- <img>: 이미지를 나타내는 데 사용되는 요소
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function a (){
let html = "";
html += "id : " + f.id.value + "\n";
html += "pwd : " + f.pwd.value + "\n";
html += "phone : " + f.phone.value + "\n";
alert(html);
for( i = 0; i<f.ch.length;i++){
//f.여러개.길이 이름이 여러개 동시에 있으면 배열로 나옴!
if(f.ch[i].checked){
//ch라는 이름의 요소 즉 배열로 나타난다고 했으니까 그거의 0,1,2,3
//check를 하면 true 아니면 체크를 안하면 false 그래서 배열에서
//checked 된ㄷ게 있으면 true를 반환한다. 결국 데이터는 체크 한 것만 넘어가야 하니까
//폼 이름.배열.체크한것
alert(f.ch[i].value);
}
}
alert (f.ra.value);
//라이오버튼은 체크를 하나 밖에 못해서 체크박스 처럼 for 문 돌리지 않아도 된다.
alert (f.sel.value);
//select 박스도 똑같이 alert로 접근이 가능하다
alert (f.hello.value);
//textarea : 입력 한 값이 value 가 되어 호출 된다.
alert (f.h.value);
//hidden 의 value 는 현재 "ase" 로 설정 되어 있음
}
</script>
</head>
<body>
<h3> 폼양식</h3>
<form action="/webApp1/Myservlet" method="post" name = "f" id= "myform">
Id : <input type="text" name="id" > <br/>
<br/>
Pwd : <input type = "password" name = "pwd" > <br/>
<br/>
Phone : <input type = "number" name = "phone" > <br/>
<br/>
<!-- 체크박스에 name이 같으면 배열로 들어간다 -->
체크박스 : <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/>
<br/>
라디오 버튼 : <input type ="radio" name = "ra" value = "f" checked > 여성복
<input type ="radio" name = "ra" value = "m"> 남성복
<input type ="radio" name = "ra" value = "c"> 아동복 <br/>
<br/>
콤보 박스 :
<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/>
<br/>
여러줄 입력 하는 텍스트 박스 : <textarea name = "hello" rows = "5" cols= "40"></textarea><br/>
<br/>
히든버튼을 숨겨 뒀다: <input type = "hidden" name = "h" value = "ase"><br/>
<br/>
일반버튼 : <input type = "button" value = "버튼을눌러보세요" onclick = "a()"> <br/>
<br/>
</form>
</body>
</html>'Front > javascript' 카테고리의 다른 글
| [Javascript] 웹 페이지의 근육 심기 - 페이지 이동 (0) | 2023.03.25 |
|---|---|
| [Javascript] 웹 페이지의 근육 심기 - 계산기 만들기 (0) | 2023.03.25 |
| [Javascript] 웹 페이지의 근육 심기 - 구구단 테이블 만들기 (0) | 2023.03.24 |
| [Javascript] 웹 페이지의 근육 심기 - 대화 상자(dialog box) (0) | 2023.03.24 |
| [Javascript] 웹 페이지의 근육 심기 - 함수(function) (0) | 2023.03.24 |
