# 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;


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://leeans-dev-book.gitbook.io/docs/lecture/javascript/form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.