HTML5 기본 튜토리얼

HTML5 API

HTML5 미디어

HTML5 그래픽

HTML5 폼 속성 HTML5 입력 유형

HTML5 표单 요소

HTML5표单과 관련된 여러 요소와 속성을 가지고 있습니다.

HTML5 새로운 표单 요소

HTML5 다음과 같은 새로운 표单 요소가 있습니다:

<datalist>
<keygen>
<output>

주의:모든 브라우저가 HTML을 지원하지 않습니다.5 새로운 표单 요소입니다. 하지만 브라우저가 표单 속성을 지원하지 않더라도, 일반 표单 요소로 표시할 수 있습니다.

HTML5 <datalist> 요소

<datalist> 요소는 입력 영역의 옵션 목록을 정의합니다.

form 또는 input 영역이 자동 완성 기능을 가지도록 정의하는 <datalist> 속성입니다. 사용자가 자동 완성 영역에서 입력을 시작할 때, 브라우저는 해당 영역에서 입력한 옵션을 표시해야 합니다.

<input> 요소의 목록 속성이 <datalist> 요소와 연결됩니다.

온라인 예제

<input> 요소는 <datalist> 사전 정의 값을 사용합니다:

示例

<!DOCTYPE　html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
　　　　
<form action="demo-form.php"　method="get">
<input　list="languages"　name="language">
<datalist　id="languages">
　　<option　value="C++">
　　<option　value="PHP">
　　<option　value="Golang">
　　<option　value="Python">
　　<option　value="Ruby">
</datalist>
<input　type="submit">
</form>
<p><strong>注意:</strong>Internet Explorer　9（오래된 IE 버전），Safari는 datalist 태그를 지원하지 않습니다.</p>
</body>
</html>

테스트를 보세요.‹/›

HTML5 <keygen> 요소

<keygen> 요소의 역할은 사용자를 신뢰할 수 있는 방법을 제공하는 것입니다.

<keygen> 태그는 양식에 사용되는 키 쌍 생성기 필드를 정의합니다.

양식을 제출할 때, 두 개의 키가 생성됩니다. 하나는 개인 키이고, 하나는 공개 키입니다.

개인 키(private key)는 클라이언트에 저장되며, 공개 키(public key)는 서버로 전송됩니다. 공개 키는 이후에 클라이언트 인증서(client certificate)를 검증하는 데 사용됩니다.

온라인 예제

keygen 필드가 포함된 양식:

示例

<!DOCTYPE　html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<body>
<form　action="demo_form.php"　method="get">
　　사용자 이름:　<input　type="text"　name="username">
　　암호화:　<keygen　name="security_keygen">
　　<input　type="submit">
</form>
<p><strong>注意:</strong>Internet Explorer는 keygen 태그를 지원하지 않습니다.</p>
</body>
</html>

테스트를 보세요.‹/›

HTML5 <output> 요소

<output> 요소는 다양한 유형의 출력에 사용됩니다. 예를 들어, 계산이나 스크립트 출력:

온라인 예제

계산 결과를 <output> 요소에 표시하십시오:

示例

<!DOCTYPE　html>
<html>
<head>　
<meta charset="utf-8">　
<title>기본 튜토리얼(oldtoolbag.com)</title>　
</head>
<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>
<p><strong>注意:</strong>　　Internet Explorer　不支持　output　标签。</p>
</body>
</html>

테스트를 보세요.‹/›

Html5中的智能表单

示例

!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Html5中的智能表单　oldtoolbag.com</title>
</head>
<body>
<form action="demo-form.php">
　　　　　　　　<fieldset>
　　　　　　　　　　　　<legend>Html5中的智能表单</legend>
　　　　　　　　　　　　<label for="email">
　　　　　　　　　　　　　　　　email：<input type="email" name="email" id="email"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="tel">
　　　　　　　　　　　　　　　　tel:<input type="tel" name="tel" id="tel"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="url">
　　　　　　　　　　　　　　　　url:<input type="url" name="" id="url"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="number">
　　　　　　　　　　　　　　　　number:<input type="number" name="" id="number" step="3"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="search">
　　　　　　　　　　　　　　　　search:<input type="search" name="" id="search"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="range">
　　　　　　　　　　　　　　　　range:<input type="range" name="" id="range" value="60" min="0" max="100"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="color">
　　　　　　　　　　　　　　　　color:<input type="color" name="" id="color"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="time">
　　　　　　　　　　　　　　　　time:<input type="time" name="" id="time"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="date">
　　　　　　　　　　　　　　　　date:<input type="date" name="" id="date"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="month">
　　　　　　　　　　　　　　　　month:<input type="month" name="" id="month"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<label for="week">
　　　　　　　　　　　　　　　　week:<input type="week" name="" id="week"/>
　　　　　　　　　　　　</label>
　　　　　　　　　　　　<input type="submit" value="제출"/>
　　　　　　　　</fieldset>
　　　　</form>
</body>
</html>

테스트를 보세요.‹/›

HTML5 새 폼 요소

태그	설명
<datalist>	<input> 태그는 선택 목록을 정의합니다. 이 태그를 사용하여 입력 요소의 가능한 값을 정의하십시오.
<keygen>	<keygen> 태그는 폼의 키对人体 생성기 필드를 정의합니다.
<output>	<output> 태그는 스크립트의 출력과 같은 다른 유형의 출력을 정의합니다.

HTML5 폼 속성 HTML5 입력 유형