Html 폼(form) 요소(input) 종류 (3)

Html 폼(form) 요소(input) 종류 (3)

결과

결과

코드

See the Pen form3 by goddog (@g0dd0g) on CodePen.

input type	기능
checkbox	주어진 목록 중 선택할 수 있다. value 값을 이용해 판별한다. checked 를 사용하여서 기본값을 지정할 수 있다.
radio	주어진 목록 중 오직 하나만을 선택할 수 있다. name을 똑같이 주어서 묶어주어야만 하나만 선택받을수 있다.
datalist	input text 타입의 datalist를 연결해 주어 사용한다. 사용자가 직접 입력할 수 있으며 list에 입력한 것과 연관있는 목록을 보여준다.
select	하나만을 선택하는 콤보 박스를 만들 수 있다. selected 를 사용하면 기본값을 지정할 수 있다.

결과2

> 데이터 리스트는 목록의 있는 것을 선택할 수도, 없는 것을 직접 입력할 수 있다.

> 결과2 처럼 1을 입력하였더니 1로 시작하는 항목만을 보여준다.

> 또한, 입력하는 것을 돕기 위한 힌트의 역할도 할 수 있다.

결과3

> 콤보 박스는 데이터 리스트와 다르게 하나만을 선택할 수 있다. 

> multiple 속성을 주어 다수 선택할 수도 있지만 거의 사용하지 않는다.