-
action="<?php echo $_SERVER['PHP_SELF']; ?>HTML 폼(form)의 작업(action)을 현재 PHP 파일에 있는 서버의 자기 자신(PHP_SELF)으로 설정하는 것을 의미합니다. 이 작업은 폼이 제출(submit)될 때, 데이터를 처리하고 결과를 보여줄 PHP 스크립트를 현재 파일로 설정하여 해당 파일 내에서 데이터를 처리할 수 있도록 합니다.
<코드>
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>폼 입력을 통한 구구단 출력</title></head><body><form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" name="form1" ><label for="dan">출력하고자 하는 단을 입력하세요.</label><br><input type="text" name="dan" id="dan" autocomplete="off"><button id="submit_btn">구구단 출력</button></form>
<?phpif(isset($_POST['dan']) && $_POST['dan'] != ''){if(is_numeric($_POST['dan'])){for($i = 1; $i <= 9; $i++){echo $_POST['dan'].'x'.$i.'='.$_POST['dan'] * $i.'<br>';}}}?>
<script>const submit_btn = document.querySelector('#submit_btn');submit_btn.addEventListener('click', (e) =>{const dan = document.querySelector('#dan');if(dan.value === ''){e.preventDefault(); // 폼 전송을 막음alert('입력란을 비우지마세여.');dan.focus();return false;}if(isNaN(dan.value)){alert('숫자를 입력해주세요');dan.focus();return false;}
document.form1.submit();});</script></body></html><script>const submit_btn = document.querySelector('#submit_btn');submit_btn.addEventListener('click', (e) =>{const dan = document.querySelector('#dan');if(dan.value === ''){e.preventDefault(); // 폼 전송을 막음alert('입력란을 비우지마세여.');dan.focus();return false;}if(isNaN(dan.value)){alert('숫자를 입력해주세요');dan.focus();return false;}
document.form1.submit();});</script>이 부분에 대한 설명입니다.
- const submit_btn = document.querySelector('#submit_btn');: HTML 문서에서 id가 "submit_btn"인 요소를 찾아 submit_btn 변수에 할당합니다.
- submit_btn.addEventListener('click', (e) => { ... });: submit_btn 요소에 클릭(click) 이벤트를 추가하고, 클릭 이벤트가 발생했을 때 실행할 함수를 정의합니다. 이 함수는 인자로 이벤트 객체 e를 받습니다.
- 이벤트 함수 내부:
- const dan = document.querySelector('#dan');: HTML 문서에서 id가 "dan"인 요소를 찾아 dan 변수에 할당합니다.
- if(dan.value === '') { ... }: dan 요소의 값이 비어있는지 확인합니다. 비어있으면 다음 동작을 수행합니다:
- e.preventDefault();: 폼의 제출을 막습니다.
- alert('입력란을 비우지마세여.');: 경고창을 띄워 사용자에게 메시지를 표시합니다.
- dan.focus(); : dan 요소로 포커스를 이동시킵니다.
- return false; : 함수 실행을 중단합니다.
- if(isNaN(dan.value)) { ... }: dan 요소의 값이 숫자가 아닌지 확인합니다. 숫자가 아니면 다음 동작을 수행합니다:
- alert('숫자를 입력해주세요');: 경고창을 띄워 사용자에게 메시지를 표시합니다.
- dan.focus();: dan 요소로 포커스를 이동시킵니다.
- return false;: 함수 실행을 중단합니다.
- document.form1.submit();: 위의 두 조건을 모두 통과하면 form1이라는 이름을 가진 폼을 제출합니다. 여기서 "form1"은 폼의 이름입니다.
이 스크립트는 사용자가 숫자를 입력하지 않거나 입력란을 비웠을 때 경고 메시지를 표시하고, 제출을 막거나 폼을 제출합니다.
결과
아무것도 입력하지 않았을 때
숫자 외의 값을 입력했을 때
숫자 5를 입력했을 때
'PHP' 카테고리의 다른 글
[PHP] Session 을 이용한 로그인, 로그아웃 구현 (DB x) (0) 2024.02.22 [PHP] 계산기 (0) 2024.02.22 [PHP] Session (0) 2024.02.22 [PHP] cookie 생성, 확인, 삭제 (0) 2024.02.22 [PHP] 이미지 갤러리 만들기 ( DB X, 페이징 X, 썸네일 X) (0) 2024.02.22