input 태그의 주요 속성

1. 자동으로 입력 커서를 갖다 놓는 autofocus 속성

페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시

 

2. 힌트를 표시하는 placeholder 속성

입력란에 적당한 힌트 내용을 표시한다.

 

3. 읽기 전용 필드를 만드는 readonly 속성

입력은 못하고 읽게만 하는 읽기 전용 필드를 만든다.

 

4. 필수 입력 필드를 지정하는 required 속성

반드시 입력해야하는 곳을 필수 필드로 만든다.

 

<form>
    <fieldset>
      <legend>배송 정보</legend>
      <ul id="shipping">
        <li>
          <label for="prod">주문 상품</label>
          <input type="text" id="prod" value="상품용 3KG" readonly>
        </li>
        <li>
          <label for="user-name">이름 </label>
          <input type="text" id="user-name" autofocus required>
        </li>
        <li>
          <label for="addr">배송 주소</label> 
          <input type="text" id="addr" required>
        </li>
        <li>
          <label for="mail">이메일</label>
          <input type="email" id="mail">
        </li>        
        <li>
          <label for="phone">연락처</label>
          <input type="tel" id="phone" placeholder="하이픈 빼고 입력" required>
        </li>
        <li>
          <label for="d-day">배송 지정</label>
          <input type="date" id="d-day"> <small>(주문일로부터 최소 3일 이후)</small>
        </li>        
      </ul>  
    </fieldset>
    <div>
      <input type="submit" value="주문하기"> 
      <input type="reset" value="취소하기">
    </div>        
  </form>

입력 안하고 주문하기 했을 때

 

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