[기본 개념] 2 | (2.2) input 태그의 type 속성

[기본 개념] 2 | (2.2) input 태그의 type 속성

1 폼 삽입하기

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

3 input 태그의 주요 속성

4 폼에서 사용하는 여러 가지 태그

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

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

 

기본형

<input type="text">

<input type="password">

 

 텍스트 필드는 폼에서 가장 많이 사용하는 요소이다. 주로 아이디나 이름, 주소 등 짧은 일반 텍스트를 입력할 때 사용하는데, 비밀번호 필드는 입력하는 내용을 '*' 나 '●' 로 표시한다.

 

 텍스트 필드와 비밀번호 필드에서 사용하는 주요 속성은 다음과 같다.

 

종류	설명
size	텍스트와 비밀번호 필드의 길이를 지정하여 화면에 몇 글자가 보이도록 할 것인지를 정함
value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여주는 내용. 사용하지 않으면 빈 텍스트 필드가 표시
maxlength	텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정

 

(ex. 간단한 로그인 폼 만들기 )

 

<from>
  <fieldset>
    <label>아이디: <input type="text" id="user_id" size="10"></label>
    <label>비밀번호: <input type="password" id="user_pw" size="10"></label>
    <input type="submit" value="로그인">
  </fieldset>
</from>

 

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

 

기본형

<input type="search">

<input type="url">

<input type="email">

<input type="tel">

 

 텍스트 필드는 한 줄짜리 일반 텍스트를 입력할 수 있다. 하지만 텍스트 필드를 더 세분해야 할 때 사용한다.

 

 type="search" 를 사용하면 웹 브라우저 화면으로 볼 때는 텍스트 필드와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다. 웹 브라우저에서는 이 필드에 검색어를 입력하면 오른쪽에 X 가 표시되어 입력한 검색어를 지울 수 있다.

 

 type="url" 은 웹 주소를 입력하는 필드이다.

 

 type="email" 은 이메일 주소를 입력하는 필드이며 웹 브라우저가 알아서 확인한다. 웹 브라우저가 입력값이 지정한 형식에 맞지 않으면 오류 메시지를 보여준다.

 

 type="tel" 은 전화번호를 나타내는 필드이다.

 

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

 

기본형

<input type="checkbox">

<input type="radio">

 

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

 

 type="radio" 는 항목을 1개만 선택할 때 사용하고, 하나의 버튼만 선택할 수 있게 하려면 모든 라디오 버튼의 name 값을 똑같이 지정해야 한다.

 

 type="checkbox" 는 항목을 2개 이상 선택할 때 사용한다.

 

 체크 박스와 라디오 버튼에서 사용할 수 있는 속성은 다음과 같다.

 

종류	설명
value	선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정. 영문이거나 숫자여야 하며 필수속성
checked	체크 박스나 라디오 버튼의 항목 중에서 기본으로 선택해놓고 싶은 항목에 사용

 

(ex. 체크 박스와 라디오 버튼을 삽입하는 폼 만들기 )

 

<fieldset>
  <legend>상품 선택</legend>
  <p><b>주문할 상품을 선택해 주세요.</b></p>
  <label><input type="checkbox" value="s_3">선물용 3kg</label>
  <label><input type="checkbox" value="s_5">선물용 5kg</label>
  <label><input type="checkbox" value="f_3">가정용 3kg</label>
  <label><input type="checkbox" value="f_5">가정용 5kg</label>
  <p><b>포장 선택</b></p>
  <label><input type="radio" name="gift" value="yes" >선물 포장</label></li>
  <label><input type="radio" name="gift" value="no">선물 포장 안 함</label></li>
</fieldset>

 

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

 

기본형

<input type="number">

<input type="range">

 

 type="number" 를 사용하면 스핀박스로 숫자를 선택할 수 있다.

 

 type="range" 는 슬라이드 막대를 움직여 숫자를 입력할 수 있다.

 

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

 

기본형

<input type="date | month | week"> 

 

 웹 문서나 애플리케이션에 달력을 넣으려면 type="date", type="month", type="week" 같은 날짜 관련 유형을 이용한다.

 

 type="date" 는 달력에서 날짜를 선택해서 입력할 수 있다. "yyyy-mm-dd"

 

 type="month" 는 달력에서 월을 선택해서 입력할 수 있다. "yyyy-mm"

 

 type="week" 는 달력에서 주를 선택해서 입력할 수 있다. 몇 번째 주인지 표시된다.

 

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

 

기본형

<input type="time | datetime | datetime-local"> 

 

 type="time" 은 폼에서 시간을 입력할 수 있다.

 

 type="datetime" 또는 type="datetime-local" 은 사용자가 웹 문서를 보고 있는 지역에 맞는 날짜와 시간을 함께 입력할 수 있다.

 

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

 

기본형

<input type="submit | reset" value="버튼에 표시할 내용">

 

 type="submit" 은 전송 버튼을 나타내며 폼에 입력한 정보를 서버로 전송한다. submit 버튼으로 전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨진다.

 

 type="reset" 은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 한다. 이 때 value 속성을 사용하여 버튼에 표시할 내용을 지정한다.

 

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

 

기본형

<input type="image" src="이미지 경로" alt="대체 텍스트">

 

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

 

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

 

기본형

<input type="button" value="버튼에 표시할 내용">

 

 type="button" 은 기능은 없고 오직 버튼 형태만 삽입한다. 주로 버튼을 클릭하여 자바스크립트를 실행할 때 사용한다. value 속성을 사용하여 버튼에 표시할 내용을 지정한다.

 

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

 

기본형

<input type="file">

 

 type="file" 은 폼에서 사진이나 문서를 첨부해야 하는 경우에 사용하며, 웹 브라우저 화면에 [파일 선택]이나 [찾아보기] 버튼 등이 표시되어 파일을 선택하면 파일이 첨부된다.

 

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

 

기본형

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

 

 type="hidden" 은 화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소이다. 관리자가 알아야 하는 정보를 히든 필드로 입력한다.

 

 

 

 

 

 

출처 | Do it! HTML+CSS+자바스크립트 웹 표준의 정석(고경희)