"can I use.." 에 따르면 현재 Opera 와 iOS Safari만 HTML5 의 form 을 모두 완벽히 지원하고 있습니다. 의외로 메인 브라우저의 차기 바전에서도 완벽히 지원하는 것은 없군요. 그래도 partial support 를 하는 것이 어느 정도는 사용할 수 있을 것으로 보입니다. 여기서도 독고다이를 추구하는 IE 는 현재 버전 9.0 에서 전혀 지원하고 있지 않습니다. 모바일 브라우저들도 iOS Safari 외에는 아예 지원을 안 하고 있군요.
웹 컴트롤 시작하기 ( form type & data form )
- button
- checkbox : 미리 정의된 리스트 중 0 개 이상의 값
- color : 8비트 sRGB
- date : 시간 영역이 없는 날짜 ( 년, 월, 일 )
- datetime : UTC 시간 영역을 포함한 날짜와 시간( 년, 월, 일, 시, 분, 초, 1초 미만 단위 )
- datetime-local : 시간 영역이 없는 날짜와 시간( 년, 월, 일, 시, 분, 초, 1초 미만 단위 )
- email : 이메일 주소 또는 이메일 주소 리스트
- file : MINE 타입의 0개 이상의 파일과 파일 명( 선택적 )
- hidden : 임의 문자열
- image : 마지막에 선택되어 폼을 서버로 제출하고 특정 이미지의 크기와 관련 된 좌표
- month : 시간 영역 없이 년과 월로 구성된 날짜
- number : 숫자 값
- password : 행 바꿈 없는 문자열 ( 민감한 정보 )
- radio : 열거된 값
- range : 정확한 값을 요구하지 않는 숫자 값
- reset
- search : 행 바꿈 없는 문자열
- submit : 마지막에 선택되어 폼을 서버로 제출하는 열거된 값
- tel : 행 바꿈 없는 텍스트
- text : 행 바꿈 없는 텍스트
- time : 시간 영역 없는 시간( 시, 분, 초, 1초 미만 단위 )
- url : 절대 URI
- week : 1년 중 주(week)로 이루어진 날짜와 시간 영역 없는 주(week) 번호
웹 폼 예제 시작
<?DOCTYPE html>
<html>
<head>
<title>
Web Form Example
</title>
</head>
<body>
<h1>Web Form Example</h1>
<form method="post" action="webform.php">
<table border="1" cellpadding="5">
<tr>
<td>Default</td>
<td><input name="name" placeholder="Enter your nickname" autofocus></td>
<!-- placeholder is hint text,
autofocus gives focus on this form when the web page is loaded.
default type is text -->
</tr>
<tr>
<td>URL</td>
<td><input name="email" type="url"></td>
</tr>
<tr>
<td>Email</td>
<td><input name="email" type="email"></td>
</tr>
<tr>
<td>Range</td>
<td><input name="range" type="range" min="0" max="100" step="5" value="40"></td>
</tr>
<tr>
<td>Number</td>
<td><input name="number" type="number" min="0" max="100" step="5" value="40"></td>
</tr>
<tr>
<td>Date</td>
<td><input name="date" type="date"></td>
</tr>
<tr>
<td>Week</td>
<td><input name="week" type="week"></td>
</tr>
<tr>
<td>Month</td>
<td><input name="month" type="month"></td>
</tr>
<tr>
<td>Time</td>
<td><input name="time" type="time"></td>
</tr>
<tr>
<td>DateTime</td>
<td><input name="datetime" type="datetime"></td>
</tr>
<tr>
<td>Local Datetime</td>
<td><input name="datetimelocal" type="datetime-local"></td>
</tr>
<tr>
<td>Color</td>
<td><input name="color" type="color"></td>
</tr>
<tr>
<td>Search Query</td>
<td><input name="query" type="search"></td>
</tr>
</table>
<br>
<input type="submit" value="Submit">
</form>
</body>
</html>
<결과1 Date 선택>
<결과2 Color 선택>
web_form.html'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [HTML5] 브라우저 히스토리 다루기 ( Browser History ) - 기초, Tutorial, Sample code. (0) | 2012.09.08 |
|---|---|
| [HTML5] 인라인 편집 - 기초, Tutorial, Sample Code (3) | 2012.09.08 |
| [HTML5] 드래그 앤 드롭 ( Drag and Drop ) - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
| [HTML5] Canvas 요소로 그림 그리기 - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
| [HTML5] HTML5 개요 ( 기본 ) (2) | 2012.09.05 |
댓글