<input> 태그 개념과 속성

<input>

• 사용자로부터 입력을 받을 수 있는 입력 필드 정의
• 사용자가 데이터를 입력할 수 있는 입력 필드를 선언
• <form> 요소 내부에서 사용됨
• <input> 요소의 type 속성값을 다르게 하여 여러 가지 모양으로 나타낼 수 있음
• 빈 태그 (닫는 태그가 없는 태그 (공백 태그; empty tag)) -> 속성만을 포함하고 있음
• <label> 요소 사용 -> <input> 요소의 라벨 정의 가능

<input> 태그의 속성

name

• <input> 요소의 이름 명시

form

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

value

• <input> 요소의 초깃값 명시
• type 속성값에 따라 다른 용도로 사용
  
  • 버튼 내 텍스트 정의 : button, reset, submit
  • 입력 필드의 초깃값 정의 : hidden, password, text
  • 해당 입력 필드 선택 시 서버로 제출되는 값 정의 : checkbox, image, radio
  • value 속성 사용 불가능 : file

type

• <input> 요소가 나타낼 타입 명시
  
  • button, checkbox, color, date, datetime-local, email, file
  • hidden, image, month, number, password, radio, range
  • reset, search, submit, tel, text, time, url, week

alt

• 이미지의 대체 텍스트 명시
• type=“image”인 경우에만 사용 가능

src

• 제출 버튼(submit button)으로 사용될 이미지의 URL을 명시
• type=“image”인 경우에만 사용 가능

size

• 너비를 문자수 단위로 명시

width

• 너비를 픽셀 단위로 명시
• type =“image”인 경우에만 사용 가능

height

• 높이를 픽셀 단위로 명시
• type=“image”인 경우에만 사용 가능

list

• <input> 요소에서 사용하기 위해 미리 정의해 놓은 옵션들을 포함하고 있는 <datalist> 요소들 명시

max

• 최댓값 명시

maxlength

• 허용되는 최대 문자수 명시

min

• 최솟값 명시

placeholder

• 입력될 값에 대한 짧은 힌트 명시

accept

• 서버로 업로드 할 수 있는 파일의 타입 명서
• type="file"인 경우에만 사용 가능

autocomplete

• 자동 완성 기능 사용 여부 명시

autofocus

• 페이지 로드 시, 자동 포커스가 <input> 요소로 이동됨을 명시

checked

• 페이지 로드 시, 미리 선택될 요소 명시
• type="checkbox" 또는 type="radio"인 경우에만 사용 가능

disabled

• 해당 요소가 비활성화됨을 명시

multiple

• 사용자가 둘 이상의 값을 입력할 수 있음을 명시

readonly

• 입력 필드가 읽기 전용임을 명시 (쓰기 불가능)

required

• 폼 데이터가 서버로 제출되기 전, 반드시 채워져 있어야 하는 입력 필드 명시