폼 관련 태그들 - 사용자 입력을 위한 <input> 태그 1

폼 관련 태그들 - 사용자 입력을 위한 <input> 태그 1

• 아이디나 검색어를 입력하는 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input> 태그를 이용해 넣습니다.
• <input> 태글로 넣을 수 있는 항목은 아이디나 비밀번호를 비롯해 이메일 주소, 전화번호, 날짜, 시간, 이미지, 버튼 등 다양합니다.

1. <input> 태그 - 입력 항목 만들기

• 웹에서의 폼은 크게 사용자가 입력하는 부분과 입력한 내용을 서버로 보내는 버튼 부분으로 나눌 수 있습니다. 사용자가 내용을 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데 이런 부분을 만들 때 사용하는 태그가 <input> 태그입니다.
• 체크박스나 로그인 버튼처럼 사용하자 클릭하는 버튼도 <input> 태그를 이용합니다.
• <input> 태그로 만들 수 있는 폼 요소가 상당히 많은데 그것은 <input> 태그 안에 있는 type 속성을 이용해 구분합니다.

 

기본형 : <input type="유형" [속성="속성 값"]>

id 속성 사용하기

• 폼을 만들다 보면 똑같은 폼 요소가 여러 번 사용됩니다. 이렇게 여러 번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id 속성입니다.
• id를 지정해 놓으면 <label> 태그를 이용해 캡션을 붙일 수도 있고 CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수도 있습니다.
• id 속성 값은 최소한 한개 이상의 문자여야 하고 공백이 있어서는 안됩니다.

예를 들어

<div class="exam1">
    <input type="text" id="user-name" size="15">
    <input type="text" id="password" size="20">
</div>

<input> 태그의 type 속성에서 사용 가능한 유형

 

유 형	설 명
hidden	사용자에게는 보이지 않지만 서버로 넘겨지는 값을 가집니다.
text	한 줄짜리 텍스트를 입력할 수 있는 텍스트 상자를 넣습니다.
search	검색 상자를 넣습니다.
tel	전화번호 입력 필드를 넣습니다.
url	URL 주소를 입력할 수 있는 필드를 넣습니다.
email	메일 주소를 입력할 수 있는 필드를 넣습니다.
password	비밀번호를 입력할 수 있는 필드를 넣습니다.
datetime	국제 표준시(UTC)로 설정된 날자와 시간(연,일,시,분,초,분할 초)를 넣습니다.
datetime-local	사용자가 있는 지역을 기준으로 날짜와 시간(연,일,시,분,초,분할 초)를 넣습니다.
date	사용자 지역을 기준으로 날짜(연,월,일)을 넣습니다.
month	사용자 지역을 기준으로 날짜(연,월)을 넣습니다.
week	사용자 지역을 기준으로 날짜(연,주)를 넣습니다.
time	사용자 지역을 기준으로 시간(시,분,초,분할 초)를 넣습니다.
number	숫자를 조절할 수 있는 화살표를 넣습니다.
range	숫자를 조절할 수 있는 슬라이드 막대를 넣습니다.
color	색상 표를 넣습니다.
checkbox	주어진 항목에서 2개 이상 성택 가능한 체크박스를 넣습니다.
radio	주어진 항목에서 1개만 선택할 수 있는 라디오 버튼을 넣습니다.
file	파일을 첨부할 수 있는 버튼을 넣습니다.
submit	서버 전송 버튼을 넣습니다.
image	submit 버튼 대신 사용할 이미지를 넣습니다.
reset	리셋 버튼을 넣습니다.
button	버튼을 넣습니다.

 

 

참고 : HTML5 + CSS3 웹 표준의 정석