---
description: form은 form 태그로 만들어냅니다.
---

# form

```html
<form>
  <input>
</form>
```

input태그는 닫지 않습니다.



```html
<form action="경로~~" method="get">
    <input type="text" class="text-input">
    <input type="password" name="pwd">
    <input type="email" placeholder="배경글자임" class="text-input">
    <input type="date">
    <input type="checkbox">
    <input type="">
    
    <select>
        <option>a</option>
        <option>b</option>
    </select>
    
    <textarea rows="10">
    
    </textarea>
    
    <input type="submit">
    <button>전송</button>
</form>
```

10개는 더 있지만 가장 자주 쓰는 것만 모아봤습니다.&#x20;

나머지는 필요할 때 구글에 찾아쓰도록 합시다. &#x20;





```css

.text-input{
    padding: 10px;
    font-size: 20px;
    border: 1px solid black;
    border-radius: 5px;
}

.text-input[type=email]{
    padding: 10px;
    font-size: 20px;
    border: 1px solid black;
    border-radius: 5px;
}
```



✨과제. 아래의 form 만들어보기

<figure><img src="https://3814826491-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJyHOwztPxBT3bLpisjCt%2Fuploads%2Fvuod20ECaNdVsJ0UtjVl%2FScreenshot_96.png?alt=media&#x26;token=59a145c2-7b53-417c-9263-8347a6ba69c1" alt=""><figcaption></figcaption></figure>

