폼의 알파와오메가 <input> 태그
<input> 태그는 폼의 대부분 요소들을 타입(type) 속성을 이용해 만들어 낼 수 있는 만능 태그입니다.
다양한 형태의 사용자 입력(input)을 받는 요소들을 만드는 태그다!
그래서 태그명도 <input> 태그입니다. <select>태그나 <textarea> 태그같은 예외적인 태그들도 있지만, 기본적인 폼의 기본 요소들은 모두 <input> 태그로 만든다고 이해하면 됩니다.
그만큼 중요하고, 폼의 근간이되는 태그이기도 합니다.
<input> 태그에 사용하는 다양한 속성들에 대해서는 다른강의에서 소개가 될 것이므로 이 강의에서는 <input> 태그를 이용해 어떤 폼 요소들을 만들 수 있는지, 또 그 폼요소들이 어떤 형태로 출력되고 사용되는지를 간단하게 알아보기 됩니다.
앞서 말한것처럼 <input> 태그는 type 속성을 이용해 요소의 타입을 구분합니다.
<input> 태그에는 아래 표에있는 타입들이 사용가능합니다.
사용 빈도에따라 기본 타입과 자주 사용하지 않는 고급 타입들로 구분했고 위쪽에 있는 타입들이 더 많이 사용된다고 보면 됩니다.
기본 <input> 타입
타입 |
설명 |
text |
1줄 입력 필드. <input type="text" name="fieldname" value="" size="20" maxlength="20"> |
hidden |
화면에 보이지 않는 감춤 폼 요소 생성. value 속성으로 값을 지정할 수 있으며, 폼 전송시 함께 전송됩니다. <input type="hidden" name="hiddenfield" id="hiddenfield" value=""> |
password |
패스워드 입력 필드. text와 동일한 한줄 입력 필드지만, 입력하는 글자가 "*"로 표시됩니다. <input type="password" name="passwd" value="" required> |
checkbox |
체크박스. 체크된 상태를 표시하는데 checked 속성을 사용합니다. 이름(name) 속성값으로 그룹화해 하나의 체크박스 그룹을 생성합니다. 같은 이름을 사용하는 체크박스 그룹안에서 checked 속성을 여러개 사용 가능합니다. <input type="checkbox" name="checker" checked> |
radio |
라디오박스. 체크된 상태를 표시하는데 checked 속성을 사용합니다. 이름(name) 속성값으로 그룹화해 하나의 라디오박스 그룹을 생성합니다. 같은 이름을 사용하는 체크박스 그룹안에서 checked 속성을 한개만 사용 가능합니다. <input type="radio" name="checker" checked> * 2개이상 사용이 불가능한 것은 아닙니다. 마지막 checked 된 것이 선택된 것으로 처리될 뿐입니다. |
file |
파일 업로드를 위해 파일을 선택하는 파일 선택자. accept 속성을 이용해 선택하는 파일을 필터링 할 수 있습니다. <input type="file" name="img" id="img" accept=".jpg"> |
button |
버튼 표시. 버튼을 만드는 방법은 여러가지가 있습니다. <input> 타입으로 button을 만들기도 하고, 전용 태그인 <button> 태그를 이용하기도 합니다. 또는 이미지(image) 타입으로 버튼 기능을 할 수 있도록 만들거나, <div> 태그 등으로 버튼 기능을 할 수 있게 만들 수도 있습니다. <input type="button" name="btnsearch" id="btnsearch" value="검색"> |
image |
이미지 표시. 이미지 URL 경로는 src 속성으로 지정합니다. 이미지 버튼을 만들거나, 폼안에 표시하는 이미지를 관리상 편의를 위해 사용합니다. 이미지는 이미지 전용 태그인 <img> 태그가 더 많은 속성들을 사용할 수 있고, 다양한 설정이 가능하기 때문에 <img> 태그를 사용하는 것이 일반적입니다. <input type="image" src="./img/btn01.jpg"> |
reset |
폼 리셋 버튼. <button> 태그의 타입으로 reset 을 지정하면 동일한 기능을 합니다. <input type="reset" name="btn_reset" value="리셋"> |
submit |
폼 전송 버튼. <button> 태그의 타입으로 submit 을 지정하면 동일한 기능을 합니다. <input type="submit" name="btn_submit" value="전송"> |
기본 타입을 활용한 폼 예
