입력 양식 작성하기 3 - 사용자 입력을 위한 input 태그 2 : 날짜, 시간, 전송 등 필요한 요소

이어서 input 태그의 속성에 대해서 학습해볼 것이다. 분량이 많아서 두 개의 포스트로 나누어서 작성하고 있다. 여기서부터 새로운 강의 학습도 이어지고 있다. 날짜와 시간 등에 대해서 다루고 있는데 수업 시간에도 이 부분은 잠깐 소개만 해서 학습이 잘 되지는 못했다.

책을 통해 자세한 내용을 학습해볼 것이다.

---

 

 

 

 

 

 

 

 

3. 숫자 입력 필드를 나타내는 type = "number", type = "range"

number는 조금 전에도 보았듯이 스핀 박스가 나타나며 숫자를 선택할 수 있고, range는 슬라이드 막대를 움직여 선택하게 된다.

 

<input type = "number">
<input type = "range">

 

 

 

스핀 박스를 사용해 숫자 입력하기

 

 

스핀이나 막대를 최대 5개 혹은 3개까지 선택하면 더이상 표시가 되지 않는다.

---

 

 

 

4. 날짜 입력을 나타내는 type = "date", type = "month", type = "week"

 

 

3가지 형식의 날짜 입력하기

 

 

첫번째 type

 

 

두번째 type

 

 

세번째 type

---

 

♠ 브라우저별로 지원하는 형식 확인하는 방법 : caniuse.com

이 사이트를 방문하면 브라우저별로 지원하는 형식을 확인할 수 있다.

 

 

 

목록별로 찾거나 검색할 수 있다. 빨간색은 지원하지 않는 것, 초록색은 지원하는 것, 갈색은 부분적으로 지원하는 것이다.

---

 

 

5. 시간 입력을 나타내는 type = "time", type = "datetime", type = "datetime-local"

 

 

2가지 형식의 시간 입력하기

 

 

 

 

날짜의 범위 제한하여 입력하기

---

 

 

 

6. 전송, 리셋 버튼을 나타내는 type = "submit", type = "reset"

submit은 폼에 입력한 정보를 서버로 전송한다. 이 버튼으로 전송된 정보는 <form> 태그의 action 속성에서 지정한 폼 처리 프로그램에 넘겨진다.

reset 버튼은 <input> 요소에 입력된 모든 정보를 재설정해서 사용자가 입력한 내용을 모두 지우는 역할을 한다.

 

<input type = "submit | reset" value = "버튼에 표시할 내용">

 

서버로 넘겨지면 <form> 태그에 연결된 order.php에서 처리된다.

 

전송과 리셋 버튼 추가하기

 

 

 

---

 

 

 

7. 이미지 버튼을 나타내는 type = "image"

<input type = "image" src = "이미지 경로" alt = "대체 텍스트">

 

이미지 버튼 추가하기

 

 

이미지의 버튼이 검은색으로 추가되었다.

 

---

 

 

 

8. 기본 버튼을 나타내는 type = "button"

submit이나 reset 버튼과 같은 기능은 없고 오직 버튼 형태만 삽입한다. 주로 버튼을 클릭해서 자바스크립트를 실행할 때 사용한다.

 

<input type = "button" value = "버튼에 표시할 내용">

 

버튼을 삽입해 자바스크립트 실행하기

 

 

공지 창을 클릭하면 이와 같은 이미지가 뜬다. 이럴 때 사용하는 버튼인 것 같다.

---

 

 

 

9. 파일을 첨부할 때 사용하는 type = "file"

웹 브라우저 화면에 파일 선택이나 찾아보기 버튼 등이 표시된다. 이 버튼을 클릭하고 파일을 선택하면 파일이 첨부된다.

 

<input type = "file">

 

파일 첨부 버튼 추가하기

 

---

 

 

 

 

10. 히든 필드 만들 때 사용하는 type = "hidden"

화면의 폼에는 보이지 않지만 사용자가 입력을 마치면 폼과 함께 서버로 전송되는 요소이다. 사용자에게 굳이 보여 줄 필요는 없지만 관리자가 알아야 하는 정보는 히든 필드로 입력한다.

 

<input type = "hidden" name = "이름" value = "서버로 넘길 값">

 

 

 

아이디와 비밀번호를 입력하는 곳에 hidden 이라 표시된 부분이 보인다.

 

 

히든 필드를 사용해 서버로 정보 보내기

 

---

 

 

학습을 마치고

 

이렇게 긴 시간에 걸쳐 2번째 소단원도 학습을 마쳤다. 폼을 작성하는 데도 이렇게 많은 속성들이 들어있음을 알게 되었다. 다음 포스트에서는 input 태그의 주요 속성에 대해서 다른 부분을 학습해볼 것이다.