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로 배치를 바꾸었을 때 묶음으로 움직일 수 있다.
'Html' 카테고리의 다른 글
Html 폼(form) 요소(input) 종류 (3) (0) | 2020.03.21 |
---|---|
Html 폼(form) 요소(input) 종류 (1) (0) | 2020.03.20 |
Html 특수 문자, 기호 사용 (0) | 2020.02.14 |
html 테이블(table ) 표 만들기 (2) | 2020.02.03 |
Html 태그 - 시맨틱 태그 및 기타 태그 (0) | 2020.02.02 |