HTML5--新增表单元素属性事件（3）
前⾔：
  HTML5在原本已有表单元素的基础上新增了新的表单元素和属性，增强了表单元素的功能。
第⼀类.新增input(type)类型
  1.type为email
    作⽤：email 类型⽤于包含 email 地址的输⼊域。
    特性：提供了默认电⼦邮箱的完整验证：要求必须包含@符号，同时必须包含服务器名称，如果不能满⾜验证，则会阻⽌当前的表单提交
    email⽰例：如果内容不满⾜邮箱格式，提交表单会有错误提⽰信息。
<body>
<form action="#">
邮箱:<input type="email">
<input type="submit" value="提交">
</form>
</body>
html中提交表单用什么属性
  2.type为url
    作⽤：url类型⽤于包含⽹址的输⼊域。
    特性：提供了⽹址完整验证，只能输⼊合法的⽹址：必须包含(例:www.baidu)
    url⽰例：如果内容不满⾜⽹址格式，提交表单会有错误提⽰信息。
<body>
<form action="#">
⽹址:<input type="url">
<input type="submit" value="提交">
</form>
</body>
  3.type为number
    作⽤：number 类型⽤于包含数值的输⼊域。
    特性：只能输⼊数字(包含⼩数点)，不能输⼊其它的字符
    属性：
      max -- 限制输⼊框的最⼤值
      min -- 限制输⼊框的最⼩值
      value -- 输⼊框的默认值
      step -- 规定数字增长间隔
    number⽰例：输⼊框中只能输⼊number类型值，不能输⼊其他类型的值
<form action="#">
数量：<input type="number" value="60" max="100" min="0" step="3">
<br>
<input type="submit" value="提交">
</form>
  4.type为search
    作⽤：search 类型⽤于搜索域，⽐如站点搜索或 Google 搜索
    特性：输⼊值后，输⼊框后带有关闭按钮可以清除输⼊框内容
    search⽰例：
<body>
<form action="#">
请输⼊商品名称：<input type="search"> <br>
<input type="submit" value="提交">
</form>
</body>
  5.type为range
    作⽤：range 类型⽤于包含⼀定范围内数字值的输⼊域(可以⽤作⾳量键)
    特性：显⽰为滑动条
    属性：
      max -- 允许的最⼤值
      min -- 允许的最⼩值
      value -- 规定的默认值
      step -- 规定数字增长间隔
    range⽰例：
<body>
<form action="#">
范围：<input type="range" max="100" min="0" value="50"> <br>
<input type="submit" value="提交">
</form>
</body>
  6.type为color
    作⽤：输⼊类型⽤于规定颜⾊
    特性：该类型允许你从拾⾊器中选取颜⾊
    color⽰例：
<body>
<form action="#">
颜⾊：<input type="color"> <br>
<input type="submit" value="提交">
</form>
</body>
  7.type为tel
    作⽤：tel 输⼊类型⽤于包含电话号码的输⼊字段
    特性：tel它并不是来实现验证。它的本质⽬的是为了能够在移动端打开数字键盘。意味着数字键盘限制了⽤户只能输⼊数字    tel⽰例：
<body>
<form action="#">
电话：<input type="tel"> <br>
<input type="submit" value="提交">
</form>
</body>
  8.type为image
    作⽤：image 输⼊类型将图像定义为提交按钮。
    image⽰例：　
<body>
<form action="#">
<input type="image" src="./img/eg_submit.jpg" alt="Submit"/>
</form>
</body>
  9.type为⽇期相关类型
    类型：   
      date - 选择⽇、⽉、年
      month - 选择⽉、年
      week - 选择周、年
      time - 选择时间（时、分）
      datetime - 选择时、⽇、⽉、年（UTC 时间）
      datetime-local - 选择时、⽇、⽉、年（本地时间）
    ⽇期⽰例：   
<body>
<form action="#">
时分：<input type="time"> <br>
年⽉⽇：<input type="date"> <br>
年⽉⽇时分：<input type="datetime"><br>
年⽉⽇时分：<input type="datetime-local"> <br>
年⽉：<input type="month"> <br>
年周：<input type="week">
<input type="submit" value="提交">
</form>
</body>
第⼆类.新增form属性
  1.noValidate属性
    作⽤：novalidate 属性规定当提交表单时不对其进⾏验证。
    noValidate属性⽰例：　
<body>
<form action="#" novalidate>
<!-- 当提交表带内容时，不会对邮箱输⼊框进⾏校验 -->
邮箱：<input type="email" placeholder="请输⼊你的邮箱地址...">
<input type="submit">
</form>
</body>
  2.autocomplete属性
    作⽤：autocomplete属性规定是否开启表单内容的⾃动补全功能。
    注意：
      1.表单元素的内容必须提交过。
      2.需要⾃动补全的表单元素需要设置name属性。
    autocomplete属性⽰例： 
<body>
<form action="#" autocomplete="on">
<!-- 当再次输⼊内容时，会根据之前输⼊的内容完成⾃动补全 -->
邮箱：
<input type="email" placeholder="请输⼊你的邮箱地址..." name="email">
<input type="submit">
</form>
</body>
第三类.新增input属性
  1.form属性
    作⽤：HTML4中表单内的从属元素必须书写在表单内部，⽽HTML5中，表单元素可以写在任何地⽅，然后给元素指定⼀个form属性，属性值为该表单的id，这样就可以声明元素从属于指定表单。
    form属性⽰例：　
<body>
<form action="#" id="testForm">
⽤户名：<input type="text">
</form>
<!-- 此处密码输⼊框也从属于form表单 -->
密码：<input type="password" form="testForm">
</body>
  2.formaction属性
    理解：formaction属性类似于form表单的action属性，设置表单提交路径
    作⽤：HTML4中表单内的所有元素只能通过表单的action属性被统⼀提交到另⼀个页⾯，⽽HTML5中，可以为所有的提交按钮增加不同的formAction属性，使单击不同的提交按钮将表单提交到不同的页⾯。
    formAction属性⽰例：　
<body>
<form id="testForm">
<input type="submit" value="s1" formaction="xx.jsp">
<input type="submit" value="s2" formaction="yy.jsp">
<input type="submit" value="s3" formaction="zz.jsp">
</form>
</body>
  3.formmethod属性
    理解：formmethod属相类似form表单的method属性，设置表单提交⽅式
    作⽤：HTML4中⼀个表单只能由⼀个method属性来统⼀指定提交⽅法。HTML5中，可以使⽤formmethod属性来对每⼀个表单元素分别指定不同的提交⽅法。
    取值：常⽤提交⽅式是get、post，当然也有其他的提交⽅式。
    formmethod属性⽰例：  　
<body>
<form id="testForm">
<input type="submit" name="s1" value="v1" formmethod="post" formaction="xx.jsp">
<input type="submit" name="s2" value="v2" formmethod="get" formaction="yy.jsp">
</form>
</body>
  4.formenctype属性
    理解：formenctype属性类似form表单的enctype属性，设置表单数据编码
    作⽤：HTML4中表单具有enctype属性，⽤于指定如何对表单内的数据编码。HTML5中，可以使⽤formenctype属性对表单元素分别指定不同的编码⽅式。
    formenctype属性⽰例：
<body>
<form id="testForm">
<!-- 表单数据中的空格变成+号，但不对特殊字符处理。 -->
<input type="text" formenctype="text/plain">
<!-- 不对字符进⾏编码，在使⽤包含⽂件上传控件的表单时，必须使⽤此类型 -->
<input type="text" formenctype="multipart/form-data">
<!-- 发送前编码所有字符，当表单action为get时，将表单数据转成字符串。 -->
<input type="text" formenctype="application/x-www-form-urlencoded">
</form>
</body>　
  5.formtarget属性
    理解：formtarget属性类似form表单的target属性，设置新页⾯打开位置
    作⽤：HTML4中表单具有target属性，⽤于指定在何处打开表单提交后所需要加载的页⾯。HTML5中，可以对多个提交按钮分别使⽤formtarget属性来指定提交后在何处打开页⾯。
    取值：_blank，_self，_parent，_top，_framename(指定name的框架)
    formtarget属性⽰例： 
<body>
<form>
<!-- _blank在新的空⽩页⾯打开 -->
<input type="submit" value="s1" formtarget="_blank" formaction="xx.jsp">
<!-- _self在当前页⾯打开 -->
<input type="submit" value="s2" formtarget="_self" formaction="yy.jsp">
<!-- _parent在当前框架的⽗框架打开 -->
<input type="submit" value="s3" formtarget="_parent" formaction="zz.jsp">
<!-- _top在当前窗⼝打开 -->
<input type="submit" value="s3" formtarget="_top" formaction="yy.jsp">
<!-- _在指定name的frmae中打开 -->
<input type="submit" value="s3" formtarget="_framename" formaction="ff.jsp">
</form>
</body>
  6.autofocus属性
    作⽤：为⽂本框、选择框或按钮控件加上autofocus属性，当画⾯打开时，该控件⾃动获得光标焦点。
    autofocus属性⽰例：当页⾯打开时，密码框⾃动获得焦点。　
<body>
<form>
⽤户名:<input type="text"><br/>
密码:<input type="text" autofocus>
</form>
</body>
  7.required属性
    作⽤：HTML5新增的required属性可以应⽤在⼤多数输⼊元素上，提交时如果内容为空，不允许提交并有提⽰信息显⽰。
    required属性⽰例：  　
<body>
<form id="testForm" action="#">
⽤户名：<input type="text" name="userName" required><br/>
<input type="submit" value="提交">
</form>
</body>
  8.labels属性
    作⽤：HTML5中为所有可使⽤标签的表单元素、button、select元素等，定义了⼀个labels属性，属性值为NodeList对象，代表该元素所绑定的标签元素所构成的集合。
    labels属性⽰例：
<body>
<form id="testForm" action="#">
<label id="label" for="txt_name">姓名:</label>
<input type="text" id="txt_name">
<input type="button" id="btnValidate" value="验证" onclick="Validate()">
</form>
<script>
function Validate() {
var txtName = ElementById('txt_name')
var btn = ElementById('btnValidate')
var form = ElementById('testForm')
if (im() === ''){
var label = ateElement('label')
// 新建⼀个label标签，同时让其和输⼊框关联
label.setAttribute('for', 'txt_name')
form.insertBefore(label, btn)
// 此时输⼊框的labels属性就是⼀个list
txtName.labels[1].innerHTML = '请输⼊姓名'
}
}
</script>
</body>
  9.标签的control属性
    作⽤：HTML5中，可以在标签内部放置⼀个表单元素，通过该标签的control属性来访问该表单元素。
    control属性⽰例： 
<body>
<form id="testForm" action="#">
<label id="label">
⽤户名:
<input type="text"><br/>
<small>请输⼊登录名</small>
</label>
<input type="button" value="设置为默认值" onclick="setValue()">
</form>
<script>
function setValue(){
var label = ElementById("label")
// 通过label的control属性获取到其中包裹的表单元素
var txtbox = l
txtbox.value = "010010"
}
</script>
</body>
  10.⽂本框的placeholder属性
    作⽤：placeholder当⽂本框处于未输⼊状态时显⽰的提⽰信息。当⽂本框处于未输⼊状态且未获取光标焦点时，模糊显⽰输⼊提⽰⽂字。
    placeholder属性⽰例：　
<body>
<form id="testForm" action="#">
⽤户名:<input type="text" placeholder="请输⼊⽤户名">
</form>
</body>
  11.复选框的indeterminate属性

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。