웹퍼블리셔-입문]input태그

input 태그란?

1. 사용자 입력 태그(단독태그)
2. 아이디, 비밀번호, 회원가입, 설문조사
3. 한번 클릭하면 체크 / 다시 클릭하면 체크해제(버튼하나로 체크가 되었다가 풀렸다)
4. css에서 클릭이벤트 대신 활용

<input type = "속성값">

속성값에는,,

text	텍스트 입력	hidden	사용자에게 안보임	time	시/분/초 삽입
password	비밀번호 입력	search	검색 상자	week	연/주 삽입
radio	라디오 버튼	tel	전화번호	data	연/월/일 삽입
checkbox	체크박스 생성	month	사용자 자역 연/월	e-mail	이메일 입력
file	파일첨부버튼	number	숫자조절 화살표	buttom	버튼 삽입

이 외에도 다양한 속성값이 있습니다. 

몇가지만 적용시켜볼까요?

 

1. checkbox

체크박스를 삽입하고 싶을 때 사용하고 여러개 체크가 가능합니다. 

이때 체크박스 옆에 문구를 삽입하고 싶다면 label 태그를 사용하며,,

2. radio

checkbox와 달리 한 개만 선택 가능합니다.

3. search

검색상자를 만들고 싶을 때 사용합니다.

검색창을 만들때는

*placeholder="내용"
 =>미리보기, 글자 넣어둠, 글자 적을때 사라짐
   
 *value="내용"
 =>미리설정된 값, 클릭해도 글자가 살아있음

이렇게 작성했을 때 브라우저를 보면 이렇게 나타납니다.

상자에 "다음"이라는 단어를 쓰게 되면,,

value에 적은 문구는 사라지지 않고 placeholder에 적은 문구는 사라지는 것을 볼 수 있습니다.

4. buttom

클릭할 수 있는 버튼을 넣고 싶을 때 사용합니다.