HTML5新增表单元素及属性(1).docx

HTML5新增表单元素和属性
Form属性：
在Html4中，表单内的元素必须写在表单内部，而Html5则不一定写在内部，他可以写在页面上的任何地方，只要给该元素指定一个form属性，属性为form表单的id,这样就可以声明该元素从属哪个指定的表单了
代码示例：
定专门的form的ID，
Formaction属性：
在HTML4中，一个表单内的所有元素都只能通过action属性统一提交到另外一个页面，然而在HTML5中，却是可以分别提交到不同页面，使用formaction即可，使得点不同的按钮，可以将表单提交到不同的页面。
代码示例：
到1

Placeholder属性：
Placeholder 是指的是处于未输入状态时文本框中显示的输入提示，实现方法只要加上placeholder属性，然后指定提示文字即可。
代码如下
<input type="text" placeholder="点击我" />
Autofocus属性
给文本框，选择框或按钮控件加上该属性，当画面打开时，该控件自动获得光标焦点，目前为止做到这一点的是javascript
代码如下：
<input type=”text” autofocus>
</p><p style='height:0px;padding:0;overflow:hidden'>6、HTML5大幅度改良了input元素的种类
1.url类型：
url类型的input时一种专门来输入URL地址的文本框，输入的必须网站地址。
代码示例：
<input name=”url1” type=”url” value=>
2.email类型
Email类型的input元素一种专门提交输入 email地址的文本框，如果提交的不是 email则不允许提交。但是它不检查该email 是否存在，提交的文本框可以为空，除非加上 热气 3.required属性。
Email类型的属性具有 multiple属性，它允许该文本框中输入一串都好分割emal地址。
代码示例
<inpu</p><p style='height:0px;padding:0;overflow:hidden'>7、t name=”email” type=>就是提示失败，而将改成santiaogou@就可以了。
4.date类型
Date类型的input元素是深受开发者喜爱的一种元素，我们经常看到网页中要求我们的 输入的各种各样的日期，丽日生日，购买日期等，date类型的input元素以日历的形式方便用户输入，
代码示例：
<input name=”date1” type=”date” value=”2015-10-10”>
5.time类型
Time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查，它的外表取决于它的浏览器，可以是简单的文本框，
</p><p style='height:0px;padding:0;overflow:hidden'>8、代码如下：
<input name=”time1” type=”time” value=”10:00”>
6.datetime类型
Datetime类型的input元素是一种专门检查 UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查，
代码如下：
<input name= type=”datetime”>
7. month类型
Month 类型的input 元素是一种专门输入月份文本框，并且在提交是对输入的月份进行有效性的检查，
代码如下：
<input name=”month”1 type=”month” value=”2010-15-02”>
</p><p style='height:0px;padding:0;overflow:hidden'>9、
8.week类型
Week类型是一种专门输入周号的 文本框，并且在提交市对输入的的周号进行有效的检查。它可以是简单的 文本输入框，允许用户输入一个数字，也可以更加准确，
代码如下
<input name=”week1” type=”week” value=”2010-w40”>
9.number 类型
Number类型的input 元素是一种专门输入数字的 文本框，并且在提交时检查里面的是否为数字，它具有max,min和step属性。
其中max表示不能超过的最大值，而min表示不能超过的最小值，而 setp表示按阶梯性递增递减。
代码如下
<input name=”nu</p><p style='height:0px;padding:0;overflow:hidden'>10、mber1” type=”25” min=”10” max=”100” step=”5”>
11.range 属性
Range 属性的 input元素表示的是只允许一段范围内的文本框，它具有min,max,的属性同样它也具有step属性
代码如下：
<input name=” range1” type=”range1” value=”25” min=”0” max=”100” step=:5”>
12.search 类型
Serach类型的input 元素是一种专门输入搜索关键词文本框，serach类型与text类型仅仅在外观上有区别、
13.tel类型
Tel类型的input 元素涉及为专门输入电话号码的专用文本框,它没有专门的校验规则，不强制输入数字
14.color
Color类型额input元素，提供一个颜色选择器。

，
</p>
</div>
</div>

<span id="LabelScript"></span>
<script src="https://m.zixin.com.cn/JS/bootstrap-collapse.js"></script>

<div class="siteInner_bg" style="margin-top: 40px; border: solid 0px red; margin-left: 0px; margin-right: 0px;">

<div>
<div style=" margin: auto; overflow:hidden;
text-align: center;">
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?6e2a21bc68316db308b5fdc9a0d11f2e";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
</div>
<div style=" height:80px; margin: auto; overflow:hidden;
text-align: center;">

<a target="_blank"
href='https://m.zixin.com.cn/ADMiddle.aspx?t=92ULKnFRa/o='>

<img src="https://www.zixin.com.cn/FileUpload/Images/81dd1a0b-02e3-435a-aa37-fbfccae9a83d.gif" width="100%" height='80'
alt="移动网页_全站_页脚广告1" />

</a>
</div> </div>
<div class="siteInner">
<p style="white-space: normal; text-align: center;"><a href="https://www.zixin.com.cn/h-33.html" target="_blank" title="关于我们" textvalue="关于我们"><span style="text-align: center;">关于我们</span></a> <span style="text-align: center;">     </span><a href="https://www.zixin.com.cn/h-37.html" target="_blank" title="便捷服务" textvalue="便捷服务">便捷服务</a>  <span style="text-align: center;">     </span><a href="https://ai.zixin.com.cn/" target="_blank" title="自信AI" textvalue="自信AI">自信AI</a> <span style="text-align: center;">      </span><a href="https://gpt.zixin.com.cn/" target="_blank" title="AI导航" textvalue="AI导航">AI导航</a>        <a href="https://www.zixin.com.cn/info/266.html" target="_blank" title="抽奖活动" textvalue="抽奖活动">抽奖活动</a></p><p style="white-space: normal; text-align: center;"><span style="color: rgb(153, 153, 153); font-family: 微软雅黑, 宋体, Arial; font-size: 12px; text-align: center; background-color: rgb(248, 248, 248);"></span><span style="text-align: center;">©2010-2026 宁波自信网络信息技术有限公司 </span><span style="text-align: center;"> </span><span style="text-align: center;">版权所有</span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;"><span style="text-align: center;">客服电话：<span style="text-wrap: wrap;">0574-28810668</span>  <span style="text-align: center;">投诉</span>电话：[phone]</span></span></span></span></p><p style="white-space: normal; text-align: center;"><span style="text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-6/9/6379033271755225397249870.png" title="gongan.png" alt="gongan.png"/></span><a href="http://www.beian.gov.cn/portal/index.do" target="_blank" textvalue="浙公网安备33021202000488号">浙公网安备33021202000488号</a>   </p><p style="white-space: normal; text-align: center;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/4/6379256265460890686562879.png" title="icp.png" alt="icp.png"/><a href="http://beian.miit.gov.cn/" target="_blank" textvalue="浙ICP备2021020529号-1">浙ICP备2021020529号-1</a> <span style="text-align: center;"> | </span> <a href="https://dxzhgl.miit.gov.cn/dxxzsp/xkz/xkzgl/resource/qiyesearch.jsp?num=%E5%AE%81%E6%B3%A2%E8%87%AA%E4%BF%A1%E7%BD%91%E7%BB%9C%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8&type=xuke" target="_blank" title="浙B2-20240490" textvalue="浙B2-20240490">浙B2-20240490</a><span style="text-align: center;">  </span></p><p style="white-space: normal; text-align: left;"><span style="text-align: center; font-family: 楷体, 楷体_GB2312, SimKai; font-size: 20px;">关注我们</span><span style="text-align: center;"> ：<a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/9/6379298231429297878483475.png" title="微信公众号" alt="微信公众号"/></a></span><span style="text-align: center;">    <a href="https://www.zixin.com.cn/news/113.html" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497521.png" title="抖音" alt="抖音"/></a>    <a href="https://weibo.com/zixinnetwork" target="_blank" style="color: rgb(217, 83, 79); text-align: center; white-space: normal;"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257739400583672497523.png" title="微博" alt="微博"/></a>    <a href="https://zixinnetwork.lofter.com/" target="_blank"><img src="https://www.zixin.com.cn/FileUpload/ueditor_s/upload/2022-7/5/6379257740834991205479163.png" title="LOFTER" alt="LOFTER"/></a> </span></p>

</div>
</div>
<div style="position: fixed; bottom: 100px; right: 15px; z-index: 100000000000000000;">
<a href="https://work.weixin.qq.com/kfid/kfcb5dffb1386b26424"><img src="https://www.zixin.com.cn/FileUpload/Images/c1022425-c464-4203-b6dc-db237b2252d5.gif" style="width:36px" alt="客服"/></a>
</div>

<div class="trnav clearfix" id="navcontent" style="display: none; background-color:#3a71b1; ">
<div class="trlogoside" id="navlogo" style="display: none;">
<a href="https://m.zixin.com.cn/" title="咨信网"><img src="https://www.zixin.com.cn/FileUpload/Images/c4280cd2-fe62-449e-aeca-027ef73439f5.png" alt="咨信网"></a>
<div class="trnavclose" id="navclose">
<span></span>
</div>
</div>
<div class="navcontainer">
<div class="row">
<ul class="nav navbar-nav trnavul headercontent" id="navigation" style="margin:20px 0 0px;">

<li><a target="_parent"href="https://m.zixin.com.cn/login.aspx">登录</a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/">首页 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/booklist-0.html">分类 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/infos.html">学堂 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/newslist.html">公告 </a></li>

<li><a target="_parent"href="https://m.zixin.com.cn/h-0.html">帮助中心 </a></li>

</ul>
</div>
</div>
</div>
<script type="text/javascript">
function stopPropagation(e) {
var ev = e || window.event;
if (ev.stopPropagation) {
ev.stopPropagation();
}
else if (window.event) {
window.event.cancelBubble = true;//兼容IE
}
}
$("#navmore").click(function (e) {
$("#navcontent").show();
$("#navlogo").show();
stopPropagation(e);
var navcontentwidth = $("#navcontent").width();
$('#navcontent').css({ 'right': '-' + navcontentwidth + 'px' });
$("#navcontent").show().animate({ "right": 0 }, 300);
});
$(document).bind('click', function () {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
$("#navcontent").click(function (e) {
stopPropagation(e);
});
$("#navclose").click(function (e) {
var navcontentwidth = $("#navcontent").width();
$("#navcontent").animate({ 'right': '-' + navcontentwidth + 'px' }, 300, function () { $("#navcontent").hide(); });
$("#navlogo").fadeOut(300);
});
</script>

<script>
function BaseShare(title, desc, imgUrl) {
var link = "https://m.zixin.com.cn/docdown/7390766.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx49d3b0cb6fb382c4', // 必填，公众号的唯一标识
timestamp: '1775733027', // 必填，生成签名的时间戳
nonceStr: 'C74D97B01EAE257E44AA9D5BADE97BAF', // 必填，生成签名的随机串
signature: 'd1d896b66564e0c3c30a40249bf6fea81bfc1a46',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
function BaseShare(title, desc, imgUrl, link) {
if (link=="")
link = "https://m.zixin.com.cn/docdown/7390766.html";
if (wx) {
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: 'wx49d3b0cb6fb382c4', // 必填，公众号的唯一标识
timestamp: '1775733027', // 必填，生成签名的时间戳
nonceStr: 'C74D97B01EAE257E44AA9D5BADE97BAF', // 必填，生成签名的随机串
signature: 'd1d896b66564e0c3c30a40249bf6fea81bfc1a46',// 必填，签名，见附录1
jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData', 'hideMenuItems'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
//openTagList: ["wx-open-launch-weapp"]//H5打开小程序
});
wx.ready(function () { //需在用户可能点击分享按钮前就先调用
wx.hideMenuItems({// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
menuList: ['menuItem:share:qq', 'menuItem:favorite', 'menuItem:share:QZone', 'menuItem:share:email', 'menuItem:originPage', 'menuItem:readMode', 'menuItem:delete', 'menuItem:editTag', 'menuItem:share:facebook', 'menuItem:share:weiboApp', 'menuItem:share:brand']
});
var shareData = {
title: title, // 分享标题
desc: desc,//这里请特别注意是要去除html
link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: imgUrl, // 分享图标
};
wx.updateAppMessageShareData(shareData);//1.4 分享到朋友
wx.updateTimelineShareData(shareData);//1.4分享到朋友圈
});
}
}
</script>

<!--footer-->
<footer class="footer">

<a target="_parent" class="footer-item" href="https://m.zixin.com.cn/">
<img class="footer-item-img" src="/Master/img/tabbar/home.png" alt="首页" />
<div class="footer-item-txt ">首页</div>
</a>
<a target="_parent" class="footer-item" id="classify" href="https://m.zixin.com.cn/bookmap.html">
<img class="footer-item-img" src="/Master/img/tabbar/category.png" alt="分类" />
<div class="footer-item-txt ">分类</div>
</a>
<a target="_parent" class="footer-item" id="case" href="https://m.zixin.com.cn/zhuantilist-.html">
<img class="footer-item-img" src="/Master/img/tabbar/case.png" alt="专题" />
<div class="footer-item-txt ">专题</div>
</a>
<a target="_parent" class="footer-item" id="my" href="https://m.zixin.com.cn/UserDefault.aspx">
<img class="footer-item-img" src="/Master/img/tabbar/my.png" alt="我的" />
<div class="footer-item-txt ">我的</div>
</a>
</footer>

<script>
$(document).ready(function () {
var arr = $(".headercontent");
for (var i = 0; i < arr.length; i++) {
(function (index) {
var url = "https://m.zixin.com.cn/header.aspx";
$.get(url + "?tp=0&t=" + (new Date()).valueOf(), function (d) {
try {
arr.eq(index).empty().html(d);
} catch (e) { }
try {
arr.html(d);
} catch (e) { }
});
})(i);
}
});
</script>

<script src="https://m.zixin.com.cn/js/jquery.lazyload.js"></script>
<script charset="utf-8">
$("img.lazys").lazyload({
threshold: 200,
effect: "fadeIn"
});
</script>
</body>
</html>