• 회원가입
  • 로그인
  • 구글아이디로 로그인

[attribute] HTML - list 속성 - 인풋에 입력 가능한 데이터리스트 지정 (= list속성 = 리스트속성) ※ 입력가능값 샘플

목차
  1. list 예제 - <input> 요소에 입력 가능한 데이터리스트 지정
  2. list 정의
  3. list 구문

 

list 예제 - <input> 요소에 입력 가능한 데이터리스트 지정

 

<form action="/action_page.php" method="get">

  <label for="lang">리스트에서 코딩언어 선택:</label>

  <input list="langs" name="lang" id="lang">

  <datalist id="langs">

    <option value="HTML">

    <option value="CSS">

    <option value="JS">

    <option value="PHP">

    <option value="SQL">

  </datalist>

  <input type="submit" value="확인">

</form>

 

결과보기

 

list 정의

 

<input> 요소에 입력 가능한 <datalist>지정.

 


 

1. list 속성 사용 가능 태그 종류

<input>

 

2.

사용자가 <datalist> 태그에 없는 값을 입력해 제출 시, 제출된 값은 <datalist> 하단에 자동으로 추가됨.

 

3.

주요 최신 브라우저 모두 지원.

 

 

list 구문

 

<input list="datalist_id">

 


[속성값]

 

datalist_id

<datalist> 태그의 id 속성 값과 일치해야 함.

 



분류 제목
form HTML - <input type="tel"> 태그 - 전화번호 입력 (= 인풋텔타입/텔타입인풋/텔인풋 요소…
form HTML - <input type="text"> 태그 - 1줄 텍스트 입력 (= 인풋텍스트타입/텍스트타입인풋…
form HTML - <input type="time"> 태그 - 시간 입력 (= 인풋타임타입/타임타입인풋/타임인풋 …
form HTML - <input type="url"> 태그 - http(s) 프로토콜 형식의 URL 주소 입력 (=…
form HTML - <input type="week"> 태그 - 연도와 몇주차인지 선택 입력 (= 인풋위크타입/위크…
attribute HTML - loading 속성 - 이미지 레이지로드 여부 지정 (= loading속성 = 로딩속성) ※ …
attribute HTML - cellspacing 속성 - 테이블셀간의 간격 지정 (= cellspacing속성 = 셀스페이…
attribute HTML - cellpadding 속성 - 테이블 셀 내부의 여백 지정 (= cellpadding속성 = 셀…
18/18
목록
찾아주셔서 감사합니다. Since 2012