DOM 폼 요소 제어
폼 : <form>, <input>, <select>, <textarea>와 같은 요소들
JavaScript는 document.forms를 통해서 HTML 문서에 정의된 모든 폼에 접근 가능
document.forms: HTML문서 내 모든 폼을 배열 형태로 가져옴
각 폼은document.forms[n]또는document.forms['폼 이름']처럼 인덱스나 이름을 통해 접근 가능- 개별 필드 접근 : 폼 내 특정 필드는
form.elements또는form['필드 이름']을 통해 접근합니다
let form = document.forms["myForm"]; // 이름으로 폼 접근
let inputField = form.elements["username"]; // 폼 내 특정 필드 접근폼 요소의 주요 속성
action: 폼 데이터가 제출되는 서버 URLmethod: 폼 제출 방식을 정의(ex)GET,POSTvalue: 필드의 현재 값에 접근하거나 설정 가능
예를 들어<input>요소에 텍스트 입력/가져오기 가능type: 필드 유형을 나타냄 (ex)text,password,checkboxchecked: 체크박스나 라디오 버튼의 선택 상태를 확인disabled: 필드가 비활성화 상태인지 여부를 나타냄(true로 설정하면 해당 필드는 사용 불가)
let username = form.elements["username"].value; // 필드 값 가져오기
form.action = "submit"; // 폼의 action 속성 설정예시1 - 폼 요소 접근
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// 문서의 폼 정보를 확인하는 함수 선언
const checkForm = function () {
// 문서 내 모든 form 요소를 출력
console.log(document.forms); // 모든 form 요소 리스트
console.log(document.forms.length); // form 요소의 개수 출력
// 인덱스로 각 form 요소에 접근하여 출력
console.log(document.forms[0]); // 첫 번째 form 요소 (frm1)
console.log(document.forms[1]); // 두 번째 form 요소 (frm2)
// form 요소의 이름을 사용하여 접근
console.log(document.frm1); // 이름이 frm1인 form 요소
console.log(document.frm2); // 이름이 frm2인 form 요소
// 각 form 요소의 action 속성값을 출력
console.log(document.frm1.action); // frm1의 action 속성 (test1.jsp)
console.log(document.frm2.action); // frm2의 action 속성 (test2.jsp)
}
</script>
<!-- 이름이 frm1인 form 요소 -->
<form name="frm1" action="test1.jsp"></form>
<!-- 이름이 frm2인 form 요소 -->
<form name="frm2" action="test2.jsp"></form>
<!-- 이름이 frm3인 form 요소 -->
<form name="frm3" action="test3.jsp"></form>
<!-- 버튼 클릭 시 checkForm 함수 호출 -->
<input type="button" value="클릭" onclick="checkForm()">
</body>
</html>예시 코드2 - 폼 텍스트 입력 값 확인 및 조작
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 입력값을 확인하고 수정하는 함수
const checkForm = function () {
// form의 id1 필드의 현재 값을 출력
console.log(document.frm.id1.value); // 현재 입력된 값 출력
console.log(typeof document.frm.id1.value); // 값의 자료형 출력 (string)
// 입력된 값을 변수 id1에 저장하고 출력
let id1 = document.frm.id1.value;
console.log(id1); // 변수에 저장된 입력값 출력
// id1 필드의 값을 "새로운 데이터"로 변경
document.frm.id1.value = "새로운 데이터"; // 입력 필드의 값을 새로운 데이터로 설정
}
</script>
</head>
<body>
<form name="frm">
<!-- 이름이 id1인 텍스트 입력 필드 -->
아이디1: <input type="text" name="id1"><br />
<!-- 버튼 클릭 시 checkForm 함수 호출 -->
<input type="button" value="입력값 검사" onclick="checkForm()">
</form>
</body>
</html>예시 코드3 - 폼 텍스트 입력 값 확인 및 문자열 조작
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 입력된 이름을 첫 글자만 대문자로 변환하는 함수
const checkForm = function () {
// name 필드에서 입력된 이름을 가져옴
let name = document.frm.name.value;
// 입력된 이름을 공백을 기준으로 나눠 배열로 저장
let nameArr = name.split(" ");
let newName = "";
// 각 단어의 첫 글자를 대문자로 변환하여 결합
for (let name of nameArr) {
newName += name.charAt(0).toUpperCase() + name.slice(1) + " ";
}
// newName 필드에 변환된 이름을 설정
document.frm.newName.value = newName.trim(); // 마지막 공백 제거
}
</script>
</head>
<body>
<form name="frm">
<!-- 사용자가 이름을 입력하는 필드 -->
이름: <input type="text" name="name"><br />
<!-- 변환된 이름을 출력하는 필드 -->
변경된 이름: <input type="text" name="newName"><br />
<!-- 버튼 클릭 시 checkForm 함수 호출 -->
<input type="button" value="변경" onclick="checkForm()">
</form>
</body>
</html>
개발자