html form

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

2020. 3. 21. 12:30

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 속성을 주어 다수 선택할 수도 있지만 거의 사용하지 않는다.

2020. 3. 20. 23:39

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

input type	기능
button	일반적인 버튼을 만든다. value="값" 을 주어 버튼 텍스트를 설정한다.
reset	폼에 입력된 내용을 reset(초기화) 해주는 버튼
image	이미지로 버튼을 만든다. src의 이미지 경로를 입력하면 img처럼 이미지가 뜨지만 버튼처럼 동작한다.
submit	제출 버튼으로 해당 폼의 데이터를 서버로 전송하는 등 처리한다.
color	컬러 피커 창을 띄워 색을 선택할 수 있다.
number	숫자를 입력 받을 때 유용히 사용할 수 있다. min = 최소값, max = 최대값 step = 증감 단위
range	슬라이드바로 숫자를 지정할 수 있다. 입력한 숫자는 value에 저장되어 이를 읽으면 된다. min = 최소값, max = 최대값
button	input 태그의 button 타입과 마찬가지로 버튼을 만드는 태그이다. 단, 버튼 태그 type에는 image가 없어 이미지 버튼을 만들기 위해서는 button태그 안의 img 태그를 사용해야 한다.

결과2

> number를 사용하면 이미지1 보이는 것처럼 스핀 버튼이 생겨 숫자를 증감 시킬 수 있다. 이 때 증감되는 숫자는 step으로 준 값이다.

+) label 은 요소를 묶어주는 역할을 한다. 위 코드에서는 "숫자 입력 : " 이라는 텍스트와 input 태그를 묶어주었다.

이렇게 연관된 것을 묶어야 css로 배치를 바꾸었을 때 묶음으로 움직일 수 있다.

PREV 1 NEXT