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




+ Recent posts