수정하기 - HTML에서 `<input>` 태그의 list 속성은 어떻게 사용하나요?

닉네임

비밀번호

제목

내용 [이미지 업로드는 권한이 있는 사람만 가능. 하단 카톡으로 연락]

HTML에서 `<input>` 태그의 `list` 속성은 사용자가 입력할 수 있는 텍스트 필드와 관련된 미리 정의된 옵션 목록을 제공하는 데 사용됩니다. 이 기능은 사용자가 입력할 때 자동 완성을 지원하여 더 나은 사용자 경험을 제공합니다. `list` 속성을 사용하려면 `<input>` 태그와 함께 `<datalist>` 태그를 사용해야 합니다.           기본 구조    `<input>` 태그의 `list` 속성은 `<datalist>` 태그의 `id` 속성과 연결됩니다. 아래는 기본적인 사용 예시입니다.    ```html  <!DOCTYPE html>  <html lang="ko">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Input with Datalist Example</title>  </head>  <body>      <label for="fruits">과일 선택:</label>      <input type="text" id="fruits" name="fruits" list="fruit-options">            <datalist id="fruit-options">          <option value="사과">          <option value="바나나">          <option value="체리">          <option value="포도">          <option value="오렌지">      </datalist>  </body>  </html>  ```           코드 설명    1.   `<input>` 태그  :      - `type="text"`: 텍스트 입력 필드를 생성합니다.     - `id="fruits"`: 이 입력 필드의 고유 식별자입니다.     - `name="fruits"`: 폼 데이터에서 이 필드의 이름입니다.     - `list="fruit-options"`: 이 입력 필드와 연결된 `<datalist>`의 ID를 지정합니다.    2.   `<datalist>` 태그  :      - `id="fruit-options"`: 이 데이터 목록의 고유 식별자입니다.     - `<option>` 태그: 사용자가 선택할 수 있는 옵션을 정의합니다. 각 옵션은 `value` 속성을 통해 사용자가 입력할 수 있는 값을 제공합니다.           사용 방법    사용자가 `<input>` 필드에 텍스트를 입력하기 시작하면, 브라우저는 `<datalist>`에 정의된 옵션 중에서 일치하는 항목을 자동으로 제안합니다. 사용자는 제안된 항목 중 하나를 선택하거나, 직접 텍스트를 입력할 수 있습니다.           브라우저 지원    대부분의 현대 웹 브라우저는 `<datalist>`와 `list` 속성을 지원하지만, 일부 구형 브라우저에서는 지원하지 않을 수 있습니다. 따라서, 이러한 기능을 사용할 때는 브라우저 호환성을 고려해야 합니다.           추가적인 옵션    `<datalist>`는 다양한 입력 옵션을 제공할 수 있으며, 이를 통해 사용자는 입력할 수 있는 값의 범위를 좁힐 수 있습니다. 또한, `<datalist>` 내의 `<option>` 태그는 동적으로 생성할 수도 있습니다. 예를 들어, JavaScript를 사용하여 사용자 입력에 따라 옵션을 추가하거나 제거할 수 있습니다.           예시: 동적 데이터 목록    ```html  <!DOCTYPE html>  <html lang="ko">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width, initial-scale=1.0">      <title>Dynamic Datalist Example</title>      <script>          function updateDatalist() {              const input = document.getElementById('fruit-input');              const datalist = document.getElementById('fruit-options');              const fruits = ['사과', '바나나', '체리', '포도', '오렌지'];              datalist.innerHTML = ''; // 기존 옵션 제거                fruits.<a href='https://sangseek.com/sangseeks/forEach/ko'>forEach</a>(fruit => {                  if (fruit.startsWith(input.value)) {                      const option = document.createElement('option');                      option.value = fruit;                      datalist.appendChild(option);                  }              });          }      </script>  </head>  <body>      <label for="fruit-input">과일 선택:</label>      <input type="text" id="fruit-input" oninput="updateDatalist()" list="fruit-options">      <datalist id="fruit-options"></datalist>  </body>  </html>  ```    이 예제에서는 사용자가 입력할 때마다 `updateDatalist` 함수가 호출되어, 입력된 값으로 시작하는 과일 목록만을 동적으로 생성합니다.           결론    HTML의 `<input>` 태그와 `list` 속성을 사용하면, 사용자에게 더 나은 입력 경험을 제공할 수 있습니다. `<datalist>`를 통해 미리 정의된 옵션을 제공함으로써, 사용자는 입력할 내용을 쉽게 선택할 수 있으며, 이는 특히 긴 목록이나 특정 형식의 데이터를 입력할 때 유용합니다.