INPUT TYPE 총정리

범위 입력  

---

<input type="range" min="0" step="10" id="rangeid"> <br>

Min / Max : 최소 최대 값 설정 

Step : 눈금 단위 설정 

---

 

 

파일 입력  

---

<input type="file" name="files" multiple><br>

Multiple : 파일을 한번에 여러개 입력할 수 있도록 한다. 

<input type="file" accept="image/jpg" multiple>

파일 형식을 제한하는 것도 가능하다. 

---

 

 

날짜 입력  

---

<input type="date" class="inputz"> <br>

<input type="month" class="inputz"> <br>

<input type="week" class="inputz"> <br>

<input type="time" class="inputz"> <br>

 

 

<input type="time" min="09:00" max="16:00" step="1800">

시간 값도 마찬가지로 최소 최대 범위를 지정해줄 수 있으나 JSP에서는 원활하게 돌아가지 않는 듯 하다. 

---

 

색상 입력  

---

<input type="color" class="color"><br> 

---

 

 

 

 

 

검색 리스트 방식 구현   

---

 

<input type="text" list="sample">

<datalist id="sample">

<option value="서울">서울</option>

<option value="경기">경기</option>

<option value="구기">구기</option>

</datalist>

 

 

Autocomplete="off"/ on 을 추가할 수 있으나 JSP에서는 효과가 없다. 

---

 

 

 

선택 태그 

---

<select name="a1">

 

<option value=1 selected>서울 

<option value=2> 경기도 

<option value=2> 인천광역시 

</select>

---

 

 

 

TEXT INPUT의 특별한 명령어 

---

placeholder : 미리 회색 글씨로 입력이 되어 있다. 

autofocus :  페이지 접속 시 최우선으로 선택된다. 

예)  <input type="text" placeholder="rrr" autofocus>

required : 폼의 필수 필드에 데이터가 모두 채워졌는지를 검사 input, textArea에서 사용된다. 

예)  <input type="text" required>

[