HTML javascript 자바스크립트 로그인 화면 form 구성 빈칸 체크 focus placeholder

JohnComputer

|2020. 8. 28. 14:37

아이디 입력 창에서 입력 하지 않을 경우 경고 주는 방법.

사용 방법 주석 확인.

HTML Forms

ID:

Password:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html>
<body>
 
<h2>HTML Forms</h2>
 
<form action="#이동할곳 URL#" name="login_form">
  <label for="fname">ID:</label><br>
  <input type="text" id="id_val" name="id_val" placeholder="아이디"><br>
  <!-- input 박스 안 글자 넣기 = placeholder -->
  <label for="lname">Password:</label><br>
  <input type="password" id="pw_val" name="pw_val" placeholder="비밀번호"><br><br>
  <input type="button" value="로그인" onclick="check_input()">
</form>
<script type="text/javascript">
function check_input() {
    if (!document.login_form.id_val.value)
    // login_form 이름을 가진 form 안의 id_val 의 value가 없으면
    {
        alert("아이디를 입력하세요!");
        document.login_form.id_val.focus();
        // 화면 커서 이동
        return;
    }
    if (!document.login_form.pw_val.value)
    {
        alert("비밀번호를 입력하세요!");
        // 화면 커서 이동
        return;
    }
    document.login_form.submit();
    // 모두 확인 후 submit()
 }
</script>
</body>
</html>
 
Colored by Color Scripter
cs

저작자표시

'프로그래밍 > HTML,CSS ,PHP,JQuery,Javascript' 카테고리의 다른 글

PHP POST content-length 파일 업로드 용량 오류. (0)	2021.02.17
LED 저항값 계산기 (블로그) - 아두이노 (0)	2020.09.20
PHP 로그인 화면 구성 FORM 태그 POST 전송 mysql (0)	2020.09.04
PHP form 전송 방법 POST / GET 이용방법 (0)	2020.09.04
키보드 타이핑 효과 글자쓰기 효과 Typeit 예시 사용법 (0)	2020.09.03

HTML javascript 자바스크립트 로그인 화면 form 구성 빈칸 체크 focus placeholder

아이디 입력 창에서 입력 하지 않을 경우 경고 주는 방법.

HTML Forms

'프로그래밍 > HTML,CSS ,PHP,JQuery,Javascript' 카테고리의 다른 글

티스토리툴바