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/