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

4. 숫자 입력 필드를 나타내는 number, range

input 태그의 type 속성 중

number는 숫자를 조절할 수 있는 스핀 박스

range는 숫자를 조절할 수 있는 슬라이드 막대를 넣는다.

<h1>레드향 주문하기</h1>
    <form>   <!--스핀박스-->
      <fieldset>
        <legend>상품 선택</legend>
        <p><b>주문할 상품을 선택해 주세요.</b></p>
        <ul>
            <li>
                <label><input type="checkbox" value="s_3">선물용 3kg</label>
                <input type="number" min="0" max="5" value="1">개 (최대 5개)
            </li>
            <li>
                <label><input type="checkbox" value="s_5">선물용 5kg</label>
                <input type="number" min="0" max="3" value="1">개 (최대 3개)
            </li>
        </ul>
      </fieldset>
    </form>

    <form>   <!--슬라이드 막대-->
        <fieldset>
            <legend>상품 선택</legend>
            <p><b>주문할 상품을 선택해주세요</b></p>
            <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">개 최대(3개)
                </li>
            </ul>
        </fieldset>
    </form>

type 속성의 number, range

 

5. 날짜 입력을 나타내는 date, month, week

input 태그의 type 속성 중

date는 사용자 지역을 기준으로 연, 월, 일

month는 연, 월

week는 연, 주를 넣는다.

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

type 속성의 date, month, week

 

6. 시간 입력을 나타내는 time, datetime, datetime-local

input 태그의 type 속성 중

time은 사용자 지역을 기준으로 시, 분, 초, 분할 초

datetime은 국제 표준시로 설정된 날짜와 연, 월, 일, 시, 분, 초, 분할 초

datetime-local은 사용자가 있는 지역 기준 날짜와 연, 월, 일, 시, 분, 초, 분할 초를 넣는다.

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

type 속성의 time, datetime, datetime-local

 

7. 전송과 리셋 버튼의 submit, reset

input 태그의 type 속성 중

submit은 전송 버튼

reset은 리셋 버튼을 넣는다.

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

<div id="container">
      <form>
        <fieldset>
          <legend>배송 정보</legend>
          <ul id="shipping">
            <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>
            <li>
              <label for="d-day">배송 지정</label>
              <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
            </li>     
            <li>
              <label for="memo">메모</label>
              <textarea id="memo" cols="40" rows="4"></textarea>
            </li>   
          </ul>  
        </fieldset>
        <div>
          <input type="submit" value="주문하기">
          <input type="reset" value="취소하기">
        </div>        
      </form>
    </div>

type 속성의 submit, reset

 

Do it! HTML+CSS+자바스크립트 웹 표준의 정석 교재를 참고하여 작성했다.