制作表单
2019-05-23 18:43
134 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_41767962/article/details/90481967
<!DOCTYPE html> <html> <head> <title>表单美化</title> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <style type="text/css"> #input_name{ width:200px; height:20px; border-radius:2px; box-shadow: 0px 0px 3px #ccc, 0 10px 15px #eee inset; border:1px solid #f0f0f0; } #input_name:focus{ width:200px; transition:width 1s linear 0s; border-color:1px solid #555; outline:none;/*这个是去去除本省存在的边框颜色*/ background: #fff url(images/red_asterisk.png) no-repeat 98% center; box-shadow: 0 0 3px #aaa; padding-right:70px; line-height:20px; position:relative; padding-right:70px; } #input_name:required:valid{/*当输入有效的时候,触发*/ background: #fff url(images/valid.png) no-repeat 98% center;box-shadow: 0 0 5px #5cd053;border-color: #28921f; } #input_name:focus:invalid {background: #fff url(images/invalid.png) no-repeat 98% center;box-shadow: 0 0 5px #d45252;border-color: #b03535;}/*当输入无效的时候,不触发*/ #input_name:required:valid + .input_text{ background-color:green; } #input_name:focus + .input_text{ display:inline-block; color:"#fff"; text-align:center; } .input_text { background: #d45252; border-radius: 3px 3px 3px 3px; color: white; margin-left:8px; padding: 1px 6px; z-index: 999; position: absolute; display: none; } .input_text::before { content: "\25C0";/*带小箭头的*/ color:#d45252; position: absolute; top:1px; left:-6px; } #input_name:focus + .input_text {display: inline;} #input_name:required:valid + .input_text {background: #28921f;} #input_name:required:valid + .input_text::before {color:#28921f;} </style> <script type="text/javascript"> $(function(){ $("#input_name").bind("blur",function(){ var value_valid=this.value; if(value_valid.length<6) { this.value=""; } else if(value_valid.length>18) { this.value=""; } else if(((value_valid.substring(0,1)>='a')&&(value_valid.substring(0,1)<='z'))||((value_valid.substring(0,1)>='A')&&(value_valid.substring(0,1)<='Z'))) { return } else { this.value=""; } }) }) </script> </head> <body> <div class="form_table"> <form action="" method="" id="frmV"> <ul> <span>姓名</span> <input type="text" id="input_name" required placeholder="name" name="username" value=""/><!----> <span class="input_text">正确格式为:6~18个字符,可使用字母、数字、下划线,需以字母开头</span> </ul> </form> </div> </body> </html>
显示箭头
<a href="javascript:;" class="arrow" id="prev"><</a> <a href="javascript:;" class="arrow" id="next">></a> //这段话表示javascript:;防止产生链接
相关文章推荐
- 用css制作表单并体验亲和力
- 制作一个表单的步骤
- 表单的制作
- 表单标签制作一般的登录界面
- 使用Adobe Acrobat Pro制作带有表单的pdf
- 用VFP表单制作帮助文件
- DedeCMS 5.7 用自定义表单制作自助挂号平台
- jsp 制作一个登录注册表单
- 最简单的jsp表单制作
- jquery插件制作 -- 3.表单验证
- 网站制作笔记-bootstrap可视化布局,表单生成工具,快速制作网页原型
- Sharepoint 轻量化应用之初试面谈表单制作!
- 【小练习】“表单”制作及答案
- 使用Flask form 制作注册表单,并使用bootstrap美化
- (MFC)Vs2010制作Visual Studio风格的停靠侧栏窗口(CDockablePane里嵌套FormView表单视图)
- 制作一个简单的表单验证
- HTML5风采——制作表单
- ajax制作表单验证示例
- 使用selenium库制作自动提交表单的脚本
- JSP制作表单