lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

webIntroHtmlChapter3Title

lesson11Title

lesson12Title

webIntroHtmlChapter1Title

webIntroHtmlChapter2Title

webIntroHtmlChapter4Title

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR"
      rel="stylesheet"
    />
    <title>고급 `input` 활용 예시</title>
  </head>

  <body>
    
    <form action="/submit" method="post">
      <input type="text" name="username" placeholder="사용자 이름" />
      <br /><br />
      <input type="password" name="password" placeholder="비밀번호" />
      <br /><br />
      <input type="submit" value="제출" />
    </form>
    <br />

    
    <label for="username">사용자 이름:</label>
    <input type="text" name="username" />
    <br /><br />

    <label for="useremail">이메일 주소:</label>
    
    <input type="email" name="useremail" required />
    <br /><br />
  </body>
</html>

# input 입력 태그 심화

## `<form>`과 함께 사용하는 `<input />`

input 태그는 대부분 `<form>`(양식폼) 태그와 함께 사용합니다.

예를 들어 회원가입 화면에서 input 태그로 사용자에게 데이터를 입력을 받고, `<form>` 태그로 입력 받은 데이터를 서버에 전송합니다.

```html title="form 태그 활용 예시"
<form action="/submit" method="post">
  <input type="text" name="username" placeholder="사용자 이름" />
  <input type="password" name="password" placeholder="비밀번호" />
  <input type="submit" value="제출" />
</form>
```

입력폼에 대한 더 자세한 내용은 다음 수업에서 다루도록 하겠습니다.

<br />

## `label` 태그 활용

`label` 태그는 input 입력란의 설명이나 제목을 나타냅니다.

label 태그를 사용할 때는 input 태그의 `id` 속성과 label 태그의 `for` 속성을 같은 값으로 지정해야 합니다.

```html title="label 태그 예시"
<label for="username">사용자 이름:</label>

<input type="text" id="username" name="username" />
```

<br />

## 유효성 검사 (Validation)

유효성 검사는 입력된 정보가 올바른지 확인하는 것을 뜻합니다.

아래 input은 `required` 속성을 사용해 input이 값을 갖고 있는지 유효성을 검사합니다.

```html title="required 활용 유효성 검사"
<input type="email" name="useremail" required />
```

required 속성은 input 태그에서 필수 입력란을 지정하는데 사용됩니다. 이 속성을 사용하면 사용자가 값을 입력하지 않았을 때 폼 제출을 막을 수 있습니다.

input 입력 태그 심화

<form>과 함께 사용하는 <input />

label 태그 활용

유효성 검사 (Validation)

input 태그와 함께 유효성 검사를 위해 사용할 수 있는 속성은 무엇인가요?

`<form>`과 함께 사용하는 `<input />`

`label` 태그 활용