본문 바로가기
프로그래밍 놀이터/Web

[HTML5] 웹 폼 컨트롤( Web form control ) - 기초, Tutorial, Sample Code

by 돼지왕 왕돼지 2012. 9. 7.
반응형



출처 : 하루 1시간 3일 만에 배우는 HTML5 

 
"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 선택>




 
도움이 되셨다면 손가락 꾸욱~ ( 로그인 필요 x )



 
반응형

댓글