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

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

결과

결과

코드

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로 배치를 바꾸었을 때 묶음으로 움직일 수 있다.