> For the complete documentation index, see [llms.txt](https://leeans-dev-book.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://leeans-dev-book.gitbook.io/docs/lecture/javascript/form.md).

# form 만들면서 배우는 조건문

Bootstrap에서 form을 하나 가져와봅시다.

{% embed url="<https://getbootstrap.com/>" %}

```html
<form>
  <div class="mb-3">
    <label for="exampleInputEmail1" class="form-label">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
  </div>
  <div class="mb-3">
    <label for="exampleInputPassword1" class="form-label">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1">
  </div>
 
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
```

이 코드를 참조해서 js008.html의  modal에 이 코드를 넣어 줌&#x20;

```html
<form action="success.html">
    <div class="mb-3">
        <input type="text" class="form-control" id="email">
    </div>
    <div class="mb-3">
        <input type="password" class="form-control" id="password">
    </div>
    <button type="submit" id="submit" class="btn btn-primary">Submit</button>
    <button type="button" class="btn btn-danger" id="close">닫기</button>
</form>
```

그리고success.html을 같은생폴더에성생

form 바깥에 있던 닫기 버튼도 form 안으로 넣어줌

🎈submit 버튼 외의 버튼은 type을 button으로 지정

💎 전송버튼을 누를 때 \<input>에 입력값이 없으면 alert 띄우기&#x20;

이런걸 개발자스럽게 얘기하면 유효성 검사 라고 한다.

## 🎈조건문 문법

```javascript
if(조건식) {
    //실행할 코드
    console.log("조건 충족");
}

//script 부분에 넣어서 참과 거짓 확인 
if(2<1) {
    console.log("참");
}else {
    console.log("거짓");
}
```

✨ 실습. 전송  버튼을 누를  때  \<input>에 입력  값이 없으면 alert 띄우기&#x20;

alert 띄우는 것은

```javascript
alert("alter 창에띄울 문구");
```

그럼 공백 검사하는  것 만 알면 할 수 있겠다.

아직 공백 검사는 배워본 적이 없지만 스스로 검색하면서 코드를 짜보자.

😱내가 하는 걸 따라 쳐서는 실력이 늘 수가 없다.😱

<pre class="language-javascript"><code class="lang-javascript">$('#submit').on('click', function (){
<strong>    //여기에 코드 작성하면 작동함
</strong><strong>    //조건문
</strong>    alert("아이디를 입력하세요");
    
})
</code></pre>

<pre class="language-javascript"><code class="lang-javascript"><strong>$('form').on('submit', function (e){
</strong>   console.log(document.getElementById('email').value);
   if($('#email').val() == ''){
      alert('아이디를 입력하세요');
      e.preventDefault();
   }
});
</code></pre>

e는 이벤트 객체&#x20;

e.preventDefault() 는 폼 전송을 막는 코드

```javascript
if(1) {
 
}else if(2){

}else if(조건3){

}else {
    //나머지
}
```

&#x20;조건 2 가 참이면 조건3부터 else까지는 그냥 지나감

✨ 과제. 전송 누르면 아이디/ 패스워드 입력란 공백검사

✨ 과제. 패스워드가 4자 미만이면  길게 입력하라고 안내문 띄우기&#x20;

```javascript
if($('#password').val() == ''){
    alert('패스워드를 입력하세요');
}else if($('#password').val().length <4){
    alert('패스워드는 4자 이상이어야 합니다.');
}
```

&#x20;