본문 바로가기

HTML&CSS

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

반응형




폼의 알파와오메가 <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="전송">



기본 타입을 활용한 폼 예


<form>
    이름: <input type="text" name="username"><br>
    패스워드: <input type="password" name="passwd"><br>
    성별: <input type="radio" name="gender" value="male" checked>
            <input type="radio" name="gender" value="female"><br>

    이용 교통수단: <input type="checkbox" name="vehicle" value="Bike"> 자전거
                        <input type="checkbox" name="vehicle" value="Car"> 승용차
                        <input type="checkbox" name="vehicle" value="Bus"> 버스
                        <input type="checkbox" name="vehicle" value="Bus"> 지하철<br>

    생일: <input type="date" name="bday" max="1979-12-31"><br>
    선택색상: <input type="color" name="favcolor"><br>
    이메일 주소: <input type="email" name="email"><br>
    나이: <input type="range" name="age" min="0" max="100"><br>
    연락처: <input type="tel" name="usrtel"><br>
    블로그: <input type="url" name="blogurl"><br>
    <input type="reset" value="초기화">
    <input type="submit" value="등록"><br>
</form>


< 이전강의 다음강의 >


반응형

닫기