HTML5中常用表單整理

weixin_34413065發表於2017-03-04
HTML

在整理表單元素之前，首先要搞清楚表單都是幹什麼用的，用在哪裡？為什麼要用表單...

  • HTML 表單用於蒐集不同型別的使用者輸入資訊。
  • 表單元素指的是不同型別的 input 元素、核取方塊、單選按鈕、提交按鈕等等；
  • 當需要將資料提交至後臺（伺服器端）處理時，就可能需要通過部分表單的功能進行提交；

那就通過下文帶大家初步進行一個瞭解（內含小Demo），可以照著敲寫一番~

HTML中傳統表單(常用)

  • from；//定義表單，所有表單的起點，from標籤中有以下常用屬性
    • action 屬性：定義在提交表單時執行的動作。
    • Method 屬性 :method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）
  • Name 屬性:如果要正確地被提交，每個輸入欄位必須設定一個 name 屬性。
  • input元素: input是最重要的表單元素，它有很多形態，根據不同的 type 屬性。
    • text , radio , checkbox , button , submit , reset , file , password , hidden... ;
  • label:標記標籤，有點類似於span標籤；
  • 下文會主要介紹input元素中常用的type屬性及涉及的一些相關知識點：

1、 submit按鈕有預設行為,如果我們不想使用跳轉這樣的行為需要阻止它的預設行為，同樣的還有reset...
解決方案：

<from action="1.html">
    <input type="submit" value="點我啊" id="submit">
</from>
<script>
    var submit = document.getElementById('submit');
    submit.onclick = function (e) {
        e = e ||window.event;
        e.preventDefault ?e.preventDefault():e.returnValue = false;
    }
</script>

2、 input中的事件 ：
onblur ：‘ 失去焦點 ’；
onfocus ：‘ 獲取焦點 ’ ；
onchange ：‘ 內容改變 ’；
onclick ： ‘ 點選 ’；
onkeydown ： ‘ 鍵盤按下 ’ ；
onkeyup ： ‘ 鍵盤抬起 ’；
onkeypress ： ‘ 鍵盤長按 ’；
autofocus ： 自動獲取游標；

3 、 單選框 radio：

<!--實現點選男返回0，點選女返回1，未知返回2；-->
<input type="radio" name="sex" id="sexMan" value="0" checked/><label for="sexMan">男</label>
<input type="radio" name="sex" id="sexWoman" value="1"/><label for="sexWoman">女</label>
<input type="radio" name="sex" id="nosex" value="2"/><label for="nosex">未知</label>
<input type="submit" id="submit" value="點我啊"/>
<script>
    var submit = document.getElementById('submit');
    submit.onclick = function (e) {
        e = e || window.event;
        e.preventDefault ? e.preventDefault() : e.returnValue = false;
        //->性別的VALUE我們一般使用數字來代表男女，因為數字比漢字佔用的記憶體小，也算是一個效能優化吧
        var sexList = document.getElementsByName('sex'),
            sexV = 0;
        for (var i = 0, len = sexList.length; i < len; i++) {
            var sexItem = sexList[i];
            if (sexItem.checked) {
                sexV = sexItem.value;
                break;
            }
        }
        console.log(sexV);
    }
</script>

4、 多選框 checkbox

<!--實現全選反選功能和點選提交按鈕，實現在控制檯輸出所選內容功能-->
<input type="button" value="全選" id="checkAll"/>
<input type="button" value="反選" id="checkConvert"/>
<input type="checkbox" name="hobby" value="吃飯" id="hobby_eat"/><label for="hobby_eat">吃飯</label>
<input type="checkbox" name="hobby" value="睡覺" id="hobby_sleep"/><label for="hobby_sleep">睡覺</label>
<input type="checkbox" name="hobby" value="打豆豆" id="hobby_playbean"/><label for="hobby_playbean">打豆豆</label>
<input type="submit" id="submit" value="點我啊!"/>
<script>
    var checkAll = document.getElementById('checkAll'),
            checkConvert = document.getElementById('checkConvert');
    var hobbyList = document.getElementsByName('hobby'),
            submit = document.getElementById('submit');
    checkAll.onclick = function () {
        for (var i = 0, len = hobbyList.length; i < len; i++) {
            hobbyList[i].checked = true;
        }
    };
    checkConvert.onclick = function () {
        for (var i = 0, len = hobbyList.length; i < len; i++) {
            var bobbyItem = hobbyList[i];
            //bobbyItem.checked ? bobbyItem.checked = false : bobbyItem.checked = true;
            bobbyItem.checked = !bobbyItem.checked;
        }
    };
    submit.onclick = function () {
        var ary = [];
        for (var i = 0, len = hobbyList.length; i < len; i++) {
            var hobbyItem = hobbyList[i];
            if (hobbyItem.checked) {
                ary.push(hobbyItem.value);
            }
        }
        console.log(ary.join('|'));
    }
</script>

5 、hidden ：代表一個 HTML 表單中的某個隱藏輸入域

<!-- 實現點選提交後控制檯輸出hidden中value所儲存的值-->
<input type="hidden" value="哈哈哈" id="tempInp"/>
<input type="submit" id="submit" value="點我啊!"/>
<script>
    //->我們在頁面中需要獲取和儲存一些資訊，但是這些資訊還不想讓使用者看見，可以使用隱藏的文字框來處理，但是現在一般都不用了
    var submit = document.getElementById('submit'),
            tempInp = document.getElementById('tempInp');
    submit.onclick = function () {
        console.log(tempInp.value);
    }
</script>

6、文字域

<textarea name="" id="" style="width: 300px;height: 150px; resize: none;">
    <!--resize：none 禁止文字域的手動縮放-->
</textarea>
<!--http://ueditor.baidu.com/website/ ueditor百度編輯器(富文字編輯器) 他們的編輯區域不是使用文字域，而是使用contenteditable="true"設定一個非表單元素也能編輯-->

HTML中新表單

1、 HTML5中新增加的表單元素

  • input: serach , url , eamil , tel , number , range , color , date , time
  • progress : 進度條 ；
  • datalist : 二級下拉框；

ps ：新增加的表單元素在IE6~8下不相容，而且沒辦法處理相容(HTML5.MIN.JS是不能處理 表單這個相容的);

2 、 progress :標籤標示任務的進度（程式）。

<!-- 末尾新增了定時器實現動態效果 -->
<progress max="100" value="0" id="progress"></progress>
<script>
    var count = 0;
    var timer = window.setInterval(function () {
        if (count >= 100) {
            window.clearInterval(timer);
            progress.value = 100;
            return;
        }
        count += 10;
        progress.value = count;
    }, 1000);
</script>

3 、模擬progress（專案中一般會自己寫progress）：

<!-- CSS用到了linear-gradient和transition 低版本瀏覽器不相容 -->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
        .box {
            position: relative;
            margin: 20px auto;
            width: 500px;
            height: 30px;
            border: 1px solid #F4F4F4;
        }
        .progress {
            position: absolute;
            top: 0;
            left: 0;
            width: 0;
            height: 100%;
            background: -webkit-linear-gradient(top left, orange, green, cornflowerblue);
            background: -moz-linear-gradient(top left, orange, green, cornflowerblue);
            background: -ms-linear-gradient(top left, orange, green, cornflowerblue);
            background: -o-linear-gradient(top left, orange, green, cornflowerblue);
            background: linear-gradient(top left, orange, green, cornflowerblue);
            -webkit-transition: all .5s linear 0s;
            -moz-transition: all .5s linear 0s;
            -ms-transition: all .5s linear 0s;
            -o-transition: all .5s linear 0s;
            transition: all .5s linear 0s;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="progress" id="progress"></div>
</div>
<script>
    var count = 0;
    var timer = window.setInterval(function () {
        if (count >= 100) {
            window.clearInterval(timer);
            progress.style.width = count + '%';
            return;
        }
        count += 10;
        progress.style.width = count + '%';
    }, 500);
</script>
</body>

4、datalist

<!-- 輸入蘋果出現下拉提示資訊 -->
<input type="text" id="search" list="searchList"/>
<datalist id="searchList">
    <option value="蘋果">蘋果</option>
    <option value="蘋果手機">蘋果手機</option>
    <option value="蘋果電腦">蘋果電腦</option>
    <option value="macbook">macbook</option>
</datalist>

5、color：顏色選擇器

<style>
    html, body {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
</style>
<input type="color" id="colorInp"/>
<script>
    colorInp.value = '#ffffff';
    colorInp.onchange = function () {
        document.body.style.backgroundColor = this.value;
    }
</script>

6、range：滑塊控制元件

<input type="range" max="65" min="18" value="25" id="rangeInp"/>
<input type="number" value="25" style="width: 50px; text-align: center;" disabled id="ageInp"/>
<script>
    rangeInp.oninput = function () {
        ageInp.value = this.value;
    };
    //->oninput：相當於PC端的keydown、keyup事件，但是在移動端，由於鍵盤都是虛擬的，我們無法像PC端一樣監聽到鍵盤的觸發(也就是不能使用keydown、keyup)，所以我們統一使用input事件來代替之前的事件 =>"當表單元素操作過程中觸發這個事件"
</script>

7、email （郵箱，內建驗證）

<input type="email" id="userEmail"/>
<span id="spanEmail">郵箱格式有錯誤!</span>
<script>
    userEmail.onblur = function () {
        console.log(this.checkValidity());//->內建驗證：不輸入內容是TRUE，輸入格式錯誤為FALSE，輸入正確為TRUR
    }
</script>

8、placeholder ( 輸入框內提示內容，低版本瀏覽器不相容)

<style>
    input {
        margin: 20px;
        padding: 0 5px;
        width: 300px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #000;
    }
</style>
<input type="email" placeholder="請輸入郵箱!"/>

placeholder相容性處理

<link rel="stylesheet" href="css/reset.min.css"/>
    <style>
        .inpBox {
            position: relative;
            margin: 20px auto;
            width: 300px;
            height: 30px;
        }

        .inpBox input, .inpBox span {
            padding: 0 5px;
            width: 288px;
            height: 28px;
            line-height: 28px;
            border: 1px solid green;
        }

        .inpBox span {
            display: none;
            position: absolute;
            top: 1px;
            left: 6px;
            z-index: 2;

            padding: 0;
            border: none;
            color: #ccc;
            cursor: text;
        }
    </style>
</head>
<body>
<div class="inpBox">
    <input type="text" id="userName" placeholder="請設定使用者名稱"/>
    <span id="tipName">請設定使用者名稱</span>
</div>
<script>
    if (window.navigator.userAgent.indexOf('MSIE') >= 0) {
        //->IE
        var tipName = document.getElementById('tipName'),
                userName = document.getElementById('userName');
        tipName.style.display = 'block';
        userName.placeholder = null;

        tipName.onclick = function () {
            userName.focus();
        };
        userName.onkeyup = userName.onkeydown = function () {
            var val = this.value;
            tipName.style.display = val.length === 0 ? 'block' : 'none';
        }
    }
</script>
</body>

（以下自行在瀏覽器中嘗試..簡單且不常用）

<input type="search"/><!--在手機上,有的手機會在文字框的末尾放一個搜尋圖示-->
<input type="url"/>
<input type="email">
<input type="tel">
<input type="number" min="18" max="65" value="25" step="1"/>
<input type="date" id="dateInp"/>
<input type="time"/>

新的表單元素的增加帶來了什麼樣的作用?
­1 方便我們的開發，新的元素提供很多強大的功能，例如:日曆...
­2 在移動端，我們使用INPUT新的型別，當使用者輸入的時候，手機會根據型別調取出最符合 使用者輸入的虛擬鍵盤，例如:我們使用的是number型別，那麼調取出來的就是數字鍵盤...
­3 某些型別自帶了表單驗證
CSS:userEmail:valid{} #userEmail:invalid{}
JS: this.checkValidity()
­4 提示屬性:placeholder 用的比較多

那就先了解這麼多，
以上，如有不明之處，歡迎問詢~如有不妥之處，感謝指正！；

相關文章