HTML의 폼(Form) 요소 태그란 사용자로부터 입력을 받기위한 요소 태그들을 의미한다. 흔히 네이버 로그인 페이지를 예로 들었을때, 아래 요소들이 폼(Form) 요소 태그에 해당된다.

Untitled

input 태그

input 태그는 사용자로부터 입력 받는 입력창을 생성하는 태그이다.

<html>
	<body>
		<h1>로그인</h1>

    <div>
      <span>아이디를 입력해주세요.</span>
      <input type="text" />
    </div>

    <div>
      <span>비밀번호를 입력해주세요.</span>
      <input type="password" />
    </div>
	</body>
</html>

Untitled

input 태그에 지정하는 type 속성은 다양한 형태로 사용자에게 입력을 받도록 지원해준다.

type 설명
text (기본값) 사용자가 텍스트를 입력하는 용도로 사용
password 비밀번호를 입력하는데 최적화 되어있음 (입력 값이 별표(*)로 보여짐)
checkbox 사용자가 체크박스로 선택할 수 있도록 지정
radio 사용자가 라디오 버튼으로 선택할 수 있도록 지정
number 사용자가 숫자만 입력할 수 있도록 지정
email 이메일을 입력하는데 최적화 되어있음 (모바일에서)
tel 전화번호를 입력하는데 최적화 되어있음 (모바일에서)
date 사용자가 날짜를 선택할 수 있도록 지정
datetime-local 사용자가 날짜 및 시간을 선택할 수 있도록 지정

Untitled

이외에 input 태그에 지정할 수 있는 속성들은 아래와 같다.

속성 설명
name 입력 요소의 이름
value 입력 요소의 값
placeholder 미입력시 보여줄 힌트 문구
min 최소 입력값 (type=”number”만 해당)
max 최대 입력값 (type=”number”만 해당)
readonly 읽기전용 모드 여부 (입력 불가능)

textarea 태그

textarea 태그는 input 태그와 유사한 기능을 제공하지만 멀티라인 입력을 제공한다는 큰 차이점이 있다. 그리고 type 속성이 없고. 오직 텍스트 입력만 제공한다.

<html>
	<body>
    <div>
      <h2>독서감상문을 작성해주세요.</h2>
      <textarea placeholder="독서감상문 입력"></textarea>
    </div>
  </body>
</html>

Untitled

textarea 태그에 지정할 수 있는 속성들은 아래와 같다.