input 관련 태그
html에서 사용자에게 원하는 값을 상호작용하면서 받는 태그들이 있다. JAVA에서 scanner로 입력을 받았듯 유사하게 사용자에게서 값을 받아서 전달해주는 태그들이다.
input 태그는 정의할때
< input type=""> 이런형식으로 타입을 지정하여주면서 사용할 수있다.
- text 태그
사용자에게 문자열 기반의 텍스트를 입력받기 위한 태그이다.결과
이런식으로 사용자에게 텍스트 입력받는 공간을 만들어준다.
2.number 태그
사용자에게 정수 및 실수 기반의 텍스트를 입력받기 위한 태그
결과
숫자를 입력하거나 아래위로 버튼을 눌러 숫자를 조절할 수도 있다.
3.password태그
사용자에게 문자열 기반의 텍스트를 입력받기 위한 태그
입력받은 내용을 화면상 표시하지 않는다 (가려서 보여준다)
결과
해당 입력 공간이 가려져서 나온다.
4.email태그
사용자에게 문자열 기반의 이메일 주소를 입력받는다
형식에 맞지 않으면, 제출할 수 없다
결과
type 옆에 required 를 입력하면 이메일 형식이 갖춰지도록 메세지가 출력된다.
- radio 태그
사용자에게 마우스를 이용하여 항목을 선택한다
이름이 같은 항목은 여러개 중 하나만 선택할 수 있다
결과
성인
미성년자
name에는 이 라디오가 선택하게될 값의 이름을 지정해주면 된다.
6.checkbox
사용자에게 마우스를 이용하여 항목을 선택한다
이름이 같은 항목중 여러개를 중복 선택할 수 있다
결과
빨강
초록
파랑
7.range
사용자에게 마우스로 숫자의 범위를 지정하여 입력받는다
입력값의 범위를 지정할 수도 있다
결과
8.date
사용자에게 키보드 및 마우스로 날짜를 입력받는다
날짜는 yyyy-MM-dd 형식의 텍스트이다
결과
9.time태그
사용자에게 키보드 및 마우스로 시간을 입력받는다
시간은 a hh:mm 형식의 텍스트이다
결과
10.file태그
사용자에게 첨부 파일을 입력받는다
파일은 문자열 기반이 아니므로, 별도의 규칙이 필요하다
결과
-
hidden태그
화면에 나타나지 않는 유형의 input 값을 만들어낸다
input의 type이 hidden이면 display속성이 none 이다(자리차지 없음) -
submit태그
form 태그 내부의 input 및 입력 요소의 값을 action에 전달한다
button 태그가 form 태그 내부에 있다면 동일한 역할을 수행한다결과
-
button 태그
외형 상 일반 button 및 submit과 동일하지만 아무런 작동이 없다
주로, javascript를 이용하여 form 내부에서 이벤트를 부여하기 위해 사용한다결과
-
color 태그
색상 고유의 값을 알수있도록 해주는 태그결과
그외의 태그
1.select 태그
여러 목록 중 하나를 선택하여 값을 지정한다
기능 상 input type="radio" 와 유사하다
결과
=== 거주 지역을 선택하세요 === 서울 인천 대전 대구 울산 광주 부산 제주
- textarea태그
placeholder라는 속성을 이용하면 커서를 올려 입력칸을 누르기전까지 무엇을 혹은 어떻게 입력해야 할지 가이드라인을 정해줘서 사용자에게 받는 입력 오류를 어느정도 줄여줄수 있다.
결과
