input

HTML <input> 요소는 웹 기반 양식에서 사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성한다.

입력 유형과 특성의 다양한 조합 가능성으로 인해, <input> 요소는 HTML에서 제일 강력하고 복잡한 요소 중 하나이다.

input 유형

: 입력 요소 - HTML: Hypertext Markup Language | MDN

<input> 요소의 동작 방식은 type 특성에 따라 현격히 달라지므로,

각각의 유형은 별도의 참고 문서에서 더 자세히 확인할 수 있다.

특성을 지정하지 않은 경우, 기본값은 text.

See the Pen by jongha (@gajong) on CodePen.

input 속성

: 입력 요소 - HTML: Hypertext Markup Language | MDN

<input> 요소가 강력한 이유는 바로 다양한 속성 때문이다.

모든 <input> 요소는 유형에 상관하지 않고 HTMLInputElement (en-US) 인터페이스에 기반하므로,

기술적으로는 모든 <input>이 동일한 속성을 가진다.

하지만 대부분의 속성은 일부 유형에서만 효과를 보이고 어떤 속성은 유형별로 그 영향이 달라진다.

See the Pen by jongha (@gajong) on CodePen.

사용하기에 따라서 다채롭게 사용할 수 있다.

input속성과 form

input의 유효성 검사를 작동시키기 위해서는 div가 아닌 form 태그를 사용해야 한다.

input이 form 안에 있어야 된다.

form은 button click 또는 input에서 enter를 누르면 입력값이 submit(제출)되는 기능이 있다.

예시)

See the Pen by jongha (@gajong) on CodePen.

예시처럼 제출한 값을 화면에 띄울 수도 있다.