jineecode

datalist 본문

HTML

datalist

지니코딩 2021. 4. 28. 22:55

developer.mozilla.org/ko/docs/Web/HTML/Element/datalist

 
- HTML: Hypertext Markup Language | MDN

아래 목록에서 브라우저를 선택하세요: BCD tables only load in the browserdatalist-polyfill을 추가해 구형 브라우저에서 지원을 추가하세요.

developer.mozilla.org

 

HTML <datalist> 요소는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 <option> 요소 여럿을 담습니다

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Plain HTML search</h1>
    <input list="test" placeholder="리스트를 고르세요">
    <datalist id="test">
        <option value="첫째"></option>
        <option value="둘째"></option>
        <option value="셋째"></option>
        <option value="넷째"></option>
    </datalist>
</body>
</html>

 

이 태그는 자동완성 입력을 가능하게 해준다.

input 에 list 속성을 넣어주고, 그에 맞추어 datalist의 id에도 같은 값을 넣어주면 가능!

 

 

See the Pen qBRwgza by HyejinUm (@uhj1993) on CodePen.

'HTML' 카테고리의 다른 글

줄바꿈 방법  (0) 2021.04.16
테스트 관리  (0) 2021.04.02
img 태그 404 Error시에 대체 이미지 띄우기  (0) 2021.03.05
배경에 동영상 넣기  (0) 2020.11.30
'HTML' Related Articles more
Comments