HTML5 Tag-[사용자와의 커뮤니케이션을 위한 태그 4] <form> 사용자 입력 속성

속성	설명
placeholder	입력 내용 칸에 힌트 제공
required	required 적용 요소에 내용이 비어 있을 경우 경고 메시지 표시
autocomplete	입력 요소에 자동완성 기능 여부 설정 (on/off)
pattern	지정한 문자패턴과 입력된 내용의 일치 여부를 판단
multiple	이메일을 ','로 여러개 / 파일 업로드시 동시 선택할 수 있도록 해주는 속성
disabled	요소를 비활성화 상태로 만들어 주는 속성
readonly	입력된 내용을 수정할 수 없도록 만들어 주는 속성

 

   <form action="#" method="post">
       <fieldset>
           <legend>placeholder 필드에 입력형식 힌트주기</legend>
           <p><label for="id">아이디</label>
           <input type="text" id="id" placeholder="아이디 입력"></p>
           <p><label for="pw">비밀번호</label>
           <input type="password" id="pw" placeholder="비밀번호 입력"></p>
       </fieldset>

       <fieldset>
           <legend>required 필수입력 유효성 검사</legend>
           <p><label for="order_id">주문자 정보</label>
           <input type="text" id="order_id" required></p>
           <p><label for="order_home">배송지 정보</label>
           <input type="text" id="order_home" required></p>
           <p><input type="submit" value="확인"></p>
       </fieldset>

       <fieldset>
           <legend>autocomplete 자동완성 기능</legend>
           <p><label for="tel">전화번호</label>
           <input type="tel" id="tel" autocomplete="on"></p>
           <p><label for="email">이메일</label>
           <input type="email" id="email" autocomplete="on"></p>
           <p><input type="submit" value="확인"></p>
       </fieldset>

       <fieldset> 
           <legend>pattern 정규식 속성</legend>
           <p><label for="hp">휴대폰 번호</label>
           <input type="text" id="hp" pattern="\d{3}-\d{3,4}-\d{4}" title="휴대폰 번호는 숫자 3자리-숫자 3~4자리-숫자 4자리 입력"></p>
           <p><input type="submit" value="확인"></p>
       </fieldset>

         <fieldset>
             <legend>multiple 다중파일 선택</legend>
             <p><label for="email_">이메일</label>
             <input type="email" id="email_" multiple></p>
             <p><label for="file">파일 업로드</label>
             <input type="file" id="file" multiple></p>
         </fieldset>

         <fieldset>
             <legend>disabled 비활성화 속성, readonly 수정 불가능 속성</legend>
             <p>
                 <label for="code">인증번호</label>
                 <input type="text" id="code">
                 <input type="button" value="이전">
                 <input type="button" value="다음" disabled>
             </p>
             <p>
                 <label for="book">선택한 책</label>
                 <input type="text" id="book" value="반응형 웹" readonly>
                 <label for="quantity">수량</label>
                 <input type="number" id="quantity" min="1" value="1">
             </p>
         </fieldset>
     </form>

placeholder 필드에 입력형식 힌트주기

아이디

비밀번호

required 필수입력 유효성 검사

주문자 정보

배송지 정보

autocomplete 자동완성 기능

전화번호

이메일

pattern 정규식 속성

휴대폰 번호

multiple 다중파일 선택

이메일

파일 업로드

disabled 비활성화 속성, readonly 수정 불가능 속성

인증번호

선택한 책 수량