[HTML] 사용자 입력을 위한 input 태그

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

• <input> 태그가 사용되는 곳들

  • 회원 가입•로그인 화면
  • 검색 창
  • 기타 사용자가 입력한 정보를 받는 경우
    
    

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

• text 필드 : id / 이름 / 주소 등 한 줄짜리 일반 텍스트를 입력할 때 사용

• password 필드 : 입력하는 내용을 화면에 보여 주지 않아야 하므로 사용자가 입력하는 내용을 화면에 ' * ' 나 ' • ' 로 표시한다.

• 기본형

  <input type="text">
   <input type="password">

• text 필드와 password 필드에서 사용하는 주요 속성

  종류	설명
  size	텍스트와 비밀번호 필드의 길이를 지정한다.
  value	텍스트 필드 요소가 화면에 표시될 때 텍스트 필드 부분에 보여 주는 내용 비밀번호 필드에서는 사용하지 않는 속성
  maxlength	텍스트 필드와 비밀번호 필드에 입력할 수 있는 최대 문자 수를 지정한다.

  
  

  🧩 간단한 로그인 폼 만들기

• 코드

  <form>
    <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>
  </form>

  
  
• 결과 화면
  
  
  

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

text 필드는 한 줄짜리 일반 텍스트를 입력할 수 있다. 하지만 폼을 만들다 보면 텍스트 필드를 더 세분해야 할 때가 있다. 그래서 HTML5에서는 용도에 맞게 입력할 수 있는 텍스트 필드를 다양하게 제공한다.

이 필드들은 text 필드를 기본으로 한다. 따라서 위에서 설명한 text 필드와 거의 같은 속성을 사용한다.

1. type="search"

   • 화면으로 볼 때는 text field와 똑같지만, 웹 브라우저에서는 검색을 위한 텍스트 필드로 인식한다.

2. type="url"

   • 웹 주소를 입력하는 필드

3. type="email"

   • 이메일 주소를 입력하는 필드

4. type="tel"

   • 전화번호를 나타내는 필드
   • 모바일 페이지에서 이 값을 이용하면 바로 전화를 걸 수 있음
     
     

이렇게 텍스트 필드에서 세분화된 필드는 PC용 웹 브라우저에서는 큰 변화가 없는 것처럼 보이나, 모바일 기기의 웹 브라우저에서 확인하면 이메일 주소를 입력하거나 전화번호를 입력할 때 가상 키보드 배열이 바뀌는 것을 볼 수 있다.

 🧩 배송 정보를 입력할 수 있는 폼 만들기

• 코드

  <ul>
    <li>
      <label for="user-name">이름</label>
      <input type="text" id="user-name">
    </li>
    <li>
      <label for="addr">배송 주소</label>
      <input type="text" id="addr">
    </li>
    <li>
      <label for="mail">이메일 주소</label>
      <input type="email" id="mail">
    </li>
    <li>
      <label for="phone">연락처</label>
      <input type="tel" id="phone">
    </li>
  </ul>

  
  
• 결과 화면
  
  
  

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

여러 항목 중에서 원하는 항목을 선택할 때 사용하는 폼 요소

• radio 버튼 : 항목을 1개만 선택

  • 이미 선택한 항목이 있을 경우, 다른 항목을 선택하면 기존 항목은 취소됨

• checkbox 버튼 : 항목을 2개 이상 선택

• checkbox 와 radio 버튼에서 사용할 수 있는 속성

  종류	설명
  value	선택한 체크 박스나 라디오 버튼을 서버에게 알려줄 때 넘겨줄 값을 지정한다. 이 값은 영문이거나 숫자여야 하며, 필수 속성이다.
  checked	체크 박스나 라디오 버튼의 항목은 처음에 아무것도 선택되지 않은 상태로 화면에 표시되는데, 여러 항목 중에서 기본으로 선택해 놓고 싶은 항목에 사용한다.

  
  

🧩 체크박스와 라디오 버튼을 삽입하는 폼 만들기

• 코드

  <fieldset>
    <legend>상품 선택</legend>
    <p><b>주문할 상품을 선택해 주세요.</b></p>
    <label><input type="checkbox" value="s_3">BOSE스피커</label>
    <label><input type="checkbox" value="s_3">에어팟프로</label>
    <label><input type="checkbox" value="s_3">딥디크오드퍼퓸</label>
    <label><input type="checkbox" value="s_3">케이스티파이케이스</label>
    <p><b>포장 선택</b></p>
    <label><input type="radio" name="gift" value="yes">선물 포장(+3000)</label>
    <label><input type="radio" name="gift" value="no">선물 포장 안 함</label>
  </fieldset>

• 실행 결과
  
  
  

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

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

• 기본형

  <input type="number">
   <input type="range">

• type="number" , type="range" 에서 사용할 수 있는 속성

  속성	설명
  min	필드에 입력할 수 있는 최솟값을 지정한다. 기본 최솟값은 0.
  max	필드에 입력할 수 있는 최댓값을 지정한다. 기본 최댓값은 100.
  step	숫자 간격을 지정한다. 기본값은 100.
  value	필드에 표시할 초깃값

  
  

 🧩 스핀 박스를 사용해 숫자 입력하기

• 코드

  <ul>
    <li>
      <label><input type="checkbox" value="s_3">선물용 3kg</label>
      <input type="number" min="0" max="5">개 (최대 5개)
    </li>
    <li>
      <label><input type="checkbox" value="s_5">선물용 5kg</label>
      <input type="number" min="0" max="3" value="1">개 (최대 3개)
    </li>
  </ul>

  
  
• 결과
  • 선물용 3kg 개 (최대 5개)
  • 선물용 5kg 개 (최대 3개)
  
  

 🧩 슬라이드 막대를 사용해 숫자 입력하기

• 코드

  <ul>
    <li>
      <label><input type="checkbox" value="f_3">가정용 3kg</label>
      <input type="range" min="0" max="5">개 (최대 5개)
    </li>
    <li>
      <label><input type="checkbox" value="f_5">가정용 5kg</label>
      <input type="range" min="0" max="3" value="1">개 (최대 3개)
    </li>
  </ul>

• 결과
  • 가정용 3kg 개 (최대 5개)
  • 가정용 5kg 개 (최대 3개)
  
  

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

웹 문서나 애플리케이션에 달력 넣기

• 기본형

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

• 3가지 형식의 날짜 입력하기

  <h3>날짜 지정하기</h3>
  <input type="date">
  <input type="month">
  <input type="week">

• 실행 결과

  날짜 지정하기

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

시간을 지정할 때는 type="time" 을 사용하고, 날짜와 시간을 함께 지정하려면 type="datetime" 이나 type="datetime-local" 을 사용한다.

• 기본형

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

• 2가지 형식의 시간 입력하기

  <h3>시간 지정하기</h3>
   <input type="time">
   <input type="datetime-local">

• 실행 결과

  시간 지정하기

  
  
  
  

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

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

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

• 기본형

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

  • submit 버튼을 클릭하면 입력한 내용이 서버로 넘겨진다.

  • reset 버튼을 클릭하면 폼에 입력한 내용이 모두 삭제되고 처음 상태로 되돌아간다.
    
    

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

submit 버튼과 같은 기능을 하는 이미지 버튼

• 기본형

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

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

submit 이나 reset 버튼과 같은 기능이 없고, 오직 버튼 형태만 삽입한다. 주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용한다.

• 기본형

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

🧩 버튼을 삽입해 자바스크립트 실행하기

• 코드

  <form>
    <input type="button" value="공지 창 열기" onclick="window.open('notice.html')">
  </form>

  • type="button" 을 사용해 [공지 창 열기] 라는 버튼을 만듦
  • 이 버튼을 클릭하면 자바스크립트의 window.open() 함수를 실행

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

간혹 폼에서 사진이나 문서를 첨부해야 하는 경우가 있다.
이 때, type="file" 로 지정하면 폼에 파일을 첨부할 수 있다.
type="file" 유형을 사용하면 웹 브라우저 화면에 [파일 선택]이나 [찾아보기] 버튼 등이 표시되는데, 이 버튼을 클릭하고 파일을 선택하면 파일이 첨부된다.

• 기본형

  <input type="file">

  
  

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

<히든 필드>

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

• 기본형

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

  
  
  
  

  출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석 (고경희, 이지스퍼블리싱)