본문 바로가기
Web/JAVASCRIPT

폼 만들기(if else)

by print_soo 2023. 7. 15.

form(https://www.nextree.co.kr/p8428/)

: 폼은 사용자의 의견이나 정보를 알기 위해 입력한 큰 틀을 만드는데 사용한다.

: 폼은 입력된 데이터를 한번에 서버로 전송하는데 전송된 데이터는 웹 서버가 처리를 하고 결과에 따른 또 다른 웹 페이지를 보여준다. 

 

[form 태그의 속성]

  • action: 폼을 전송할 서버 쪽 스크립트 파일을 지정한다. 
  • name: 폼을 식별하기 위한 이름을 지정한다.
  • accept-charset: 폼 전송에 사용할 문자 인코딩을 지정한다.
  • target: action에서 지정한 스크립트 파일을 현재 창이 아닌 다른 위치에 열도록 지정한다.
  • method: 폼을 서버에 전송할 http 메소드를 정한다. (GET 또는 POST)

[form을 구성하는 다양한 엘리먼트]

폼 엘리먼트 그룹 

  • <fieldset> : 폼 태그 안에 관련 있는 폼 엘리먼트들을 그룹화할 때 사용한다.
  • <legent> : fieldset태그 하위에 위치하면 그룹화한 폼 엘리먼트들을 목저에 맞게 이름을 지정한다. 

 

<input> 태그들

  • type : 태그 모양을 다양하게 변경할 수 있다.
    • text
    • radio
    • checkbox
    • password
    • button
    • hidden
    • fileupload
    • submit
    • reset
  • name : 태그 이름을 지정한다.
  • readonly : 태그를 읽기전용으로 한다.
  • maxlength : 해당 태그 최대 글자 수를 지정한다.
  • required : 해당 태그가 필수 태그로 지정된다. 
  • autofocus: 웹 페이지가 로딩되자마자 이속성을 지정한 태그로 포커스가 이동된다.
  • placeholder: 태그에 입력할 값에 대한 힌트를 준다.
  • pattern : 정규표현식을 사용하여 특정범위 내의 유효한 값을 입력받을 때 사용한다. 

 

form으로 사이트 만들어보기

[index.html]

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>

    <!------------------------------------------------------------------>
    <!-- modal -->
    <div class="black-bg">
        <div class="white-bg">
            <h4>로그인하세요</h4>
            <form action="success.html">
                <div class="my-3">
                  <input type="text" class="form-control" name="id">
                 </div>
                 <p id="error-id">아이디가 입력되지 않았습니다.</p>
                 <div class="my-3">
                   <input type="password" class="form-control" name="password">
                 </div>
                 <p id="error-password">비밀번호가 입력되지 않았습니다.</p>
                 <button type="submit" id="submit" class="btn btn-primary">로그인</button>
                 <button type="button" class="btn btn-danger" id="close">취소</button>
              </form>
        </div>
    </div>
    <!------------------------------------------------------------------>


    <div class="main-bg">
        <h4>Shirts on sale</h4>
        <button id="login" class="btn btn-danger">로그인</button>
    </div>
    

    <!-- JavaScript -->

    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>


    <script>

        /* STEP 3 */
        // 모달창 노출
        $('#login').on('click', function(){
            $('.black-bg').addClass('show-modal');
        })

        // 모달창 닫기
        $('#close').on('click', function(){
            $('.black-bg').removeClass('show-modal');
        })
        
        // 로그인 버튼 누른 후의 이벤트들 
        $('#submit').on('click', function(){

            // 아이디 공백 처리
            if ($('input[name="id"]').val().trim() == '') {
                $('#error-id').show();
                event.preventDefault();
            } else {
                $('#error-id').hide();
            }
            
            // 비번 공백 처리
            if ($('input[name="password"]').val().trim() == '') {
                $('#error-password').show();
                event.preventDefault();
            } else {
                $('#error-password').hide();
            }

            // 비번 6자리 미만 작성 처리
            if ($('input[name="password"]').val().length < 6 && $('input[name="password"]').val().length > 0){
                $('#error-password').text('비밀번호를 6자리 이상 작성해주세요.');
                $('#error-password').show();
                event.preventDefault();
            }

        });

    </script>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>
    
  </body>
</html>

 

[main.css]

.black-bg {
    /* STEP 1 */
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5;
    padding: 30px;
    visibility: hidden;
    opacity: 0;

    /* STEP 4 */
    transition: all 1s;
}

.show-modal{
    /* STEP 2 */
    visibility: visible;
    opacity: 1;
}

.white-bg {
    background: white;
    border-radius: 5px;
    padding: 30px;
}

.main-bg {
    padding: 100px 20px;
    background-color: lightgray;
}

#error-id, #error-password{
    color: rgb(239, 73, 73);
    display: none;
}

 

[success.html]

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">

    <title>Hello, world!</title>
  </head>
  <body>

    <div class="main-bg">
        <h4>Shirts on sale</h4>
        회원님! 안녕하세요!
    </div>
    

    <!-- JavaScript -->

    <script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
    </script>
    
  </body>
</html>

 

저작자표시 비영리

'Web > JAVASCRIPT' 카테고리의 다른 글

변수문법과 Dark mode 버튼만들기  (0) 2023.07.20
코딩애플) if/else, function 실력향상 과제  (0) 2023.07.17
모달창만들기와 간단한 애니메이션  (0) 2023.07.15
jQuery  (0) 2023.07.13
이벤트 리스너  (0) 2023.07.13

관련글

티스토리툴바