零HTML5筆記 | 標籤 | 表單
header用在页面头部
nav导航
footer页面底部
hgroup标题给合
section版块，区块
article结构完整独立内容部分，可以呈现一个帖子或文章等
aside和主体相关的附属信息，一般用于与article相关的或侧边
address定义作者信息，联系方式
time定義時間
帶功能性：
datalist表示input里可能出现的值，即提示列表，input list = 'valList' --> datalist id= 'valList' 相對應
<input type="text" list="valList"/>
<datalist id="valList">
<!--表示input里可能出现的值，即提示列表 -->
<option value="javascript">javascript</option>
<option value="html5">html5</option>
<option value="css3">css3</option>
</datalist><input type="text" list="valList" class='input-def'/>
<datalist id="valList">
<option value="javascript">javascript</option>
<option value="html5">html5</option>
<option value="css3">css3</option></datalist>
details用于描述文档或文档某个部分的细节；，该元素用于摘录引用等，应该与页面主要内容分开
下箭頭說明： open表示打開狀態
<details open>
<summary>details元素的標題</summary>
<p>details元素的內容</p>
</details><details>
<summary>details元素的標題</summary>
<span>details元素的內容</span></details>
dialog類似於對話
<dialog>
<dt>what</dt>
<dd>what毛</dd>
<dt>how are your</dt>
<dd>how 毛</dd>
</dialog><dialog>
<dt>what:</dt>
<dd>what毛</dd>
<dt>how are your</dt>
<dd>how 毛</dd></dialog>
mark标记，加默认黄色背景
<mark>
标记，加默认黄色背景</mark>
<form action="http://baidu.com" method="get">
用户：<input type="text" name = 'username'/>
公钥：
<keygen name="security" />
<input type="submit" value=""/>
</form>keygen name="security"公钥
<form action="http://baidu.com"; method="get">
用户：<input type="text" name = 'username'/>
公钥：
<keygen name="security" />
<input type="submit" value=""/></form>
progress進度條
<progress max="100" value="70">
<span>80</span>% <!--向下兼容-->
</progress><progress max="100" value="70">
<span>80</span>% <!--向下兼容--></progress>
Input表單 type = ??
email 只允許輸入email類型
tel 移動端切換數字健盤
url 只允許輸入url類型
search input 刪除輸入按鈕
range
<input type="range" step="2" min="0" max="100" value="80"/><input type="range" name="" id="" step="2" min="0" max="100" value="80"/>
以下兼容性問題較大
color
datetime
datetime-local
time
date
week
month
新增屬性
placeholder placeholder = '請輸入四-六個字'
autocomplete autocomplete = 'off' 關閉自動提示
autofocus 打開顯示焦點
required 必須輸入內容
<input type="text" autofocus/> 與 input.focus();效果一致
<input type="text" required/>pattern 正則驗證，有安全問題
formaction 臨時提交
formnovalidate 關閉驗證
<form action="http://badiu.com" > <!--正常提交至baidu.com-->
<input type="password" name="" id=""/>
<input type="text" pattern="\d{1,5}"/> <!-- 正則 有安全隱患 -->
<input type="submit" value="提交" />
<input type="submit" value="臨時保存提交" formaction="http://163.com" formnovalidate/>
<!--臨時提交至163.com,所以需關閉驗證-->
</form>兼容h5标签，在头部插入：
<script>
document.createElement('elmok')
document.createElement('header')
document.createElement('article')
document.createElement('aside')
document.createElement('section')
document.createElement('footer')
</script>elmok,header.....{ display:block; }當然，也可使用google小插件：http://html5shiv.googlecode.com/svn/trunk/html5.js
驗證表單
- validity意思：正確，合法的，是一個对象，通过下面的valid[屬性] 可以查看验证是否通过，如果八种验证都通过[即下面的都返回false]，則valid = true，一种验证失败則valid = false
- txt.addEventListener('invalid',fnv,false)
- ev.preventDefault()
- valueMissing: 输入值为空时
- typeMismatch: 控件值与预期类型不匹配
- patternMismatch: 输入值不满足pattern正则
- tooLong: 超过maxLength最大限制
- rangeUnderflow: 验证的range最小值
- rangeOverflow: 验证的range最大值
- stepMismatch: 验证range的当前值是否符合min、max及step的规则
- customError 不符合自定义验证
- setCustomValidity(); 自定义验证
</li>
<li>invalid事件：验证反馈 txt.addEventListener('invalid',fnv,false)- 阻止默认验证: ev.preventDefault()
</li>
<li>formnovalidate属性：关闭验证</li>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单的验证反馈</title>
</head>
<body>
<form>
<input type="text" required id="text" pattern="\d{1,5}" maxlength="5">
<input type="submit">
</form>
<script>
var txt = document.getElementById('text');
txt.addEventListener('invalid', fn, false);
function fn(){
// alert(this.validity);
// alert('若輸入無效，即受input內限制條件，返回false： '+this.validity.valid)
// alert(this.validity.valueMissing);
// alert(this.validity.typeMismatch);
// alert(this.validity.patternMismatch);
// alert(this.validity.tooLong);
ev.preventDefault();
}
觸發驗證條件時返回true,當下面所有都返回false時[即不觸發驗證條件通過]，valid返回true
//valueMissing: 当输入值为空时，返回true
//typeMismatch: 当输入类型和要求的类型不一致时，返回true
//patternMismatch: 当输入内容和预期的正则是不匹配时，返回true
//tooLong: 当输入内容的长度超出了maxlength的限制，返回true
</script>
</body>
</html>完整自定義驗證1：
<form action="">
<input type="txt" id="text"/>
<input type="submit" value="sub"/>
</form>
<script>
var text = document.getElementById('txt')
txt.oninput = function () {
if(this.value == "講粗口"){
this.setCustomValidity('請唔好講粗口!')
}
else{
this.setCustomValidity('') //非常重要！取消自定义
}
}
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>自定义错误信息示例</title>
<script type="text/javascript">
var check = function() {
var passwd1 = document.forms['testForm'].passwd1;
var passwd2 = document.forms['testForm'].passwd2;
if(passwd1.value != passwd2.value) {
passwd2.setCustomValidity("密码不一致！");
return false;
} else {
passwd2.setCustomValidity("");
}
var email = document.forms['testForm'].email1;
if(!email1.checkValidity()) {
email1.setCustomValidity("请输入正确的E-mail地址！");
return false;
}
return true;
}
</script>
</head>
<body>
<form id="testForm" name="testForm" onsubmit="return check();">
<label for="pass1">密码:</label><input type="password" name="passwd1"/><br/>
<label for="pass2">确认密码:</label><input type="password" name="passwd2"/><br/>
<label for="email">E-mail:</label><input type="email" name="email1"/><br/>
<button type="submit">提交</button>
</form>
</body>
</html>明确一点：正常提交条件：
patternMismatch
valueMissing
rangeOverflow
rangeUnderflow
stepMismatch
tooLoog
typeMismatch
以上属性接口全部为false时，valid才返回true,表明可正常提交
只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。
查看属接口：console.dir(document.querySelector('input'))
See the Pen wKKMQx by elmok (@elmok) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
从上面的截图可以看到validationMessage没清空，valueMissing、patternMismatch都已经验证通了。
document.getElementById('t2').querySelector('input').setCustomValidity('請輸入4位數字代碼')
//单纯这样写，即使写对条件，因为提示内容validationMessage未清空，也会导致验证不过;
只有当validity接口下的属性（customError除外）都为false并且validationMessage为空时才算验证通过。优化后：
<!DOCTYPE html>
<html>
<head>
<mata charset="utf-8">
<title>form test</title>
</head>
<body>
<form name="test" action="." method="post">
<input type="text" required pattern="^\d{4}$" oninput="out(this)" placeholder="请输入代码" >
<button type="submit">Check</button>
</form>
<script type="text/javascript">
function out(i){
var v = i.validity;
if(true === v.valueMessing){
i.setCustomValidity("请填写些字段");
}else{
if(true === v.patternMismatch){
i.setCustomValidity("请输入4位数字的代码");
}else{
i.setCustomValidity("");
}
}
}
</script>
</body>
</html>