waitedForU
[03] HTML5 Forms 본문
1. HTML5 Forms
- 파이어폭스가 지원하지 않는 기능도 있으니 크롬, 오페라 웹브러우저를 설치.
- 오페라
http://www.opera.com/browser/
- 구글 크롬
http://www.google.com/chrome/?hl=ko
1) Form Elements
- datalist : <INPUT> 요소에 "자동 완성"기능을 제공하는 데 사용
- 사용자는 입력 데이터와 같은 미리 정의 된 옵션의 드롭 다운 목록이 표시
>>>>> datalist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" method="post">
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
<p><b>Note:</b> The datalist tag is not supported in Internet Explorer 9 and earlier versions, or in Safari.</p>
</body>
</html>
- keygen : 사용자를 인증하는 안전한 방법을 제공하는 것
- 키 쌍 행태로 필드를 지정합니다.
>>>>> keygen.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="demo_keygen.jsp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
</body>
</html>
>>>> demo_keygen.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<% request.setCharacterEncoding("utf-8");
String user_name = request.getParameter("user_name");
String security = request.getParameter("security");
%>
<div>
<h1>
Input was received as
</h1>
<h1>
<%=user_name %> <br>
<%=security %>
</h1>
</div>
- output : 계산 결과를 나타냄
>>>>> output.html
<!DOCTYPE html>
<html>
<body>
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
</body>
</html>
2) Input Types
color
date : 날짜
datetime :날짜및 시간
datetime-local 날짜 및 시간
email : 메일 형식 검증
month : 월
number : 스핀
range : 슬라이드 막대로 표시하는 숫자
search : 서치를 위한 필드
time : 시간
url : URL 형식 검증
week : 주
>>>>> form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="">
Select your favorite color: <input type="color" name="favcolor"><br><br>
Birthday: <input type="date" name="bday"><br><br>
Birthday (date and time): <input type="datetime-local" name="bdaytime"><br><br>
Birthday (month and year): <input type="month" name="bdaymonth"><br><br>
E-mail: <input type="email" name="email"><br><br>
Quantity (between 1 and 5): <input type="number" name="quantity" min="1" max="5"><br><br>
Points: 0<input type="range" name="points" min="1" max="10">10<br><br>
Search Google: <input type="search" name="googlesearch"><br><br>
Select a time: <input type="time" name="usr_time"><br><br>
Add your homepage: <input type="url" name="homepage"><br><br>
Select a week: <input type="week" name="year_week"><br><br>
<input type="submit">
</form>
</body>
</html>
3) Attributes
- New attributes for <form>:
autocomplete : input 태그에 자동완성 기능
novalidate : 입력값 검증 안함
>>>>> form_attr.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="" autocomplete="on" novalidate>
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<p>Fill in and submit the form, then reload the page to see how autocomplete works.</p>
<p>Notice that autocomplete is "on" for the form, but "off" for the e-mail field.</p>
</body>
</html>
>>>>> attributes.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="demo.jsp" id="form1" method="post">
First name:<input type="text" name="fname" placeholder="First name" required autofocus><br>
비번:<input type="password" name="fname" placeholder="비밀번호 입력" required><br>
번호: <input type="number" name="points" step="3"><br>
E-mail: <input type="email" name="userid" placeholder="이메일을 입력하세요"><br>
<P>
Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31"><br>
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02"><br>
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5"><br>
</P>
Select images: <input type="file" name="img" multiple><br>
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="요청한 형식과 일치시키세요"><br>
<input type="submit">
<input type="submit" formaction="demo_admin.jsp" value="Submit as admin">
<input type="submit" formenctype="multipart/form-data"
value="Submit as Multipart/form-data">
<input type="submit" formmethod="get" formaction="demo_get.jsp"
value="Submit using get">
<input type="submit" formnovalidate value="Submit without validation">
<input type="submit" formtarget="_blank"
value="Submit to a new window">
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
<p><strong>Note:</strong> The autofocus attribute of the input tag is not supported in Internet Explorer 9 and earlier versions.</p>
<p>아래의 Last name 필드는 양식 요소를 벗어나지 만 여전히 양식의 일부.</p>
Last name: <input type="text" name="lname" form="form1"><br>
</body>
</html>
'HTML5' 카테고리의 다른 글
| [04] HTML5 Graphics (0) | 2016.05.24 |
|---|---|
| [02] Semantic Elements(의미가 있는 요소) (0) | 2016.05.24 |
| [01] HTML5 소개 (0) | 2016.05.24 |
Comments