[html] input 테그

<input>

---

웹에서 폼은 크게 사용자가 입력하는 부분과 입력하는 내용을 서버로 보내는 버튼 부분으로 나눈다.

사용자가 내용을 입력하는 부분은 한 줄 짜리 텍스트나 비밀번호인데, 이를 만드는게 input 테그이다

 

id 속성 사용하기

수 많은 input 테그를 구분짓기 위해서는 id가 필요하다. id를 지정하게 된다면 javascript나 css설정에 별도 설정으로 도움이 될 수 있다.

 

type

매우 중요한 유형, type에 따라서 input의 종류가 달라진다.

 

유형	설명
hidden	사용자에게 보이지 않지만 서버로 넘기는 값
text	한 줄 짜리 텍스트를 입력 할 수 있는 텍스트 상자
search	검색 상자
tel	전화번호 입력 필드
url	url 주소를 입력하는 필드
email	메일 주소를 입력하는 필드
password	비밀번호를 입력하는 필드
datetime	국제 표준시로 설정된 날짜와 시간을 넣는다. (년, 월, 일, 시, 분, 초, 분할 초)
date	사용자 지역을 기준으로 날짜를 넣는다.
month	사용자 기준으로 년, 월을 넣는다.
week	사용자 기준으로 년, 주를 넣는다.
time	사용자 기준으로 시간(시, 분,초, 분할 초)을 넣는다.
number	숫자를 조절할 수 있는 화살표를 넣는다.
range	숫자를 조절할 수 있는 슬라이드 막대를 넣는다.
color	색상 표를 넣는다.
checkbox	주어진 항목에서 0개 이상 선택 가능한 체크박스를 넣는다.
radio	주어진 항목에서 1개까지만 선택 가능한 라디오버튼을 넣는다.
file	파일을 첨부 할 수 있는 버튼을 넣는다.
image	submit 버튼 대신 사용할 이미지를 넣는다.
reset	리셋 버튼
button	버튼

 

placheholder

힌트 표시하기, 직접 입력 된 것은 아니고 이 칸에 무엇을 입력해야 할지 예제를 보여주는 방법이다.

 

readonly

사용자가 입력하지 못 하고 읽게만 만들 수도 있다.

 

min, max, step

min속성과 max 속성은 각각 필드의 최소값과 최대값을 의미한다. step 속성은 허용된 범위 내의 숫자의 일정한 간격을 뜻한다.

이 속성은 datetime, datetime-local, month, week, time, number, range일 경우에만 사용 할 수 있다.

 

size, minlength, maxlength

텍스트 길이를 조절한다. maxlength는 해당 텍스트에 몇 칸까지 입력 가능한지 조절을, minlength는 최소 몇글자 이상을 써야하는지 안내를 한다. size는 화면에서 몇 글자까지만 보이게 할 것인지를 크기를 지정할 수 있다.