htmlform表单属性_html制作软件

htmlform表单属性_html制作软件HTML5form表单的相关知识总结首先在介绍HTML5form表单的新增内容之前,我总结了一下HTML的form表单的内容。<!DOCTYPE html><html lang=”en”><head>

HTML5form表单的相关知识总结   首先在介绍HTML5form表单的新增内容之前,我总结了一下HTML的form表单的内容。   <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>HTML表单标签</title> </head> <body> <input type=”text”><!–输入文本,字符,数字一切东西–> <input type=”password”><!–输入密码会以掩码的形式显示出来–> <input type=”radio”><!–单选框–> <input type=”checkbox”><!–复选框–> <input type=”submit”><!–提交按钮–> <input type=”reset”><!–重置按钮–> <input type=”image”><!–可以改变按钮颜色的提交按钮–> <input type=”hidden”><!–定义隐藏的输入字段–> <input type=”file”><!–浏览按钮,用于上传文件–> <input type=”button”><!–按钮–> <select name=”” id=””><!–下拉列表–> <option value=””></option> <option value=””></option> <option value=””></option> </select> </body> </html>   接下来总结HTML5的form表单内容,我分为新增的form素,新增的form属性,新增的input类型,新增的input属性四个部分。   1.新增的form素   1)datalist素   datalist与option联合使用,datalist素通常通过list属性与一个input相关联,达到的效果就是我们既可以手动输出,也可以选择下拉列表中的选项。   <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>datalist的使用</title> </head> <body> <form action=”#” method=”get”> 请输入网址:<input type=”text” list=”url_data”> <datalist id=”url_data”> <option label=”百度” value=”http://www.baidu.com”></option> <option label=”腾讯” value=”http://www.sigusoft.com”></option> <option label=”搜狐” value=”http://www.sohu.com”></option> <input type=”submit”> </datalist> </form> </body> </html>   2)keygen素   keygen素是秘钥对生成器,能够使用户验证更为可靠。   <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>keygen素的使用</title> </head> <body> <form action=”#” method=”get”> 请输入用户名:<input type=”text”><br> 请选择加密强度:<keygen/><br> <input type=”submit”> </form> </body> </html>   3)output素   output素用于在浏览器中显示计算结果或脚本输出。   <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>output的使用</title> </head> <body> <form action=”#” method=”get” name=”form”> <output name=”output”></output> </form> <script> var a=parseInt(prompt(“请输入第一个数:”,0)); var b=parseInt(prompt(“请输入第二个数:”,0)); document.forms[“form”][“output”].value=a*b; </script> </body> </html>   2.新增的form属性   1)autocomplete属性   新增的autocomplete属性可以帮组用户在form表单中的素中实现自动完成内容输入,不过在使用这项功能之前需要先启用浏览器本身的自动完成功能,才能使用autocomplete属性。   <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>autocomplete属性的使用</title> </head> <body> <form action=”#” method=”get” autocomplete=”on”><!–当浏览器开启自动补充功能时,autocomplete不写也自动补充,但是如果将autocomplete设置成为off,那么就算浏览器开启自动补充功能,也没有补充效果。–> 姓名:<input type=”text” name=”name”><br><!–注意name属性不能省去,否则form表单的autocomplete属性不起作用。–> 密码:<input type=”password” name=”pass”><br> 电子邮箱:<input type=”email” name=”email”><br> <input type=”submit”> </form> </body> </html>   2)novalidate属性   form素的novalidate属性用于在提交表单时取消整个表单的验证,即关闭对表单内所有素的有效性检查。   <!DOCTYPE html> <html lang=”en”> <head> <meta charset=”UTF-8″> <title>novalidate的使用</title> </head> <body> <form action=”” method=”get” novalidate=”true”> 请输入正确的电子邮箱:<input type=”email” name=”user_email” > <input type=”submit” value=”提交”><!–提交没有浏览器自带的邮箱验证提示了–> </form> </body> </html>   3)formaction属性   等于action。   4)formenctype属性   等于enctype。   5)formmethod属性   等于method。   6)formnovalidate属性   等于novalidate。   7)formtarget属性   等于target。   3.新增的input类型   1)email类型   再提交表单的时候浏览器会自动验证填写的邮箱是否正确。   <input type=”email” name=”email” />   2)url类型   提交表单的时候,输入的内容时url地址格式的内容,则将数据提交到服务器,如果不是就不允许提交,url地址格式例子:http://www.baidu.com。   <input type=”url” name=”url”/>   3)number类型   这是一个只能输入数值的输入框,其中的属性可以有min,max,step。   <input type=”number” name=”number” min=”1″ max=”20″ step=”4″/>   4)range类型   输出一定范围内数字值的文本框   <input type=”range” name=”range” min=”1″ max=”20″ step=”4″/>   5)date类型   输出年,月,日,如2017年6月6日会以2017-06-06显示。   <input type=”date” name=”date”/>   6)month类型   输出月,年   <input type=”month” name=”month”/>   7)week类型   输出周,年   <input type=”week” name=”week”/>   8)time类型   输出小时,分钟   <input type=”time” name=”time” max=”” min=”” step=”” value=””/>   9)datetime类型   输出选取的时间,日,月,年,其中时间为UTC时间。   <input type=”datetime” name=”datetime”/>   10)datetime-local类型   同datetime,但是其中时间为本地时间。   11)search类型   用于输入搜索关键词的文本框。   <input type=”search” name=”search”/>   12)tel类型   用于输入电话号码的文本框,但他不限定制输入数字,也包括+,-,(,)等等。   <input type=”tel” name=”tel”/>   13)color类型   用于设置颜色的文本框.   <input type=”color” name=”color”/>   4.新增的input属性   1)autocomplete属性   在上面的form素上的autocomplete属性是全局的,我们也可以在一个input素上单独使用让这个素自动补充或是不补充。   <input type=”text” autocomplete=”off/on”/>   2)autofocus属性   用于自动光标焦点.一般在搜索页面中的搜索文本框,或者一个同意某许可协议的同意按钮。   <input type=”text” autofocus=”true”/>   3)width和height属性   仅用于image类型的高度和宽度的设置。单位是像素。   <input type=”image” src=”https://www.cnblogs.com/iwebkit/p/img/haha.png” width=”50″ height=”50″/>   4)list属性   和datalist搭配使用,在datalist有详细介绍。   5)min,max,step属性   适用于date,picker,number,range属性的input标签。   6)multiple属性   input中file只支持单个文件的上传,multiple属性支持一次性选择多个文件。   <input type=”file” multiple=”multiple”/>   7)pattern属性   用于验证input类型输入狂汇总用户输入的内容是否于自定义的正则表达式相匹配,适用于text,url,tel,email,password。   <input type=”text” pattern=”[0-9]{6}”/>   8)placeholder属性   用于为input类型的输入框提供一个提示,这些提示可以给用户一些提示性语言。   <input type=”tel” placeholder=”请输入电话号码”/>   9)required属性   告诉用户这个输入框的内容不能为空。   <input type=”text” required/>

2024最新激活全家桶教程,稳定运行到2099年,请移步至置顶文章:https://sigusoft.com/99576.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处:https://sigusoft.com/31103.html

(0)
上一篇 2024年 9月 11日
下一篇 2024年 9月 11日

相关推荐

关注微信