By aPOST in CSS — 2023년 12월 23일

HTML+CSS 기초 강의 - 14. 폼만들기 기초 3 - <input> 태그와 기본 타입들

폼의 알파와오메가 <input> 태그

<input> 태그는 폼의 대부분 요소들을 타입(type) 속성을 이용해 만들어 낼 수 있는 만능 태그입니다.

다양한 형태의 사용자 입력(input)을 받는 요소들을 만드는 태그다!

그래서 태그명도 <input> 태그입니다. <select>태그나 <textarea> 태그같은 예외적인 태그들도 있지만, 기본적인 폼의 기본 요소들은 모두 <input> 태그로 만든다고 이해하면 됩니다.

그만큼 중요하고, 폼의 근간이되는 태그이기도 합니다.

<input> 태그에 사용하는 다양한 속성들에 대해서는 다른강의에서 소개가 될 것이므로 이 강의에서는 <input> 태그를 이용해 어떤 폼 요소들을 만들 수 있는지, 또 그 폼요소들이 어떤 형태로 출력되고 사용되는지를 간단하게 알아보기 됩니다.

앞서 말한것처럼 <input> 태그는 type 속성을 이용해 요소의 타입을 구분합니다.

<input> 태그에는 아래 표에있는 타입들이 사용가능합니다.

사용 빈도에따라 기본 타입과 자주 사용하지 않는 고급 타입들로 구분했고 위쪽에 있는 타입들이 더 많이 사용된다고 보면 됩니다.

기본 <input> 타입

타입	설명
text	1줄 입력 필드.
hidden	화면에 보이지 않는 감춤 폼 요소 생성. value 속성으로 값을 지정할 수 있으며, 폼 전송시 함께 전송됩니다.
password	패스워드 입력 필드. text와 동일한 한줄 입력 필드지만, 입력하는 글자가 "*"로 표시됩니다.
checkbox	체크박스. 체크된 상태를 표시하는데 checked 속성을 사용합니다. 이름(name) 속성값으로 그룹화해 하나의 체크박스 그룹을 생성합니다. 같은 이름을 사용하는 체크박스 그룹안에서 checked 속성을 여러개 사용 가능합니다.
radio	라디오박스. 체크된 상태를 표시하는데 checked 속성을 사용합니다. 이름(name) 속성값으로 그룹화해 하나의 라디오박스 그룹을 생성합니다. 같은 이름을 사용하는 체크박스 그룹안에서 checked 속성을 한개만 사용 가능합니다. * 2개이상 사용이 불가능한 것은 아닙니다. 마지막 checked 된 것이 선택된 것으로 처리될 뿐입니다.
file	파일 업로드를 위해 파일을 선택하는 파일 선택자. accept 속성을 이용해 선택하는 파일을 필터링 할 수 있습니다.
button	버튼 표시. 버튼을 만드는 방법은 여러가지가 있습니다. 타입으로 button을 만들기도 하고, 전용 태그인
image	이미지 표시. 이미지 URL 경로는 src 속성으로 지정합니다. 이미지 버튼을 만들거나, 폼안에 표시하는 이미지를 관리상 편의를 위해 사용합니다. 이미지는 이미지 전용 태그인 태그가 더 많은 속성들을 사용할 수 있고, 다양한 설정이 가능하기 때문에 태그를 사용하는 것이 일반적입니다.
reset	폼 리셋 버튼.
submit	폼 전송 버튼.

기본 타입을 활용한 폼 예