[HTML 기초] 사용자 입력을 위한 <input> 태그 - 1

<input> 태그 살펴보기

• 사용자가 내용을 입력하는 부분은 한 줄짜리 텍스트나 비밀번호 같은 부분인데, 이런 부분을 만들 때 사용하는 태그가 <input>태그다. 체크박스나 로그인 버튼처럼 사용자가 클릭하는 버튼도 <input> 태그를 이용한다.

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

 

id 속성 사용하기

• 폼을 만들다 보면 똑같은 폼 요소가 여러 번 사용 된다. 예를 들어 회원 가입 폼을 만들 경우, 이름 입력 항목이나 주소 입력 항목 등 한 줄짜리 텍스트를 입력할 때 모두 <input type="text"> 라는 텍스트 필드를 사용한다. 여러 번 사용된 폼 요소를 구분하기 위해 사용하는 것이 id 속성이다.
• id를 지정하면 <label> 태그를 이용해 캡션을 붙일 수도 있고, CSS를 이용해 각 요소마다 다른 형태로 꾸밀 수 있다.

<input type="text" id="name" size="10"> <input type="password" id="pwd" size="30">

 

<input> 태그의 type 속성

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

 

type="hidden" - 히든 필드 만들기

• 화면 상의 폼에는 보이지 않지만 사용자가 입력을 마치고 폼을 서버로 전송할 때 서버로 함께 전송된다.

<input type="hidden" name="name" value="서버로 넘길 값">

• 서버로 넘길 값은 name 속성을 이용해 필드의 이름을 지정하고 그에 대한 값을 value 속성에 넣어준다.

 

type="text" - 텍스트 필드 만들기

• 제일 많이 사용하는 type이다. 한 줄 짜리 일반 텍스트를 입력할 때 사용한다.

<input type="text" [속성="속성 값"]>

• text의 속성
  • name : 텍스트 필드를 구별할 수 있도록 이름을 붙인다.
  • size : 텍스트 필드의 길이를 지정한다.
  • value : 텍스트 필드 요소가 화면에 표시될 때 필드 부분에 표시될 내용이다.
  • maxlength : 텍스트 필드에 입력할 수 있는 문자 개수를 지정한다.

 

type="password" - 비밀번호 입력 란 만들기

• 비밀번호 입력 란을 만든다.
• 비밀번호를 입력할 때 text를 사용해 비밀번호가 노출되면 안 되기 때문에 비밀번호는 password를 타입을 사용한다.

<input type="password" [속성="속성 값"]>

 

type="radio", type="checkbox" - 라디오 버튼과 체크박스 넣기

• 여러 항목 중 원하는 항목을 선택할 때 사용하는 폼 요소다.

<input type="radio" [속성="속성 값"]> 
<input type="checkbox" [속성="속성 값"]>

• 속성에는 checked가 있다. checked 속성은 기본적으로 선택해 놓을 항목이 있을 때 checked 속성을 사용한다.