HTML5的學習之表單元素

HTML5的學習之表單元素

這篇博客我們繼續對HTML5進行學習,主要講解HTML5的表單元素相關的內容。

1.input元素新增的類型

type類型	描述
color	選色板
month	月份
week	周
date	日期
datetime	多數不兼容
datetime-local	日期加時間
time	時間
email	檢測郵箱地址
number	數字
range	範圍 調節音量 進度條
search	搜索
tel	電話 不支持
url	地址 檢測

HTML代碼：

    <form>
        <input type="text" autofocus placeholder="請輸入內容" required><br>
        <input type="password" size="50"><br>
        <input type="checkbox" name="" id=""><br>
        <input type="radio" name="" id=""><br>
        <input type="button" value="按鈕"><br>
        <hr>
        <div id="box"></div>
        color:<input type="color" name="" id="color"><br>
        month:<input type="month" name="" id="month"><br>
        week:<input type="week" name="" id="week"><br>
        date:<input type="date" name="" id="date"><br>
        datetime:<input type="datetime" name="" id="datetime"><br>
        datetime-local:<input type="datetime-local" name="" id="datetime_local"><br>
        time:<input type="time" name="" id="time"><br>
        email:<input type="email" name="" id="email"><br>
        range:<input type="range" name="" id="range" min="-50" max="50" step="5"><br>
        search:<input type="search" name="" id="search" min="-50" max="50" step="5"><br>
        url:<input type="url" name="" id="url"><br>
        <input type="submit">
    </form>

js代碼：

    function $el(el){
        return document.getElementById(el)
    }
    var oColor=$el("color");
    var oBox=$el("box");
    var oDate=$el("date");
    var oTime=$el("datetime_local");
    var oMonth=$el("month");
    var oTime2=$el("time");
    var oRange=$el("range");
    var oSearch=$el("search");
    var oWeek=$el("week");
    oColor.onchange=function(){
        // console.log(this.value);
        oBox.style.backgroundColor=this.value;
    }
    oDate.onchange=function(){
        console.log(this.value);
    }
    oTime.onchange=function(){
        console.log(this.value);
    }
    oMonth.onchange=function(){
        console.log(this.value);
    }
    oTime2.onchange=function(){
        console.log(this.value);
    }
    oRange.onchange=function(){
        console.log(this.value);
    }
    oWeek.onchange=function(){
        console.log(this.value);
    }

2.新增的屬性

屬性	值	描述
autocomplete	on/off	規定是否啓用表單的自動完成功能。 針對form標籤
novalidate	novalidate	如果使用該屬性，則提交表單時不進行驗證。 針對form標籤
autocomplete	on/off	autocomplete 屬性規定 元素輸入字段是否應該啓用自動完成功能。
autofocus	autofocus	屬性規定當頁面加載時 元素應該自動獲得焦點。
form	form_id	form 屬性規定 元素所屬的一個或多個表單。
formaction	URL	屬性規定當表單提交時處理輸入控件的文件的 URL。(只針對 type=“submit” 和 type=“image”)
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	屬性規定當表單數據提交到服務器時如何編碼(只適合 type=“submit” 和 type=“image”)。
formmethod	get/post	定義發送表單數據到 action URL 的 HTTP 方法。 (只適合 type=“submit” 和 type=“image”)
formnovalidate	formnovalidate	formnovalidate 屬性覆蓋 元素的 novalidate 屬性。
formtarget	_blank _self _parent _top framename	規定表示提交表單後在哪裏顯示接收到響應的名稱或關鍵詞。(只適合 type=“submit” 和 type=“image”)
height	pixels	規定 元素的高度。(只針對type=“image”)
width	pixels	width 屬性規定 元素的寬度。 (只針對type=“image”)
list	datalist_id	屬性引用 元素，其中包含 元素的預定義選項。
max	number date	屬性規定 元素的最大值。
min	number date	屬性規定 元素的最小值。
multiple	multiple	屬性規定允許用戶輸入到 元素的多個值。
pattern	regexp	pattern屬性規定用於驗證 元素的值的正則表達式。
placeholder	text	placeholder 屬性規定可描述輸入 字段預期值的簡短的提示信息 。
required	required	屬性規定必需在提交表單之前填寫輸入字段。
step	number	step 屬性規定 元素的合法數字間隔。

3.HTML5新增的表單元素

標籤	描述
	標籤定義選項列表。請與 input 元素配合使用該元素，來定義 input 可能的值。
	標籤規定用於表單的密鑰對生成器字段。
	標籤定義不同類型的輸出，比如腳本的輸出。

HTML代碼：

    <form action="">
        <select name="" id="">
            <option value="">汽車</option>
            <option value="">飛機</option>
            <option value="">大炮</option>
        </select>
        <input type="text" autocomplete="true">
        <input list="list1">
        <datalist id="list1">
            <option value="汽車"></option>
            <option value="飛機"></option>
            <option value="大炮"></option>
        </datalist>
    </form>
    <form oninput="sum.value=Number(num1.value)+Number(num2.value)">
        <input type="number" name="" id="num1"> +
        <input type="number" name="" id="num2"> =
        <output name="sum"></output>
    </form>

視頻講解鏈接：
https://www.bilibili.com/video/BV1gf4y1m7No/
https://www.bilibili.com/video/BV1V54y1B73d/