html5 datalist 태그의 사용법은 무엇입니까? 다음은 datalist 태그의 사용 예입니다.-H5 튜토리얼-php.cn

html5 datalist 태그의 사용법은 무엇입니까? 다음은 datalist 태그의 사용 예입니다.

寻∝梦

풀어 주다： 2018-09-03 17:33:54

원래의

5661명이 탐색했습니다.

이 글에서는 주로 html5 datalist 태그의 사용법과 html5 datalist 태그의 사용 예에 대해 설명합니다. 이 글에서는 모두가 선택하고 시청할 수 있도록 일반적으로 사용되는 두 가지 옵션 상자에 대해 설명합니다. 이 글을 함께 살펴보겠습니다.

먼저 html5 datalist 태그의 사용법을 살펴보겠습니다.

태그 정의 옵션 목록. 이 요소를 입력 요소와 함께 사용하여 가능한 입력 값을 정의하세요.

데이터 목록과 해당 옵션은 표시되지 않으며 단지 합법적인 입력 값 목록일 뿐입니다.

데이터 목록을 바인딩하려면 입력 요소의 목록 속성을 사용하세요.

Availability: datalist: 선택 가능한 입력 목록(선택 드롭다운 목록보다 편리함, 전용)

이제 html5 datalist 태그의 예를 살펴보겠습니다.

다음은 입력 요소이며, 그 가능성은 datalist에 설명되어 있습니다. 값:

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="PHP中文网">
  <option value="html">
  <option value="寻梦">
</datalist>

로그인 후 복사

브라우저에 다음과 같이 표시됩니다.

html5 datalist 태그의 사용법은 무엇입니까? 다음은 datalist 태그의 사용 예입니다.

이것은 아무런 동작이 없는 효과입니다. 이제 마우스를 위로 이동한 후 클릭하는 효과를 살펴보겠습니다. :

html5 datalist 태그의 사용법은 무엇입니까? 다음은 datalist 태그의 사용 예입니다.

보세요, 효과가 나타납니다. 이는 html5 datalist 태그의 기본 사용법입니다.

입력 입력 상자의 목록 속성 값은 데이터 목록의 ID이므로 데이터 목록을 입력 입력 상자와 연결할 수 있습니다. 데이터 목록 자체는 표시되지 않으며 입력 입력과 일치해야 할 때만 자동으로 표시됩니다.

html5 데이터리스트 태그의 또 다른 사용 예:

웹 디자인에서는 입력 상자와 같은 자동 드롭다운 프롬프트가 자주 사용되는데, 이는 사용자 입력을 크게 촉진합니다. 과거에는 이러한 기능을 구현하려면 개발자에게 일부 Javascript 기술이나 관련 프레임워크를 사용하여 Ajax 호출을 수행하도록 요구해야 했으며, 이를 위해서는 일정량의 프로그래밍 작업이 필요했습니다. 그러나 HTML5의 점진적인 인기로 인해 개발자는 새로운 datalist 태그를 사용하여 매우 아름다운 자동 완성 구성 요소 효과를 신속하게 개발할 수 있습니다

html5 datalist 태그의 코드 예:

<!DOCTYPE html>
<html>
<head>
<title>HTML5 datalist tag</title>
<meta charset="utf-8">
</head>
<p>
        浏览器版本：<input list="words">
</p>
<datalist id="words">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
<option value="Sogou">
<option value="Maxthon">
</datalist>
</body>
</html>

로그인 후 복사

효과는 그림과 같습니다:

html5 datalist 태그의 사용법은 무엇입니까? 다음은 datalist 태그의 사용 예입니다.