By aPOST in CSS — 2023년 12월 23일

HTML+CSS 기초 강의 - 17. 폼만들기 기초 6 - <input> 태그의 속성

<input> 태그의 속성

<input> 태그는 폼을 만드는데 가장 근간이 되는 태그이기 대문에 사용할 수 있는 속성도 방대하고, 속성값도 만만치 않게 많습니다.

이번 강의에서는 많이 사용하는 기본적인 <input> 태그 속성들과 사용 빈도가높지 않은 고급 속성들을 나눠서 알아보도록 하겠습니다.

내용이 워낙 방대하기 때문에 하나하나 다 예를 들어 설명하면 아마 영원히 끝나지 않는 강의가 될 수 있기 때문에 간략하게 표로 정리해서 눈에 익혀만 두고 넘어갑니다.

실전 예에서 어떻게 사용되는지 하나씩 예제를 보게되면 자연스럽게 이해가 될 겁니다.

기본 <input> 속성들

<input> 태그로 표현할 수 있는 폼 타입이 워낙 많기 때문에 사용할 수 있는 속성들도 그만큼 많습니다.

그중 비교적 많이 사용하고, 또 간단한 속성들만 따로 뽑으면 아래 표와 같습니다.

표에서 속성과 사용값이 같은 것(예: autofocus, checked)은 별도의 값 없이 해당 속성을 표시하는 것만으로 "true", 즉 해당 속성을 사용한다는 뜻이 됩니다.

속성	사용값	설명
type	button, checkbox, color, date , datetime-local , email , file, hidden, image, month , number , password, radio, range , reset, search, submit, tel, text, time , url, week	태그의 용도와 표시방법을 지정 color, date 같은 타입은 과거 자바스크립트 라이브러리로만 구현이 가능했었지만 HTML5에서는 기본 구현이 되어있는 타입이 되었습니다. 단, 인터넷익스플로러에서는 지원되지 않으므로 호환성을 염두해야 할 경우 사용해서는 안됩니다.
value	텍스트	요소의 값을 지정. 폼이 전송될 때 전송되는 요소의 실제 값.
alt	텍스트	이미지를 위한 속성으로 이미지를 대체해 표시할 때 보이는 텍스트. 모바일 대응 웹페이지를 제작할 경우 꼭 사용할 것을 추천.
autocomplete	"on" 또는 "off"	입력 필드에 자동 완성 기능을 사용할지 여부를 지정
autofocus	autofocus	페이지 로딩 완료 후 이 요소에 포커스가 자동으로 오도록 할지 여부릴 지정.
checked	checked	태그를 체크박스, 라디오박스로 사용할 경우, 페이지 로딩 시점에 미리 선택되어 있는 상태 여부를 지정합니다.
disabled	disabled	미사용 상태, 요소가 옅은 회색톤으로 변하면서 요소가 사용 불가능 상태가 됩니다. 페이지 로딩시 값이 미리 지정되어 있어도 폼 전송시 해당 요소값은 전송되지 않음.
width	픽셀	태그를 이미지로 사용할 경우에만 적용됨. 너비값.
height	픽셀	태그를 이미지로 사용할 경우에만 적용됨. 높이값.
multiple	multiple	한개 이상 여러개의 값을 입력, 또는 선택할 수 있는지 여부를 지정. 요소를 파일선택자로 사용해 여러개의 파일을 선택하거나, 이메일주소로 사용해 여러개의 이메일 주소를 입력하는 경우 사용.
name	텍스트	요소의 이름. 요소를 개별적으로 구분하는데 사용.
placeholder	텍스트	입력필드 등에 예상되는 추천 값을 힌트로 미리보기로 보여주는 용도로 사용. 해당 태그가 포커스 되면 사라집니다.
readonly	readonly	읽기 전용. 입력 필드가 사용자 입력할 수 없는 상태가 됨. 페이지 로딩시 지정된 value 값은 그대로 유지되며, disabled 와 달리 폼 전송시 값도 전송됨.
required	required	해당 입력 필드에 값이 반드시 입력되어 있어야만 폼이 전송 가능해집니다. required 가 지정된 필드에 입력된 내용이 없을 경우 아래와 같은 경고 메시지가 표시되고 폼이 전송되지 않습니다.
size	0보다 큰 숫자	입력 필드의 너비 지정. 너비값은 글자수로 지정합니다. 20이며 20자(한글기준) 너비만큼 입력 필드 영역 가로 길이가 지정됩니다. 실제 한글 글자수만큼 정확한 너비가 설정되지 않기 때문에 CSS로 크기 조절을 약간씩 해야합니다.
src	URL	태그를 이미지로 사용할 경우 이미지 경로 URL을 지정. 이미지 타입인 경우에만 사용 가능.

기본 <input> 속성을 이용해 간단한 폼 만들기

기본 속성들을 이용해 간단한 폼 예제를 만들면 다음과 같은 폼을 만들어 볼 수 있습니다.

실무에서 폼을 코딩으로 작성하게 되면 기본 사용 태그는 대부분 <input>, <select> 태그 중심으로 만들게 됩니다.

사용하는 속성들도 대부분 위에 있는 기본 속성들만 주로 사용됩니다.

위 표에 있는 속성 정도만 머리속에 잘 넣어두면 코딩으로 폼을 만드는 과정을 큰 문제없이 해나갈 수 있습니다.

또, 고급 속성이지만 이미지나 파일 업로드 폼에 자주 사용하는 폼 속성값인 enctype="multipart/formdata" 정도는 외워두는 것이 좋습니다.

전체 폼에서 고급 태그들이나 고급 속성을 사용하는 비율은 10% ~ 20% 안쪽이고, 거의 사용하지 않는 태그, 속성은 강의나 레퍼런스를 보고 사용하면 됩니다. 이런것들은 폼을 자주 작성하다보면 자연스럽게 외워지므로 여기서는 위의 표에 있는 기본 속성들만 가능하면 외워두는 것을 추천합니다.

외운다기 보다는 눈에 자주 담아서 익숙해지면 자연스럽게 에디터로 태그를 작성할 수 있게 되니까 자주자주 봐둘 것을 추천합니다.

< 이전강의 다음강의 >