input 태그 자세히 알아보기
예전의 익스플로러 눈치를 보느라 HTML5에서 제공되는 많은 기능들을 적극적으로 활용하지 못했었었다..
텍스트 관련 input type
password : 비밀번호 안 보이게 감춘다.
search : (브라우저마다 x 뜨거나 안 뜬다. 돋보기 모양 나타날수도 있다.)
tel : ex) 휴대폰에서 키보드 자판 배열이 숫자로 바뀐다. (브라우저에 따라 차이가 있다.)
텍스트 관련 input type 속성들
placeholder 속성 : ex) placeholder="5자 이하" 라고 하면 칸에 5자 이하가 적혀있다. 칸을 누르면 없어짐.
maxlengh 속성 : ex) maxlengh= "5" -> 최대 길이
minlengh 속성 : ex) minlengh= "3" -> 최소 길이, 위반 시 브라우저마다 다른 안내과 함께 제출이 거부된다.
숫자 관련 input type
number : 숫자만 써지고 화살표로 숫자를 올릴수도 있다.
range : 자체 사용하기에는 어렵다. -> JS와 결합하여 사용
date : 달력이 나온다. (브라우저마다 모양이 다름)
이 외에도 여러가지 종류가 있다.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/month
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/time
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/week
숫자 관련 input type 속성들
min : date 등 타입마다 형식이 다르다.
max : date 등 타입마다 형식이 다르다.
step : 단위별로 step을 밟는다. 10을 설정하면 10씩 커지거나 주는 행태이다.
체크 관련 input type
checkbox : 체크 박스를 만든다.
radio : (옛 카세트 테이프 라디오를 상상하라.) 하나를 체크하면 다른 체크한 것이 off가 된다. 같은 name으로 묶인 것만 적용된다.(그룹화의 의미가 있다.)
체크 관련 input type 속성들
checked : 기본으로 체크되어 있게 한다.
value : 사용자가 제출했을 때 서버로 넘어가면 그 때 실제로 어떤 값이 넘어가게 될지를 value에 적는다.
기타 input type
file : 파일을 업로드 할 때 쓰인다.
hidden : 사용 ex) 사용자들에게 보여줄 것은 아니고(또는 보면 안되는), 어떤 기준에 의해 자동으로 작성되어 함께 보내지는 부분.
email : email 적고 형식에 맞지 않는다면 안내문이 뜬다. 그러나, 막 그렇게 정교하지는 않다.
ex) mike763@velog.com -> 꼼꼼한 이메일 체크를 위해서는 JAVA SCRIPT를 이용하여 섬세하게 지정한다.
기타 input type
accept : 받아낼 파일 확장자 (PNG, JPG 등) -> 속성 사용하지 않으면 모든 확장자 다 사용할 수 있다.
(참조 : https://developer.mozilla.org/ko/docs/Web/HTML/Element/input/file#%EA%B3%A0%EC%9C%A0_%ED%8C%8C%EC%9D%BC_%EC%9C%A0%ED%98%95_%EC%A7%80%EC%A0%95%EC%9E%90)
multiple : 여러 파일 동시 업로드 가능 여부
input 요소 공통(대부분) 속성들
value : placeholder 속성과 다르다. placeholder는 안내문을 써주는 것, value는 기본적으로 써져있는것. ex)아이디 미리 써져 있는 것.
autofocus : 페이지가 처음으로 나타났을때 커서가 자동으로 선택되어 깜빡거리고 있다.
readonly : 기본적으로 써져있고 수정할 수 없음. 읽기만 가능.
disabled : 입력불가 창. (의미 : 너랑 해당 안된다.)
required : 무조건 써야하고 쓰지 않으면 제출 안되고 알림이 뜬다.
readonly VS disabled
readonly는 내용이 전송되지만 disabled는 전송이 안된다.
이 모든 것들이 하나의 form 안에서 진행된다 !!
