<input>태그의 속성들

type

<input type="속성값" >

<input> 요소가 나타낼 타입을 명시한다. 기본값은 text이며 <input> 태그의 필수 속성은 아니지만 항상 명시하는것이 좋다.

• button
  클릭할 수 있는 버튼 생성

• checkbox
  체크박스(checkbox) 생성

• color
  색을 선택할 수 있는 입력 필드(color picker)생성

• date
  날짜를 선택할 수 있는 입력 필드 생성(year, month, day)

• datetime-local
  날짜와 시간을 선택할 수 있는 입력 필드 생성 (year, month, day, hour, minute)

• email
  이메일 주소를 입력할 수 있는 입력 필드 생성
  올바른 이메일 주소를 입력하지 않았을 시 알림창이 뜬다

• file
  업로드할 파일을 선택할 수 있는 입력 필드와 “파일 선택” 버튼 생성
  accept을 사용해서 업로드할 파일을 정할 수 있다.
  속성값으로
  .으로 시작하는 파일 확장자, audio/*, video/*, image/*, 미디어 타입
  을을 사용 가능하다.

• hidden
  사용자에게는 보이지 않는 숨겨진 입력 필드 생성

• image
  제출 버튼(submit button)으로 사용될 이미지 생성
  type="image"일때 img태그와 마찬가지로 alt,src, height, width속성을 사용할수 있다

• month
  날짜를 선택할 수 있는 입력 필드 생성 (year, month)

• number
  숫자를 입력할 수 있는 입력 필드 생성
  마우스로 숫자를 키우거나 줄일 수 있다

• password
  비밀번호를 입력할 수 있는 입력 필드 생성
  입력 내용이 사용자에게 보이지 않음

• radio
  라디오 버튼(radio button)생성
  성별처럼 둘 중 하나의 선택지만 고를 때 사용하고, 남성의 label과 여성의 label name속성을 똑같이 gender등으로 정해두면 둘다 선택하는 중복선택이 안되게 할 수 있다.

• range
  슬라이드 바를 조정하여 범위 내의 숫자를 선택할 수 있는 입력 필드 생성

• reset
  리셋 버튼(reset button) 생성

• search
  검색어를 입력할 수 있는 텍스트 필드 생성

• submit
  제출 버튼(submit button)생성

• tel
  전화번호를 입력할 수 있는 입력 필드 생성

• text
  type 속성의 기본값으로, 한 줄로 된 텍스트 필드 생성

• time
  시간을 선택할 수 있는 입력 필드 생성(hour, minute)

• url
  URL 주소를 입력할 수 있는 입력 필드 생성

• week
  날짜를 선택할 수 있는 입력 필드 생성 (year, week)

required

<input>태그 안에 쓰는 것으로 그 입력칸에 내용을 입력하지 않으면 브라우저 차원에서 경고와 함께 제출이 되지 않는다.

min, max, step

각각 <input>요소의 최소, 최대값, 입력할 수 있는 숫자들 사이의 간격을 나타낸다.

value

<input> 요소의 초깃값(value)을 명시한다.
value 속성은 <input> 요소의 type 속성값에 따라 다른 용도로 사용되는데,

• button, reset, submit : 버튼 내의 텍스트를 정의

• hidden, password, text : 입력 필드의 초깃값을 정의

• checkbox, image, radio : 해당 입력 필드를 선택 시 서버로 제출되는 값을 정의

또한, <input> 요소의 type 속성값이 file인 경우에는 value 속성을 사용할 수 없다.

---

boolean 속성

• 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다.

boolean속성을 가졌다면 밑에 boolean으로 표기

autocomplete

<autocomplete="on / off">

• on이 기본값이고 false로 설정시 자동완성기능을 사용하지 않음.

autofocus

boolean

• 페이지가 로드될 때 자동으로 포커스(focus)가 <input> 요소로 이동시킴.

checked

boolean

• 페이지가 로드될 때 미리 선택될 <input> 요소를 명시함.
  checked 속성은 페이지가 로드된 후에도 자바스크립트를 사용하여 설정할 수 있다.
  이 속성은 <input> 요소의 type 속성값이 checkbox 또는 radio인 경우에만 사용할 수 있다.

disabled

boolean

• 해당 <input> 요소가 비활성화됨을 명시함.
  disabled 속성이 명시된 <input> 요소는 사용할 수 없으며, 사용자가 클릭할 수도 없고, 폼 데이터가 제출될 때도 disabled 속성이 명시된 <input> 요소의 데이터는 제출되지 않는다.

• 특정 조건이 충족될 때까지 사용자가 입력 필드를 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 입력 필드를 다시 사용할 수 있도록 조절할 수 있다.

form

• 해당 <input> 요소가 포함될 하나 이상의 <form> 요소를 명시함.

  	<input form="(form id)">