HTML 폼 요소에 접근하기
HTML 문서에서 폼 요소는 <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: 폼 데이터가 제출되는 서버 URL을 나타냅니다.method: 폼 제출 방식(예: GET, POST)을 정의합니다.
주요 필드 속성
value: 필드의 현재 값에 접근하거나 설정할 수 있습니다. 예를 들어,<input>요소에 텍스트를 입력하거나 값을 가져오는 데 사용됩니다.type: 필드 유형을 나타냅니다.<input>요소는text,password,checkbox등 다양한 유형을 가질 수 있습니다.checked: 체크박스나 라디오 버튼의 선택 상태를 확인합니다.disabled: 필드가 비활성화 상태인지 여부를 나타냅니다.true로 설정하면 해당 필드는 사용 불가능해집니다.
let username = form.elements["username"].value; // 필드 값 가져오기
form.action = "/submit"; // 폼의 action 속성 설정예제코드
폼 요소 접근
<!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>폼 텍스트 입력 값 확인 및 조작
<!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>폼 텍스트 입력 값 확인 및 문자열 조작
<!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>체크박스
<!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 () {
// 각 체크박스의 선택 여부 출력
// console.log(document.frm.chk1.checked);
// console.log(document.frm.chk2.checked);
// console.log(document.frm.chk3.checked);
// console.log(document.frm.chk4.checked);
// 각 체크박스의 값 출력
// console.log(document.frm.chk1.value);
// console.log(document.frm.chk2.value);
// console.log(document.frm.chk3.value);
// console.log(document.frm.chk4.value);
// 같은 이름을 가진 체크박스들 중 체크된 항목만 출력
let chkArr = document.frm.cb.length; // 체크박스 개수 확인
for (let i = 0; i < chkArr; i++) {
if (document.frm.cb[i].checked) { // 체크된 항목인지 확인
console.log(document.frm.cb[i].value); // 체크된 항목의 값을 출력
}
}
}
</script>
</head>
<body>
<form name="frm">
<!-- 개별 이름의 체크박스 -->
<input type="checkbox" name="chk1" value="사과">사과<br />
<input type="checkbox" name="chk2" value="바나나">바나나<br />
<input type="checkbox" name="chk3" value="딸기">딸기<br />
<input type="checkbox" name="chk4" value="포도">포도<br />
<br />
<!-- 같은 이름(cb)을 가진 체크박스들, 배열로 취급 가능 -->
<input type="checkbox" name="cb" value="사과">사과<br />
<input type="checkbox" name="cb" value="바나나">바나나<br />
<input type="checkbox" name="cb" value="딸기">딸기<br />
<input type="checkbox" name="cb" value="포도">포도<br />
<!-- 버튼 클릭 시 checkForm 함수 호출 -->
<input type="button" value="선택" onclick="checkForm()">
</form>
</body>
</html>라디오 박스
<!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 () {
// 라디오 버튼 그룹의 개수를 확인
let chkArr = document.frm.r.length;
// 라디오 버튼 그룹 순회
for (let i = 0; i < chkArr; i++) {
// 체크된 라디오 버튼의 값을 출력
if (document.frm.r[i].checked) {
console.log(document.frm.r[i].value); // 선택된 라디오 버튼의 값
}
}
}
</script>
</head>
<body>
<form name="frm">
<!-- 같은 이름(r)을 가진 라디오 버튼들 (한 번에 하나만 선택 가능) -->
<input type="radio" name="r" value="사과">사과<br />
<input type="radio" name="r" value="바나나" checked>바나나<br /> <!-- 기본 선택 -->
<input type="radio" name="r" value="딸기">딸기<br />
<input type="radio" name="r" value="포도">포도<br />
<br />
<!-- 버튼 클릭 시 checkForm 함수 호출 -->
<input type="button" value="선택" onclick="checkForm()">
</form>
</body>
</html>셀렉트, 옵션
<!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 () {
// select 요소의 모든 옵션들을 배열 형태로 출력
console.log(document.frm.sel.options); // 모든 옵션 리스트
console.log(document.frm.sel.options.length); // 옵션의 개수
console.log(document.frm.sel.options[0]); // 첫 번째 옵션 요소
// 선택된 옵션의 인덱스와 텍스트 출력
console.log(document.frm.sel.selectedIndex); // 선택된 옵션의 인덱스
console.log(document.frm.sel.options[document.frm.sel.selectedIndex].text); // 선택된 옵션의 텍스트
}
</script>
</head>
<body>
<form name="frm">
<!-- 옵션 리스트가 포함된 select 요소 -->
<select name="sel">
<option>사과</option>
<option>바나나</option>
<option selected>딸기</option> <!-- 기본 선택된 옵션 -->
<option>포도</option>
</select>
<!-- 버튼 클릭 시 checkForm 함수 호출 -->
<input type="button" value="선택" onclick="checkForm()">
</form>
</body>
</html>DOM 조작 : 요소 접근
<!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 viewTag = function() {
// id를 통한 접근
let tag = document.getElementById('h1');
console.log(tag); // 객체(DOM)
console.log(tag.innerHTML);
tag.innerHTML = 'new Header 1';
//tag 이름으로 접근
let tags = document.getElementsByTagName('h2'); // 배열 형식
console.log(tags);
console.log(tags.length);
// Clas로 접근
let classes = document.getElementsByClassName('c1');
console.log(classes);
console.log(classes.length);
};
</script>
</head>
<body>
<input type="button" value="태그 가져오기" onclick="viewTag()"/>
<Br /><br />
<h2 id="h1" class="c1" >Header 1</h2>
<h2 id="h2" class="c2">Header 2</h2>
<h2 id="h3" class="c3">Header 3</h2>
<h2 id="h4" class="c4">Header 4</h2>
<h2 id="h5" class="c5">Header 5</h2>
</body>
</html>이름 대문자 변경 결과문 보이기 hong gil dong → Hong Gil Dong
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
// 입력된 이름을 각 단어의 첫 글자만 대문자로 변경하는 함수
const capitalizeName = function () {
// 입력 필드에서 이름을 가져옴
let name = document.frm.name1.value;
// 이름이 입력되지 않은 경우 경고를 표시하고 종료
if (name == '') {
alert('이름을 입력하세요');
return false;
}
console.log(name); // 입력된 이름 출력
// 이름을 공백 기준으로 나누어 배열로 저장
let nameArr = name.split(" ");
let newName = "";
// 각 단어의 첫 글자를 대문자로 변환 후 결합
for (let name of nameArr) {
newName += name.charAt(0).toUpperCase() + name.slice(1) + " ";
}
// 변환된 이름을 result 요소에 출력
document.getElementById('result').innerHTML = newName.trim(); // 마지막 공백 제거 후 출력
}
</script>
</head>
<body>
<form name="frm">
<!-- 사용자 이름 입력 필드 -->
이름입력 <input type="text" name="name1" placeholder="영문이름 입력">
<!-- 버튼 클릭 시 capitalizeName 함수 호출 -->
<input type="button" value="대문자로 변경" onclick="capitalizeName()">
</form>
<hr>
<!-- 변환된 이름을 출력할 영역 -->
<div id="result"></div>
</body>
</html>폼 요소 제어로 DOM 을 이용한 구구단
<!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">
// gugudan 함수: 특정 단(dan)의 구구단을 HTML 테이블 형태로 반환
const gugudan = function (dan) {
let html = '';
html += '<table border="1" cellspacing="0" width="150" style="text-align: center;">'; // 구구단 단별 테이블 시작
for (let col = 1; col <= 9; col++) { // 1부터 9까지 곱하는 구구단
html += '<tr>';
html += '<td>' + dan + ' X ' + col + ' = ' + (dan * col) + '</td>'; // 각 곱셈 결과
html += '</tr>';
}
html += '</table>'; // 단별 테이블 종료
return html;
};
// 입력받은 시작단과 끝단으로 구구단을 생성하는 함수
const createGugudanTable = function (startDan, endDan) {
let html = '<table border="1" cellspacing="0">';
const rowCount = Math.ceil((endDan - startDan + 1) / 3); // 한 행당 3개씩 표시
for (let row = 0; row < rowCount; row++) {
html += '<tr>';
for (let col = 0; col < 3; col++) {
const currentDan = startDan + (row * 3) + col;
if (currentDan <= endDan) {
html += '<td>' + gugudan(currentDan) + '</td>';
}
}
html += '</tr>';
}
html += '</table>';
return html;
};
// 폼 제출 처리 함수
const showGugudan = function () {
const startDan = parseInt(document.getElementById('startDan').value);
const endDan = parseInt(document.getElementById('endDan').value);
if (isNaN(startDan) || isNaN(endDan) || startDan > endDan) {
alert('올바른 숫자를 입력해주세요.');
return;
}
const result = document.getElementById('result');
result.innerHTML = createGugudanTable(startDan, endDan);
return false; // 폼 제출 방지
};
</script>
</head>
<body>
<form onsubmit="return showGugudan()" style="margin: 8px; border: 1px solid black; padding: 10px;">
시작 단: <input type="number" id="startDan" min="1" max="9" required>
끝 단: <input type="number" id="endDan" min="1" max="9" required>
<button type="submit">구구단 보기</button>
</form>
<hr>
<div id="result"></div>
</body>
</html>