> 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/html-css/form.md).

# 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&amp;token=59a145c2-7b53-417c-9263-8347a6ba69c1" alt=""><figcaption></figcaption></figure>