HTML의 데이터 목록 및 입력 목록 속성을 사용하여 검색 가능한 선택 상자를 어떻게 만들 수 있습니까?-CSS 튜토리얼-php.cn

집

웹 프론트엔드

CSS 튜토리얼

HTML의 데이터 목록 및 입력 목록 속성을 사용하여 검색 가능한 선택 상자를 어떻게 만들 수 있습니까?

Linda Hamilton

Oct 31, 2024 am 09:48 AM

How can I create a searchable select box using HTML's datalist and input list attributes?

향상된 사용자 입력으로 선택 상자 만들기

사용자는 수동으로 텍스트를 입력하기 위해 선택 상자의 편리함을 선호하는 경우가 많지만 때로는 보다 다양한 입력 옵션이 필요합니다. 검색 기능이 내장된 선택 상자를 도입하면 사용자가 원하는 항목을 쉽게 찾을 수 있습니다.

HTML의 및 <입력 목록> 속성

이 기능을 달성하기 위한 간단한 접근 방식은 HTML의 및 <입력 목록> 속성. 작동 방식은 다음과 같습니다.

<code class="html"><input list="brow">
<datalist id="brow">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist></code>

로그인 후 복사

이 코드에서 요소는 연관된 로 "brow"를 지정합니다. <데이터 목록> <옵션> 포함 선택 상자에 나열될 항목을 나타내는 요소.

검색 기능

사용자가 입력 필드에 입력을 시작하면 마법 같은 일이 일어납니다. 브라우저는 자동으로 입력에 따라 항목을 선택하고 관련 옵션만 표시합니다. 이는 선택 상자 내에서 원활하고 직관적인 검색 환경을 제공합니다.

Bootstrap을 사용한 스타일링

이 솔루션은 완벽하게 작동하지만 Bootstrap의 기능을 사용하여 모양과 동작을 향상시킬 수 있습니다. 강력한 CSS 클래스. 예는 다음과 같습니다.

<code class="html"><div class="form-group">
  <label for="browser">Browser:</label>
  <input list="brow" class="form-control" id="browser">
</div>
<datalist id="brow">
  ...
</datalist></code>

로그인 후 복사

및 <데이터 목록> 의 요소 "form-control" 클래스를 추가하면 선택 상자에 Bootstrap의 스타일에 맞는 일관되고 현대적인 모양을 부여할 수 있습니다.

위 내용은 HTML의 데이터 목록 및 입력 목록 속성을 사용하여 검색 가능한 선택 상자를 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.