HTML - input type

<input>tag는 그 자체보다는 다양한 속성으로 인해 화면상에 보여지는 것을 더 명확하게 해줍니다.

따라서 input type을 좀 더 자세히 다뤄보려고 합니다.

 

input type summary

---

1. <input type="text" placeholder="작성하시오">

---

2. <input type="button" value="누르시오">

---

3. <input type="checkbox">밥먹기

진짜로 체크할 수 있다.

---

4. <input type="file">

원하는 파일을 추가 할 수 있다.

 

---

5. <input type="hidden">

(hidden이라 시각적으로 제공할 자료가 없다. )

 

---

6. <input type="image" src="(파일경로)" alt="제출">

일반적인 버튼 형식 대신 이미지가 있음. 아이콘을 클릭하여 제출하는 경우에 해당.

---

7. <input type="password" placeholder="비밀번호 입력">

*기본적으로, password를 입력하면 저렇게 보임.

---

8. <input type="radio">

  <input type="radio" name="gender" value="male" > Male<br>

  <input type="radio" name="gender" value="female" checked> Female

* li tag를 사용해서 만들면 선택이 여러개 가능하며, 선택을 취소할 수는 없다. 

---

9. <input type="reset">

* 기본 value 값은 "초기화"라고 되어있으며, value값을 바꾸면 박스 안의 내용을 원하는 대로 바꿀 수 있다. 

---

10. <input type="submit">

* 기본 value값 = "제출"

---

11. <input type="color">

*기본적으로 선택되어 있는 색상이 나오는데, 그것을 클릭하면 color picker가 나온다. 원하는 색상을 선택할 수 있다.

---

12. <input type="date">

*직접 입력할 수 있고, 화살표를 클릭해서 입력할 수 있으며, 맨 우측 화살표는 달력이 나와서 달력에서 클릭하여 입력할 수도 있다.

---

13. <input type="datetime-local">

세부사항 설정도 가능하나, 디폴트값은 "년-월-일 시간"을 입력할 수 있도록 한다.

---

14. <input type="email" placeholder="이메일주소를 적어주세요.">

---

15. <input type="month">

년과 월을 직접 입력하거나 선택할 수 있다.

---

16. <input type="number">

*숫자를 직접 입력하거나, 위아래 화살표를 통해 입력할 수 있다. 또한 min / max 등의 속성을 통해 작성할 수 있는 숫자 범위를 한정할 수 있다.

---

17. <input type="range" > / <input type="range" min="5" max="10">

* min / max 등의 속성을 통해 입력할 수 있는 숫자 범위를 한정할 수 있다.

---

18. <input type="search">

---

19. <input type="tel">

*"pattern"이라는 속성을 이용하여 전화번호의 형식을 지정할 수 있다.

<input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}" required> 이렇게 범위를 지정하게되면 

지정된 형식으로 작성해야만 정보를 전달할 수 있다.

 

---

20. <input type="time">

오전 오후를 선택할 수 있으며, 직접입력하거나 화살표를 통해 입력 가능하다.

---

21. <input type="url" placeholder="url을 입력해주세요">

---

22. <input type="week">

직접 입력하거나 화살표 또는 캘린더로 입력할 수 있다.