html5学习(表单新属性)

最新推荐文章于 2023-08-15 13:06:59 发布

程宇寒

最新推荐文章于 2023-08-15 13:06:59 发布

阅读量181

点赞数 1

文章标签： html html5 前端开发表单前端

本文链接：https://blog.csdn.net/czh500/article/details/111771012

版权

温故知新，以下是我以前写的html5的案例，从电脑中翻出来了，算是知识复习和回顾吧！

有图有代码！

以下是源码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>html5学习(表单新属性)</title>
<link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
<style type="text/css">
input[type=range]::-moz-range-progress {
    background: linear-gradient(to right, #059CFA, white 100%, white);
    height: 13px;    
    border-radius: 10px;
}
</style>
</head>
<body style="background-color: #CCE8CF;">
<font style="font-size: 20px;">
请使用最新版本的浏览器测试html5的效果,注意：各个浏览器的显示效果可能还不太一样
</font>
<br />
<label for="testUrl">点击我，焦点会跳到url类型的控件上(测试)</label>
<form action="" id="testForm">
可以在html标签中直接写正则表达式<br />
pattern属性(正则验证)正则表达式:
<input type="text" required="required" placeholder="请输入正确的邮编" pattern="^[1-9]\d{5}$" />
<br /><br />
email类型:<input type="email" value="jiangxi" />
<br /><br />
email类型:<input type="email" value="jiangxi@qq.com" />
<br /><br />
url类型:<input id="testUrl" type="url" value="blog.csdn.net/czh500" />
<br /><br />
url类型:<input type="url" value="https://blog.csdn.net/czh500" />
<br /><br />
time类型:<input type="time" />
<br /><br />
color类型:<input type="color" style="width: 50px;">
<br /><br />
滑动条效果，
range属性:<input type="range" max="50" min="1" step="5" />
<br /><br />
<input type="submit" value="提交(该提交按钮是写在form标签内的)" /> 
</form>
<br />
在外部提交form表单
<br />
<input type="submit" form="testForm" value="提交走你(该提交按钮是写在form标签外的)" /> 
</body>
</html>

完！

程宇寒

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
html5学习(表单新属性)

温故知新，以下是我以前写的html5的案例，从电脑中翻出来了，算是知识复习和回顾吧！有图有代码！以下是源码<!DOCTYPE html><html><head><meta charset="UTF-8"><title>html5学习(表单新属性)</title><link rel="stylesheet" type="text/css" href="../css/inputAndDiv.cs
复制链接

扫一扫