html input

3줄 요약

1. 개념 : html에서 사용자에 입력값을 종류별로 받을수 있게 해주는 태그
2. html을 배우는 초반에 가장 강력하고 자주 찾게되는 태그 
3. 속성과 타입에 종류가 많아서 그때그때 찾아보는게 편한 것 같다(쓰다보면 외워짐)

---

시작하기에 앞서

input태그는 초반에 배우는 다른 태그들 보다도 훨씬 속성이 많고

필요한 기능마다 대응하는 타입을 활용하는 법을 알아야 하기 때문에 처음엔 조금 어렵다고 느낄수도 있다.  

하지만 input태그는 실제로 많이 쓰이고 있고 다른 사이트들을 보아도 여러 쓰인 예시들을 볼수 있는데 

가장 흔하게 찾아볼수 있는곳에서 예시를 찾아보면 네이버 검색창들을 예로 들수 있다

네이버 검색창

저 이미지에 해당하는 검색창에 코드를 찾아보면 

네이버 검색창에 html 코드

보다시피 input 태그로 이루워져 있는것을 알 수 있다.

그런데 이 input 태그도 여러 속성과 태그에 따라 굉장히 다양한 응용이 가능하다

---

type(필수 속성)

  input에 요소의 동작 방식은 이 속성에 값에 따라 메우 달라지는데

대표적으로 많이 쓰는것만 알아보면

<input type="text">

이 코드는  text 타입에 코드를 생성하는 것으로 아무런 택스트나 입력받는 칸을 만들고 

이러한 빈 칸을 생성한다

<input type="color">

color는 웹 브라우저 마다 다르지만 크롬에 경우에는 

이러한 rgb값을 반환하는 팔래트를 만들어 준다

 자세한 내용은 type속성이 많아서 메우 많아짐으로 따로 글을 쓰도록 했다

---

다른 속성들 

input에는 다양한 속성들이 있는데 html5에 들어오면서 20개가 넘는 속성이 있는걸로 알고있는데 

워낙 다양한 속성들이 있고 각각 여러 기능들을 제공해주기 때문에 이를 표로 정리한게 있길래 가져와 봤다.

accept	file	파일을 업로드 컨트롤에서 기대하는 파일 유형을 암시
alt	image	이미지 유형에 대한 대체 속성. accessibiltiy 측면에서 필요.
autocomplete	all	양식 자동생성 기능 (form autofill) 암시
autofocus	all	페이지가 로딩될때 양식 제어에 오토포커스
capture	file	파일 업로드 제어에서 input 방식에서 미디어 capture
checked	radio, checkbox	커맨드나 컨트롤이 체크 되었는지의 여부
dirname	text, search	양식 전송시 요소의 방향성을 전송할 때 양식 필드의 Name
disabled	all	양식 컨트롤이 비활성화되었는지의 여부
form	all	컨트롤을 양식 요소와 연결
formaction	image, submit	양식 전송시 URL 사용하기
formenctype	image, submit	양식의 데이터 인코딩 유형이 양식 전송시 사용될 것
formmethod	image, submit	양식 전송시 HTTP 방식을 사용
formnovalidate	image, submit	양식 전송시 양식 컨트롤 확인을 무시하기
formtarget	image, submit	양식 전송시 브라우징 맥락
height	image	이미지 높이에서  height 속성과 같음
list	almost all	datalist 자동입력 옵션의 id 속성값
max	numeric types	최대값
maxlength	password, search, tel, text, url	value의 최대 길이 (문자수)
min	numeric types	최소값
minlength	password, search, tel, text, url	value의 최소 길이 (문자수)
multiple	email, file	불리언값. 여러 값을 허용할지의 여부
name	all	input 양식 컨트롤의 이름. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다
pattern	password, text, tel	value 가 유효하기 위해 일치해야 하는 패턴
placeholder	password, search, tel, text, url	양식 컨트롤이 비어있는 때 양식 컨트롤에 나타나는 내용
readonly	almost all	불리언값. 이 값은 수정이 불가능함
required	almost all	불리언값. 양식이 전송되기 위해서 반드시 입력하거나 확인이 필요한 값
size	email, password, tel, text	컨트롤의 크기
src	image	이미지 출처의 주소에서 src 와 같은 속성
step	numeric types	유효한 증분적인 (Incremental)값
type	all	input 양식 컨트롤의 유형
value	all	양식 컨트롤의 현재 값. 이름/값 짝(name/value pair)의 일부로서 양식과 함께 전송된다
width	image	이미지의  width 속성과 같다

[출처 developer.mozilla.org/ko/docs/Web/HTML/Element/Input] - html을 공부할때 많이 사용한 사이트로 잘 정리되있기 때문에 보기 편함으로 메우 추천한다.

---

input 태그는 html을 처음 배울때나 나중에 되서도 자주 쓰이기 때문에 숙달될때까지 여러번 사용하는거를 추천한다.

이 글은 아직 공부중인 학생이 작성한 글로 다소 정확하지 않을수도 있습니다..

그래도 최선을 다해서 작성하였습니다..

잘못된 정보가 있다면 댓글로 알려주세요!