html datalist, option 태그로 데이터 목록을 가지고 있는 창 만들기
네 안녕하세요, 이번 포스팅에서는 데이터 목록을 가지고 있는 창을 만들어보려 합니다.
때에 따라서 데이터 목록을 보여주고 거기서 선택을 하게 유도를 해야 하는 경우가 있습니다.
그래서 이번 시간에는 그러한 폼의 일종인 datalist 폼을 이용한 웹 폼을 만들어보도록 하겠습니다.
1. 데이터 목록을 가지고 있는 텍스트 입력 창 : datalist, option 태그 사용
우리가 어떤 검색어를 입력을 하거나 어떤 것을 입력창에서 선택을 할 때
자동 완성 기능을 통해서 검색창 아래로 여러 가지 키워드들이 쭈르륵 ~ 하고 나오는 걸 보신 적이 있으실 겁니다.
그게 바로 datalist 태그를 이용하여 만든 건데,
과거에는 이 기능을 자바스크립트로 구현을 했었지만,
현재는 html5에서 그 기능을 datalist 태그로 지원을 해주기 때문에 굳이 복잡하게 구현을 할 필요가 사라졌습니다.
그리고 datalist 태그에는 option 태그를 붙여서 연관이 되어있는 키워드를 붙일 수가 있습니다.
그렇게 하게 되면 우리가 어떤 키워드를 하나 입력을 했을 때, 거기에 관련이 된 모든 결과들이 쭉 ~ 하고 나오게 됩니다.
그리고 이러한 연관 키워드를 입력을 하기 위해서 우리는 '크롤링'이라 하는
데이터 수집 메크로를 이용해서 정보를 끌어옵니다.
하지만 크롤링은 아직까지는 난도가 있을 수 있기 때문에,
추후에 기회가 된다면 한 번 다뤄보도록 하겠습니다.
그럼 한 번 간단한 예제를 통하여 바로 알아보도록 할까요?
<!DOCTYPE html>
<html lang="ko">
<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>데이터 목록을 가진 텍스트 입력</title>
</head>
<body>
<h3>가보고 싶은 곳</h3>
<hr>
<form>
나라 : <input type="text" name="country" list="countries"><br>
<datalist id="countries">
<option value="가나">
</option><option value="스위스">
</option><option value="브라질">
</option>
</datalist>
보고 싶은 것 : <input type="text" list="what"><br>
<datalist id="what">
<option value="산">
</option><option value="바다">
</option><option value="도시">
</option>
</datalist>
</form>
</body>
</html>
이런 식으로 데이터 목록을 가진 텍스트 입력창에 대한 에제를 한 번 만들어봤는대요,
여기에 쓴 키워드는 나라, 그리고 가보고 싶은 장소에 관한 것들입니다.
일단 입력하는 타입은 문자를 입력해야 하기 때문에 text로 설정을 했고요,
리스트는 각각 나라와 가보고 싶은 곳에 대한 것을 기재하려 하기 때문에 contries와 what으로 정했습니다.
리스트명은 가독성이 좋은 키워드,
다시 말하면 html 태그와 겹치지 않으면서 현재 만들고자 하는 웹페이지와 연관이 되는 것이 가장 좋겠죠?
그리고 그 안에 datalist 태그를 써서 리스트를 구현을 해줍니다.
여기에 들어가는 id속성 역시 어떤 리스트를 만들겠다고 입력을 할 때 쓰는데,
보통 css를 할 때 많이 연관을 해서 씁니다.
하지만 굳이 css가 아니더라도,
태그 안에 있는 연관 키워드를 끌어다가 저런 식으로 연결을 지을 수도 있습니다.
그렇게 해서 각각의 연관 키워드를 연결을 시켜주고,
option 태그를 이용을 하여 그 연관 리스트를 적어줍니다.
그럼 결과가 어떻게 나오는지 한 번 같이 볼까요?
 |
 |
이렇게 검색창을 누르면 리스트가 쭉 뜹니다.
이 기능을 이용하면 특정한 키워드 입력을 할 때는
자동완성을 통해서 좀 더 빠르고 간편하게 입력을 할 수 있어서 매우 유용하고,
특히 이메일 주소 입력이나 전화번호 입력할 때 웹사이트 선택이나
전화번호 앞자리 선택할 때 이런 기능이 꽤 많이 쓰입니다.
그래서 나중에 웹 사이트 내에서 회원가입 페이지를 만들 때,
매우 유용히 사용을 할 수가 있습니다.
여기까지 간단하게 html 폼을 만드는 방법 중에 데이터가 있는 텍스트 입력창을 만드는 방법에 대하여 알아보았습니다,
다음 포스팅에서는 버튼을 이용한 폼을 만드는 방법에 대하여 알아보는 시간을 가져보도록 하겠습니다.
긴 글 읽어주신 독자분들께 진심으로 감사합니다 ~
'html, css, 자바스크립트 > html' 카테고리의 다른 글
| html 폼 만들기 4 - 이미지 버튼 만들기 (0) | 2023.03.04 |
|---|---|
| html 폼 만들기 3 - button 태그로 기본 버튼 만들기 (0) | 2023.03.04 |
| html 폼 만들기 1 - input, textarea 태그로 기본 텍스트 입력창 만들기 (0) | 2023.03.03 |
| html form 태그로 웹 폼 기본 구성 해보기 (0) | 2023.03.03 |
| html 시멘틱 인라인 태그 mark, time, meter, progress 태그에 대하여 알아보기 (0) | 2023.03.03 |
댓글