input type 종류 알아보기, 사용방법

폼 요소는 서버에 데이터를 전달하기 위한 요소이며 <input>은 대표적인 폼 요소입니다.

<input>은 내용이 없는 빈 요소이며 type 속성을 통해 여러 종류의 입력 양식으로 나타나게 됩니다.

 

 

• type = "text"

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

• placeholder "text"안의 글자
• type = "password" 입력하면 특수문자로 나오게 된다. 

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

• type = "radio" 

한 개만 클릭되게 하기

name 이라는 속성으로 같은 성격의 radio 버튼임을 명시해줘야 한다. 

여자 <input type="radio" name="gender">

남자 <input type="radio" name="gender">

 

 

 

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

 

• type = "checkbox" 

중복 선택이 가능합니다.

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

본 강의에서는 다루지 않았지만, 라디오 버튼과 체크박스에는 checked, name 속성이 존재합니다.

checked 속성은 값이 별도로 존재하지 않는 boolean 속성입니다.

boolean 속성은 true/false 둘 중 하나의 값을 가지며 속성이 존재하면 true, 속성이 존재하지 않으면 false를 가집니다.

해당 속성이 존재하면 사용자가 체크를 하거나 선택을 하지 않더라도 미리 기본값으로 체크, 선택된 상태로 나오게끔 하는 속성!

 

 

See the Pen Untitled by HelloHailie (@hellohailie) on CodePen.

 

 

name 속성은 라디오 버튼과 체크박스를 그룹화시켜주는 속성입니다.

아직 name 속성을 다루기 전이므로 실제 버튼을 클릭했을 경우 동작하는 방식에 대해서만 알아두시기 바랍니다.

 

 

• type = "file" 

파일을 서버에 올릴 때 사용합니다.

 

---

 

• type = "submit" 

값을 제출, 전송

value 라는 속성으로 이름 바꿀 수 있다. 

• type = "reset" 

값 초기화

value 라는 속성으로 이름 바꿀 수 있다. 

• type = "button"

아무 기능이 없다. 커스텀이 필요하다. 

value 라는 속성으로 이름 바꿀 수 있다. 

 

 

 

 

---

 

• type = "image"

이미지 버튼은 이미지 관련 속성인 src, alt 속성이 반드시 필요하며 width/height 속성을 적용할 수도 있다. 

 

<input type = "image" src="./btnW_축약형.png" alt="로그인" width="100" height="50">

 

 

구글링해보니 네이버에서 로그인 버튼을 무료로 배포하고 있어서 사용해봤습니다. 

강사님은 submit, image 버튼이 제대로 작동하는 것 같은데 저는 아니라서 이 부분은 더 공부를 해야겠습니다. 

https://developers.naver.com/docs/login/bi/bi.md

로그인 버튼 사용 가이드 - LOGIN

 

---

 

👇더 공부하기 👇

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

<input>: The Input (Form Input) element - HTML: HyperText Markup Language | MDN