Input Tag

사용자의 데이터를 받을 수 있는 대화형 컨트롤을 생성하는 태그

HTML의 Input Tag는 사용자에게 정보를 받아서 필드를 생성하는 태그다.

Div Tag는 <input>를 사용하며 다양한 속성을 통해 각각의 입력 데이터 유형과 컨트롤 위젯을 설정한다.

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

Input Tag의 속성

1. type="유형" : 입력 동작 방식 (필수 입력)

2. placeholder="문구" : 입력전 문구를 표시

3. minlength="n", maxlength="n" : 최소, 최대 입력 글자 제한

4. required : 필수 입력 항목

5. disabled : 입력할 수 없게 제한

6. value="초깃값" : 초깃값

  <input type="text" placeholder="이름을 입력하세요." minlength="2" maxlength="5" required value="홍길동">
  <input type="text" placeholder="입력하지 마세요." disabled>

type속성의 종류

1. <input type="text"> : 사용자에게 text를 입력받는 가장 기본적인 input형태

2. <input type="email"> : 사용자에게 email을 입력받는 input형태

3. <input type="password"> : 사용자에게 password를 입력받는 input형태

4. <input type="url"> : 사용자에게 url을 입력받는 input 형태

5. <input type="number"> : 사용자에게 숫자를 입력받는 input 형태

6. <input type="file"> : 사용자에게 파일첨부를 입력받는 input 형태

  <input type="text"><br>
  <input type="email"><br>
  <input type="password"><br>
  <input type="url"><br>
  <input type="number"><br>
  <input type="file">

위 코드를 실행하면 아래와 같은 결과가 출력된다.

Label Tag

사용자 인터페이스 항목의 설명을 나타내는 태그

HTML의 Label Tag는 <input>와 함께 연결되어 특정 폼 양식에 이름을 붙여주는 용도로 사용한다.

Label Tag는 <label>를 사용하며 for속성값을 <input>태그의 id속성과 동일한 속성값을 사용하여 연결한다.

보통 id속성 값을 사용할때는 #id형식으로 사용하지만 <label>태그에서는 예외다.

  <label for="user-name">이름</label>
  <input type="text" id="user-name" placeholder="이름을 입력하세요.">

위 코드를 실행하면 아래와 같은 결과가 출력된다.

참고 자료

<input> - HTML: Hypertext Markup Language - MDN Web Docs
<label> - HTML: Hypertext Markup Language - MDN Web Docs