HTML5 表单元素和属性学习

HTML5 表单元素和属性学习

   版权声明：未经博主授权，内容严禁转载 ！ 

表单元素简介

　　无论实现提交功能还是展示页面功能，表单在HTML中的作用都十分重要。

　　在其他版本的HTML中，表单能够包含的元素很少，属性也不多。

　　再起表单验证需要写大量的 JavaScript 代码去实现。

　　在HTML5中，增加了许多标签和属性，为开发带来了极大的便利。

表单元素 - datalist

　　<datalist> 元素规定输入与的选项列表。

　　此元素可以使用list属性穿件一组列表项，只作为输入框提示。

　　list 属性规定 form 或者 input 域拥有自动完成功能，例如：

　　

<input list="mybrowser">
<datalist id="mybrowser">
  <option value="internet explorer"></option>
  <option value="firfox"></option>
  <option value="chrome"></option>
  <option value="opera"></option>
  <option value="safari"></option>
</datalist>

list 属性需要和 id 属性相对应。　　

该元素可以实现内容的自动补全，但是仍然支持用户自己手动输入其他内容！

表单元素 - output

 　　<output> 元素用于不同类型的输出，比如计算或脚本输出。

　　

<form oninput="sum.value = parseInt(numa.value) + parseInt(numb.value)">
  <input type="number" id="numa" value="12"> +
  <input type="number" id="numb" value="3">
  <output name="sum" for="numa numb"></output>
</form>

上边案例为标准案例，名字必须按照上边的格式编写。

小练习：自动获取用户的邮箱地址

案例代码：

<form oninput="email.value = fname.value  + '-' + lname.value +'@qq.com' ">
  <input type="text" id="fname" value=""> +
  <input type="text" id="lname" value="">
  <output name="email" for="numa numb"></output>
</form>

表单元素 - meter

<meter> 元素与 <progress> 元素相似，可用于显示刻度，而不是进度。

meter 元素的常用属性：

　　- min 和 max ：设置最小值和最大值边界。

　　- value：确定测量的值。

　　- low、high 和 optimum ：将范围划分为不同的部分和设置最佳位置。

案例代码：

<!-- 例如游戏血条 -->
<meter value="25" min="0" max="100"
  low="30"
  high="80"
  optimum="100">

</meter>

　　

表单属性

表单属性 - autocomplete

　　autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

　　当用户在自动完成域中开始输入时，浏览器应该在该域中显示填写的选项。

　　- autocomplete 属性有可能在 form 元素的中是开启的，而在 input 元素中是关闭的。

　　

　　代码案例：

<form autocomplete="on" class="" action="index.html" method="post">
  <label for="search">查询内容：</label>
  <input type="search" id="search">

  <label for="password">密码查询：</label>
  <input type="password" id="password" autocomplete="false">

  <button type="submit" name="button">submit</button>
</form>

　　密码一定不要设置自动完成！！  表单 form 默认开启自动完成，小心喽！

　　　　autocomplete="false"

表单属性 - novalidate

　　novalidate 属性是一个 boolean（布尔）属性。

　　novalidate 属性规定在提交表单是不应该验证 form 或者 input 域。

　　- 在表单元素中添加 novalidate 属性，将不会对表单内的输入元素进行验证。

　　

　　案例代码：

<form class="" action="index.html" method="post" novalidate>
  <input type="email" name="" value="">
  <input type="submit" name="" value="">
</form>

　　该属性不会对 input 单独起作用，所以说写在 input 里边，白搭！

表单属性 - autofocus

　　autofocus 属性可以自动聚焦输入元素，也是一个 boolean（布尔）属性。

　　拥有 autofocus 属性的元素，在页面加载时自动获取焦点。

　　- 注意：当页面有多个控件时，第一个具有该属性的元素会聚焦。

　　

　　这个属性是一个非常 人性化 的设置。因为有些时候，用户真他妈的懒，没错，用户说的就是你！

表单属性    input 属性 - 表单相关

　　

input 属性 - form 属性

 　　注意：IE浏览器不支持 input 元素的 form 属性。

 　　

<form id="myform" class="" action="index.html" method="post">
  <h3>表单内部</h3>
  姓名：
  <input type="text" name="username" value="">
  <button type="submit" name="button">submit</button>
</form>
<input type="email" name="email" value="" form="myform">

input 属性 - formaction 属性

 　　规定当表单提交时处理输入控件的文件的URL。

　　- 注意：只针对 type = “submit” 和 type = “image” 有效。

　　

<form >
  <input type="text" name="wd" value="">
  <input type="submit" name="" value="提交" formaction="http://www.baidu.com/s">
  <input type="image" width="100px" src="" formaction="index.html">
</form>

点击图片会产生一个url：file:///C:/Users/Administrator/Desktop/1.html?wd=&x=33&y=13

其中x、y表示点击的图片的坐标位置。

input 属性 - formectpye 属性

　　规定当前表单数据提交到服务器是如何进行编码，且提交方式为 POST 的时候。

　　- 注意：只针对 type = “submit” 和 type = “image” 有效。

　　- input 元素的 formetype 属性会覆盖表单的 formetype 属性。

　　

　　formetype 属性的值：

　　　　- application/x-www-form-urlencoded （默认）

　　　　- multipart/form-data （通常用于文件或者图片）

　　　　- text/plain （通常用于纯文本格式）

　　

input 属性 - formmethod 属性

　　指定表单的提交方式。

　　

<form class="" action="index.html" method="post">
  <input type="text" name="text" value="hello">
  <button type="submit" formmethod="get" >GET方式提交</button>
  <button type="submit" formmethod="post">POST方式提交</button>
</form>

GET请求：

POST 请求：

input 属性 - formnovalidate 属性

 　　formnvalidate 属性覆盖  <form> 元素的 novalidate 属性。

　　- 注意：formnvalidate 属性可以与 type = “submit” 配合使用。表单的提交方式：

　　

　　formnvalidate 实现控件的表单不需要验证，添加在 submit 中，而不是添加在 input 中。

input 类型

　　表单输入类型

　　　　- month（月份）   week（周）   date （日期）  datetime（日期+时间）   datetime-local（本地时间和日期）   time（时间）

　　　　- color （颜色）  number （数字）  range（范围）

　　　　- tel （电话）  search（查询搜索）   url（浏览器访问URL）

　　　　主要是给移动端提供，在PC端效果并不是很出色，很有代表性。

表单输入类型

　　通常用在页面的表单元素 <form>中，用来接收用户输入的子元素。

　　在HTML5中，新增了多种输入类型的子元素，提供了更好的输入控制和验证。

　　　　　　　　

输入类型的分类

　　

color 基本使用方法

 　　color 类型用于选取颜色，使用语法如下：

<input type="color" name="color" id="color">

　　　　

　　可以通过 color 元素的 value 属性获取用户选择的颜色值

　　- var c = document.getElementById("colorId");

　　- document.body.style.backgroundColor = c.value;    // 修改界面的背景颜色

　　- 早期颜色的定义：

　　　　1. RGB

　　　　2.英文单词

　　　　3.十六进制数

案例代码：

<form class="" action="1.html" method="post">
  <input type="color" id="color" name="color">
  <button type="button" id="btnsubmit" name="button" onclick="ChangeColor()">submit</button>
</form>

<script type="text/javascript">
  function ChangeColor() {
    var c = document.getElementById("color");
　　document.body.style.backgroundColor = c.value;
    console.log(c.value);
  }
</script>

number 基本使用方法

 　　数字类型只能接受数字值

　　number 类型用于数值的输入域，还能够设定对数字的限定。

　　-  <input type = “number” >

 　　　

<form class="" action="index.html" method="post">
  <input type = "number" name="number" >
</form>

　　number 常见属性

　　　　max ：规定允许的最大值。

　　　　min ： 规定允许的最小值。

　　　　step ： 规定输入字段的合法数字间隔，递增或者递减的步长。

　　　　value： 规定输入字段的默认值。

<input type="number" name="" value="6" min="0" max="10" step="2">

 range 基本使用方法

 　　range 类型用于应该包含一定范围内数字值得输入域，显示为滑动条。

　　- <input type="range" value="6" min="0" max="100" step="0.5">

　　 　　

　　range 常见属性

　　　　max ：最大值

　　　　min ：最小值

　　　　value ：默认值

　　　　step ：数字间隔

 小案例：

<form class="" action="index.html" method="post">
  <input type="range" id="score" name="" value="6" min="0" max="100" step="0.5">
  <button type="button" onclick="showScore()" name="button">submit</button>
</form>

<script type="text/javascript">
  function showScore() {
    var r =document.getElementById('score');
    console.log(r.value);
  }
</script>

上面代码在点击提交按钮后才会显示数字值，十分的不友好，那么下面对上面的代码进行优化，使操作变得更加人性化。

<form class="" action="index.html" method="post">
  <input type="range" id="score" name="" value="60" min="0" max="100" step="0.5" oninput="showScore()" onchange="showScore()">
  <label for="score" id="mylabel">60</label>
  <!-- <button type="button" onclick="showScore()" name="button">submit</button> -->
</form>

<script type="text/javascript">
  function showScore() {
    var r =document.getElementById('score');
    console.log(r.value);
    var ml = document.getElementById('mylabel');
    ml.innerHTML = r.value;
  }
</script>

　　　　

  search 基本使用方法

 　　search 类型用于搜索域，比如站点搜索或Google搜索。

　 　search 类型通常用于移动端设备上显示比较友好，如下图：

　　　　

　　　　　    < input type=“search” >

<form class="" action="index.html" method="post">
  <input type="search" name="" value="">
  <button type="submit" name="button">submit</button>
</form>

tel 基本使用方法

 　　tel 类型用于输入电话号码。

 　　tel 类型通常在移动端设备上显示比较好，如图所示：

　　　　

　　　　< input type = "tel" >

 url 基本使用方法

 　　url 类型用于包含 URL 地址的输入域。

　　在提交表单时，会自动验证 url 域的值。

 　　

　　　　< input  type = "url" >

日期输入类型的使用方法

　　month：选择月份。

　　week：选择周和年。

　　date：选择日期。

　　datatime：选择日期时间。

　　　　- Safari 和 Opera 支持

　　datetime-local：选择贝蒂日期时间。

　　time：选择时间。

 　　

案例代码（感受一下）

<input type="time" name="" value=""><br>
<input type="datetime" name="" value=""><br>
<input type="datetime-local" name="" value=""><br>
<input type="month" name="" value=""><br>
<input type="week" name="" value=""><br>
<input type="date" name="" value="">

　　　　

HTML5 表单验证

ValidateState 对象

　　html5 引入了用于验证表单控件的方法。

　　可以通过表单控件来访问 ValidateState 对象。

　　- var check = document.myForm.myInput.validity

　　- check.valid 属性来判断验证是否完全通过。

案例代码：

<form name="myform" class="" action="1.html" method="post">

  <input required type="text" name="fname" value="">
  <button onclick="check()" type="button" name="button">check</button>
  <input type="submit" name="" value="submit">
</form>

<script type="text/javascript">
  function check() {
  //  console.log("check method");
    var fnamestate = document.myform.fname.validity;
    console.log(fnamestate.valid);
  }
</script>

验证约束条件

1、valueMissing

　　目的：确保表单控件中的值已填写。

　　用法：在表单中将 required 特性设置为 true。

　　示例：　

　　　< input type = "text" name = "myText"  required >

<form name="frm" action="valueMissing.html">

    <input oninput="check()" onchange="check()" type="text" name="un" required placeholder="用户名必须填写">
    <span id="errorMessage"></span>

    <p>
        <button onclick="check()" type="button">check</button>
    </p>
</form>

<script>
    var em = document.getElementById("errorMessage");

    function check() {
        var un = document.frm.un.validity;
        if (un.valueMissing) {
            em.innerHTML = "用户名不能为空";
        } else {
            em.innerHTML = "";
        }
    }
</script>

2、typeMismatch

　　目的：保证控件值和预期类型相匹配（如：number、email、url 等）。

　　用法：指定表单控件的 type 特性值。

　　示例：

　　　 <input type = "email" name = "myEmail" >

<form action="typemismacth.html" name="frm">
    <input type="email" name="email" id="email">
    <button onclick="check()" type="button">check</button>
</form>
<script>
    function check() {
        var emailState = document.frm.email.validity;
        console.log(emailState);
        if (emailState.typeMismatch) {
            alert("邮箱格式不正确!");
        }
    }
</script>

 3、patternMismatch

　　目的：根据表单控件上设置的格式规则验证输入是否为有效格式。

　　用法：在表单控件上设置 pattern 特性，并且赋予适当的匹配规则。

　　示例：

　　　　<input type = "text" name = "creditcardnumber" pattern="[0-9]{16}" 

　　　　title = "A credit card number is 16 djgjts with no spaces or dashes" >

<form action="patternmismatch.html" name="frm">
    <input type="text" name="stuNo"
           title="网址格式不正确"
           pattern="[a-zA-z]+://[^\s]*">
    <span id="em"></span>
    <button onclick="check()" type="button">check</button>
</form>
<script>
    var em = document.getElementById("em");
    function check() {
        var stuNoState = document.frm.stuNo.validity;
        if(stuNoState.patternMismatch){
            em.innerHTML = "网址格式不正确";
        }else{
            em.innerHTML = "";
        }
    }
</script>

 4、toolong

　　目的：避免输入的值包含过多字符串。

　　用法：在表单控件上设置 maxlength 特性。

　　示例：

< input type="text" name="limitesText" maxLength = "140" > 

  <form name="frm" action="toolong.html">
        <input type="text" name="title" maxlength="6">
        <button type="button" onclick="check()">check</button>
    </form>
    <script>
        function check() {
            var titleState = document.frm.title.validity;
            console.log(titleState);
        }
    </script>

 5、rangeUnderflow

　　目的：限制数值型控件的最小值。

　　用法： 为表单控件设置 min 特性，并且赋予最小值。

　　示例：

　　　　

< input type = "range" name="ageCheck" min="18" >

<form name="frm" action="numberValidate.html">
    <input type="number" name="age" min="18" max="60" step="2">
    <em id="em"></em>
    <button onclick="check()" type="button">check</button>
</form>

<script>
    var em = document.getElementById("em");

    function check() {
        var ageState = document.frm.age.validity;
        if (ageState.rangeUnderflow) {
            em.innerHTML = "太小，不允许访问";
        } else if (ageState.rangeOverflow) {
            em.innerHTML = "太大，请访问我们的另一个主站";
        } else if (ageState.stepMismatch) {
            em.innerHTML = "18、20、22....的朋友才能访问";
        } else {
            em.innerHTML = "";
        }
    }
</script>

 6、rangeOverflow

　　目的：限制数值型控件的最大值。

　　用法： 为表单控件设置 max 特性，并且赋予最大值。

　　示例：

　　

　　< input type = "range" name="ageCheck" max="20" >

 7、stepMismatch

　　目的：确保输入值符合 min、max 及 step 即设置。

　　用法： 为表单控件设置 step 特性，并且指定数值的增量。

　　示例：

　　　　

< input type = "range" name="level"  min="10" max="20" step="2">

 8、customError

　　目的：处理应用代码明确设置及计算产生的错误。

　　用法：调用 setCustomValidity(message) 将表单控件置于 customError 状态。

　　示例：

input.setCustomValidity("自定义错误") 

　　　　要清除错误，只需要在控件上吊用 setCustomValidity("") 即可。

<form action="customvalidity.html" name="frm">
    <input type="email" name="email" id="email" required>
    <button onclick="check()" type="submit">submit</button>
</form>
<script>
    function check() {
        var emailState = document.frm.email.validity;
        if(emailState.valueMissing) {
            document.frm.email.setCustomValidity("邮件不能为空！！！");
            return;
        }
        if(emailState.typeMismatch) {
            document.frm.email.setCustomValidity("邮件格式不正确！！！");
            return;
        }
        document.frm.email.setCustomValidity("");
    }
</script>

 HTML5 表单元素和属性小结

学习内容汇总 

　　1、表单元素

　　2、表单属性

　　3、输入类型

　　4、表单验证

表单元素

表单元素简介

表单元素 - datalist

 

 表单元素 - output

 

表单元素 - meter

表单属性

表单属性 - autocomplete

表单属性 - novalidate

表单属性 - autofocus

 input 属性 - 表单相关

 

表单的输入类型

 

输入类型 - color

输入类型 - number

输入类型 - range

输入类型 - search

 

输入类型 - tel

输入类型 - url

输入类型 - 日期时间型

表单验证

 表单验证 - ValidateState对象

 

验证约束条件