7) HTML5 입력 양식 예제
input 요소는 텍스트 입력 뿐 아니라, 전송 버튼, 라디오 버튼, 체크 박스 등 여러 가지로 표현될 수 있다.
input 요소는 주로 다음과 같이 사용한다
<input type="text" name="name" />
input 요소는 스스로 닫는 태그이기 때문에 마지막을 '/'로 닫아 주어야 한다.
input 요소의 type 속성을 통해서 이 인풋의 형태 타입을 결정 한다.
위 소스 예시는 텍스트 인풋을 나타낸다.
input 요소의 name 속성은 데이터가 서버로 전송될 때 할당되는 변수의 이름이다.
다음은 input 요소의 type 속성과 속성값이다.
text : 기본값. 한 줄의 텍스트 입력 칸을 만듦(기본 너비 문자는 20)
password : text 속성과 같지만, 문자를 숨겨서 표시(별표 처럼)
checkbox : 체크박스를 만듦(선택 항목 중 여러개 선택 가능)
radio : 라디오 버튼(선택 항목 중 1가지만 선택 가능)
button : 누름 버튼
submit : 전송 버튼
reset : 재설정 버튼
file : 파일 선택 창을 만듦.
hidden : 사용자에게 보이지 않는 숨김 창을 만듦
image : 이미지로 된 전송 버튼을 만듦 (src 속성으로 이미지 url 지정)
--------- ↓↓ html5에 새로 추가된 속성값 ↓↓ ---------
color : 색상 선택 창을 만듦
date : 날짜 입력 창을 만듦(년, 월, 일)
datetime : 날짜 시간 창을 만듦(년, 월, 일, 시, 분, 초, 초의 분할)표준 시간
datetime-local : 날짜 시간 창을 만듦((년, 월, 일, 시, 분, 초, 초의 분할)표준시간 없음
email : email 주소 창을 만듦
month : 달과 년 창을 만듦(표준 시간 없음)
number : 숫자 입력을 위한 창을 만듦(숫자 제한을 둘 수도 있음)(max-최대값 min-최소값 step 허락하는 숫자 간격 value 기본값)
range : 정확한 값이 중요하지 않는 숫자를 입력하는 창을 만듦(슬라이더 장치 처럼)
search : 검색 창을 만듦
tel : 전화 번호 입력 창을 만듦
time : 시간 입력 창을 만듦(표준 시간 없음)
url : 주소 입력 창
week : 주와 년 입력 창 (표준 시간 없음)
예제를 연습해 봅시다
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title> 폼 </title> </head> <body> <form> <table> <tr> <td> 이름 </td> <td> <input type="text" name="name"> </td> </tr> <tr> <td> 이메일 </td> <td> <input type="email" name="email"> </td> </tr> <tr> <td> 홈페이지 </td> <td> <input type="url" name="homepage"> </td> </tr> <tr> <td> 생년월일 </td> <td><input type="date" name="birthday"> </td> </tr> <tr> <td> 대학 졸업 년도 </td> <td> <input type="number" name="graduate" min="1990" max="2020"></td> </tr> <tr> <td> 영어 평가 등급 </td> <td> <input type="range" min="1" max="10" value="5"> </td> </tr> <tr> <td> 좋아하는 색 </td> <td> <input type="color" name="color"> </td> </tr> <tr> <td> <input type="submit"> </td> </tr> </table> </form> </body> </html>
