<input> 태그

input 태그는 form 태그 내부에서 사용자의 입력값을 받아오기 위한 형식을 구현하는 태그이다.

input 태그는 label 태그와 짝꿍으로 사용하는 것이 접근성 측면에서 좋다.👌

---

📃 input 속성값 📃

 

 

🎈 type : 유형

 

text	default 값
textarea	여러 줄의 텍스트 입력 가능한 박스
radio	여러 버튼 중 한 가지만 선택가능
checkbox	여러 버튼 중 여러가지 선택 가능
image	이미지 전송 버튼을 만들어줌. submit 과 같은 제출 버튼
select	여러 개의 목록항목 생성, 선택가능
button
submit

 

file

reset

number

date, week, month, time

color

email

range : 슬라이드 컨트롤

search

url

 

 

🎈 name : 이름

raido 나 checkbox 를 쓸 때 여러가지의 input 태그들에 같은 name 을 줘야함

 

 

🎈 value : 초깃값

input 요소의 type 속성값에 따라 다른 용도로 사용됨

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

- hidden, password, text : 입력 칸의 초깃값 정의

- checkbox, image, radio : 해당 입력 칸 선택 시 서버로 제출되는 값을 정의

 

 

🎈 placeholder : 직접 지울 필요 없이 입력 박스 안에 보이는 텍스트를 작성할 수 있음

 

🎈 required : 필수 태그로 지정, 입력하지 않고 제출 버튼 누를 시 경고문

 

🎈 autofocus : 웹 페이지가 로딩되자마자 이 속성을 지정한 태그로 포커스가 이동

 

🎈 readonly : 읽기 전용 태그로 지정

 

🎈 minlength, maxlength : 최소, 최대 글자수 지정 가능

 

🎈 checked : 기본값으로 미리 선택되게 설정