05-2 사용자 입력을 위한 input 태그

아이디나 검색어를 입력하는 검색 상자나 로그인 버튼처럼 사용자가 입력할 부분은 주로 <input> 태그를 이용해 넣음

<input> 태그로 넣을 수 있는 요소는 아주 다양함.

 

>>> 웹 폼의 다양한 곳에서 사용하는 <input> 태그

웹 사이트에서 흔히 볼 수 있는 회원 가입이나 로그인 화면은 폼을 사용해 작성한 것임.

<input> 태그는 다양한 폼에서 사용자가 입력한 정보를 받을 때 사용한다는 것을 잘 기억해두자.

 

>>> <input> 태그의 type 속성 한눈에 살펴보기

로그인 창에서 아이디와 비밀번호를 입력하거나 로그인 버튼을 클릭하는 등 <input> 태그는 매우 다양한 입력 형태로 만들 수 있음. <input> 태그에서 입력 형태를 지정할 때 type 속성을 사용함. 

 

>>>텍스트와 비밀번호를 나타내는 type="text"와 type="password"

텍스트 필드는 폼에서 가장 많이 사용하는 요소임.

주로 아이디나 이름, 주소 등 한 줄짜리 일반 텍스트를 입력할 떄 사용함.

[기본형]

<input type ="text">

<input type="password">

 

>>>다양한 용도에 맞게 입력하는  type="search", type="url", type="email", type="tel"

 

>>> 체크 박스와 라디오 버튼을 나타내는 type="checkbox", type="radio"

체크 박스와 라디오 버튼은 여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소임

이때 항목을 1개만 선택하려면 라디오 버튼을 사용하고, 2개 이상 선택하려면 체크 박스를 사용함.

[기본형]<input type="checkbox"> / <input type="radio">

 

>> 체크 박스와 라디오 버튼에서 사용할 수 있는 속성

-- value : 선택한 체크 박스나 라디오 버튼을 서버에게 알려 줄 때 넘겨줄 값 지정.

이 값은 영문이거나 숫자여야 하며 필수 속성임

-- checked : 체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데,

여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용함. 속성값은 따로 없음.

 

>> 라디오 버튼과 name 속성

간혹 HTML 소스 코드를 보면 라디오 버튼에 name 속성이 포함된 것을 볼 수 있음.

name 속성은 PHP와 같은 웹 프로그래밍에서 폼 요소를 제어할 때 자주 사용함.

라디오 버튼에서 하나의 버튼만 선택할 수 있게 하려면 모든 라디오 버튼의 name값을 똑같이 지정해야 함.

 

>>> 숫자 입력 필드를 나타내는 type="number", type="range"

텍스트 필드에서 사용자가 숫자를 직접 입력할 수도 있지만 type="number"를 사용하면 스핀박스가 나타나면서 숫자를 선택할 수 있음. 그리고 type="range"는 슬라이드 막대를 움직여 숫자를 입력할 수 있음

[기본형] <input type="number"> / <input type="range">

 

>>>날짜 입력을 나타내는 type="date", type="month", type="week"

[기본형] <input type="date | month | week">

 

>>>시간 입력을 나타내는 type="time", type="datetime", type="datetime-local"

[기본형]<input type="time | datetime | datetime-local">

 

>>>전송, 리셋 버튼을 나타내는 type="submit", type="reset"

전송 버튼을 나타내는 submit은 폼에 입력한 정보를 서버로 전송함.

submit 버튼으로 전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨짐.

반면에 reset 버튼은 <input>요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 함.

이때 value 속성을 사용해서 버튼에 표시할 내용을 지정함.

[기본형]<input type="submit" | reset" value="버튼에 표시할 내용">

 

>>>이미지 버튼을 나타내는 type="image"

type="image"는 submit 버튼과 같은 기능을 하는 이미지 버튼을 나타냄.

[기본형]<input type="image"   src="이미지 경로"   alt="대체 텍스트">

 

>>>기본 버튼을 나타내는 type="button"

type="button"은 submit이나 reset 버튼과 같은 기능이 없고 오직 버튼 형태만 삽임함.

주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용함.

[기본형] <input type="button" value="버튼에 표시할 내용">

 

>>>파일을 첨부할 때 사용하는 type="file"

간혹 폼에서 사진이나 문서를 첨부해야 하는 경우가 있음. 이럴 땐 type="file"로 지정하면 폼에 파일을 첨부할 수 있음

type="file" 유형을 사용하면 웹 브라우저 화면에 [파일 선택]이나 [찾아보기] 버튼 등이 표시되는데, 이 버튼을 클릭하고 파일을 선택하면 파일이 첨부됨.

[기본형] <input type="file">

 

>>>히든 필드 만들 때 사용하는 type="hidden"

히든 필드는 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소임.

사용자에게 굳이 보여 줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력함.