零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>

<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>

<summary>details元素的標題</summary>
<span>details元素的內容</span>

</details>
dialog類似於對話

<dialog>
    <dt>what</dt>
    <dd>what毛</dd>
    <dt>how are your</dt>
    <dd>how 毛</dd>
</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>

<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"/>

以下兼容性問題較大

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.

从上面的截图可以看到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>

感谢参考来源：http://tid.tenpay.com/?p=3592

零HTML5筆記 | 標籤 | 表單

最新文章

最近回复

分类

归档

其它