html表单登陆模板
HTML+CSS实现动态背景登录页面
HTML+CSS实现动态背景登录页⾯1. 实现背景图⽚的动态变换⾸先在HTML页⾯body板块中，添加图⽚div，代码如下：<body><div class="bgk"><div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/1.jpg')"></div><div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/2.jpg')"></div><div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/3.jpg')"></div><div class="bgk-image" style="background-image: url('${pageContext.request.contextPath}/img/4.jpg')"></div></body>再对图⽚进⾏css设计。
你要对图⽚进⾏⼤⼩定位，那么以下代码肯定要⾸先编写：`.bgk {margin: auto;position: absolute;width: 1366px;height: 672px;overflow: hidden; /*溢出部分隐藏*/}`位置设定ok以后，那么再对⾥⾯的图⽚进⾏设置。
用python模拟登录（解析cookie+解析html+表单提交+验证码识别+excel读。。。
⽤python模拟登录（解析cookie+解析html+表单提交+验证码识别+excel读。
⽼婆⼤⼈每个⽉都要上⼀个⽹站上去查数据，然后做报表。
为了减轻⽼婆⼤⼈的⼯作压⼒，所以我决定做个⼩程序，减轻我⽼婆的⼯作量。
准备⼯作1.tesseract-ocr这个⼯具⽤来识别验证码，⾮常好⽤。
ubuntu上安装：sudo apt-get install tesseract-ocr⾮常简单。
2.pytesseract和PIL(pillow)pytesseract⽤来在python中调⽤tesseract-ocr，PIL(pillow)⽤来加载图⽚，安装⽅法如下：pip3 install pytesseractpip3 install pillow也⾮常简单。
如果安装pillow的时候报如下错误:ValueError: zlib is required unless explicitly disabled using --disable-zlib, aborting那么我们更新⼀下pip即可sudo pip3 install --upgrade pip⼀切准备就绪。
分析⽹站预览图：看上去很low啊...⼼疼我⽼婆....看来我必须快点完成这个⼩程序了！经过简单的分析可以得到关键信息：3.表单的格式：1 {2 '__LASTFOCUS' : '',3 '__EVENTTARGET' : 'ctl00$ContentPlaceHolder1$Login1$btnLogin',4 '__EVENTARGUMENT' : '',5 '__VIEWSTATE' : __VIEWSTATE,6 '__EVENTVALIDATION' : __EVENTVALIDATION,7 'ctl00$ContentPlaceHolder1$Login1$txtUsr' : ⽤户名,8 'ctl00$ContentPlaceHolder1$Login1$txtPwd' : ⽤户密码,9 'ctl00$ContentPlaceHolder1$Login1$txtYZM' : 验证码10 }其中4、5、6⾏是访问⾸页的时候，在⾸页的源代码中返回的参数但__EVENTARGUMENT常年为空，所以⼲脆直接写死空字符串即可；__VIEWSTATE和__EVENTVALIDATION则需要对html进⾏解析。
HTML网页版用户登录信息录入页面
用户登录信息录入页面<html><head><title>登录页面</title><script src="js.js"></script><script type="text/javascript">function checkInputs(){var nameInput = document.getElementById("name");var nameValue = nameInput.value;if(nameValue==null || nameValue.replace(/\s+/g,"")==""){alert("对不起,您没有输入姓名!");nameInput.focus();return false;}var passwordInput1 = document.getElementById("password1");var passwordValue1 = passwordInput1.value;var passwordInput2 = document.getElementById("password2");var passwordValue2 = passwordInput2.value;if(passwordValue1==null || passwordValue1.replace(/\s+/g,"")==""){alert("对不起,您没有输入密码!");passwordInput1.focus();return false;}else if(passwordValue2!=passwordValue1){alert("对不起,您输入密码有误!");passwordInput2.focus();return false;}var emailInput = document.getElementById("email");var myreg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;if(!myreg.test(emailInput.value)){alert('提示\n\n请输入有效的E_mail！');emailInput.focus();return false;}var sidInput = document.getElementById("sid");var iSum=0,info="";var aCity={11:"北京",12:"天津",13:"河北",14:"山西",15:"内蒙古",21:"辽宁",22:"吉林",23:"黑龙江",31:"上海",32:"江苏",33:"浙江",34:"安徽",35:"福建",36:"江西",37:"山东",41:"河南",42:"湖北",43:"湖南",44:"广东",45:"广西",46:"海南",50:"重庆",51:"四川",52:"贵州",53:"云南",54:"西藏",61:"陕西",62:"甘肃",63:"青海",64:"宁夏",65:"新疆",71:"台湾",81:"香港",82:"澳门",91:"国外"};if(sidInput.length!=15 && sidInput.length!=18)alert('提示\n\n请输入有效的身份证！');emailInput.focus();return false;if(!/\d{15}|(\d{17}(\d|x))$/i.test(sidInput))alert('提示\n\n请输入有效的身份证！');emailInput.focus();return false;sidInput=sidInput.replace(/x$/i,"a");if(aCity[parseInt(sidInput.substr(0,2))]==null)alert('提示\n\n请输入有效的身份证！');emailInput.focus();return false;if(sidInput.length==15){sidInput = sidInput.substr(0,6)+"19"+sidInput.substr(6,14);}sBirthday=sidInput.substr(6,4)+"-"+Number(sidInput.substr(10,2))+"-"+Number(sidInputr.substr( 12,2));var d=new Date(sBirthday.replace(/-/g,"/")) ;if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))alert('提示\n\n请输入有效的身份证！');emailInput.focus();return false;if(sidInput.length==18){for(var i = 17;i>=0;i--) iSum += (Math.pow(2,i) % 11) * parseInt(sidInput.charAt(17 - i),11) ;if(iSum%11!=1)alert('提示\n\n请输入有效的身份证！');emailInput.focus(); return false;}var cityInput = document.getElementById("citySelect");var cityValue = cityInput.value;if(cityValue=="xuanze"){alert('提示\n\n请选择你的籍贯！');cityInput.focus();return false;}return true;}</script></head><body style="background:#98FB98"><center><form id="form" action="jieguo.html" method="get" onSubmit="return checkInputs()"> <caption><font color="blue" size="5">用户注册</font></caption><br /><table border="0"><tr><th>姓名:</th><td><input type="text" id="name" name="name"/></td></tr><tr><th>密码:</th><td><input type="password" id="password1" name="password"/></td></tr><tr><th>确认密码:</th><td><input type="password" id="password2" name="password2"/></td></tr><tr><th>邮箱:</th><td><input type="text" id="email" name="email"/></td></tr><tr><th>身份证:</th><td><input type="text" id="sid" name="sid"/></td></tr><tr><tr><th>性别:</th><td><input type="radio" name="sex" value="male" /> 男<input type="radio" name="sex" value="female" /> 女</td></tr><tr><th>学历:</th><td><input type="radio" name="degree" value="dazhuan" />大专<input type="radio" name="degree" value="benke" /> 本科<input type="radio" name="degree" value="shuoshi" /> 硕士<input type="radio" name="degree" value="boshi" /> 博士</td></tr><tr><th>籍贯:</th><td><select name="city" id="citySelect"><option value="xz" selected="selected">--请选择--</option><option value="js">江苏</option><option value="zj">浙江</option><option value="gz">广州</option></select></td></tr><tr><tr><th rowspan="1">爱好:</th><td>篮球<input type="checkbox" name="basketball">乒乓球<input type="checkbox" name="pingpang">足球<input type="checkbox" name="football"><br/>看书<input type="checkbox" name="read">上网<input type="checkbox" name="online">玩游戏<input type="checkbox" name="game"></td></tr><tr><th>自我评价:</th><td><textarea rows="10" cols="30" s></textarea></td></tr><tr><td colspan="2" align="center"><input type="submit" value="登录"/> <input type="reset" value="取消"/></td></tr></table></form></center></body></html>结果页面<html><head><title>我的第一个html页面</title> </head><body><center>结果页面</center></body></html>。
HTML表单实例.ppt
• 图象和文字的对齐 <img align=#> #=top, middle, bottom
<img src=URL align=right>My Face!<br> It is always<br> smiling.<br> Hahaha....<br>
My Face! It is always smiling. Hahaha....
#= us-ascii, iso-8859-1, x-mac-roman, iso-8859-2, x-mac-ce, iso-2022-jp, x-sjis, x-euc-jp, euc-kr, iso-2022-kr, gb2312, gb_2312-80, x-euc-tw, x-cns11643-1, x-cns11643-2, big5
华师大软 件学院
2. HTML标签&实例
毛宏燕
华东师范大学软件学院
1
Steps
• HTML简介 • HTML标记 • 表单（FORM）
2
如何利用BI系统FineBI进行 Iframe与表单方式的单点登录
如何利用BI系统FineBI进行 Iframe与表单方式的单点登录1． iframe方式单点登录在OA系统的登录界面的js中将BI的用户权限验证地址以iframe的方式嵌入，然后再在iframe里面触发表单登录事件，进行判断，验证成功即实现登录页面的跳转。
这即是iframe单点登录的原理。
其触发方式同“ajex方式单点登录”一致，其初始引用代码也相同。
如下：1.<html>2. <head>3. <script type="text/javascript" src="ReportServer?op=emb&resource=finereport.js"></script>4. <script type="text/javascript">5. function doSubmit() { }用户认证iframe在OA系统的登录界面上，doSubmit获取输入的'username'、'password'后，创建iframe，将报表验证用户名密码的认证地址指向此iframe的src。
其代码为：1.var username = FR.cjkEncode(document.getElementById("username").value);//获取输入的用户名2. var password = FR.cjkEncode(document.getElementById("password").value); //获取输入的参数3. var scr = document.createElement("iframe"); //创建iframe4. scr.src = " http://localhost:37799/WebReport/ReportServer?op=fs_load&cmd=sso&fr_username=" + username + "&fr_password=" + password; //将报表验证用户名密码的地址指向此iframe认证判断因为onload事件在不同的浏览器上的实现方式不同，因此在验证登录时要分别进行处理，并将iframe嵌入到head中；验证代码如下：1.if (scr.attachEvent){ //判断是否为ie浏览器2. scr.attachEvent("onload", function(){ //如果为ie浏览器则页面加载完成后立即执行3. var f = document.getElementById("login"); /*跳转到指定登录成功页面，index.jsp4. f.submit(); */5. });6. } else {7. scr.onload = function(){ //其他浏览器则重新加载onload事件8. var f = document.getElementById("login"); /*跳转到指定登录成功页面,index.jsp9. f.submit(); */10. };11.}12. document.getElementsByTagName("head")[0].appendChild(scr); //将iframe标签嵌入到head中13.}设置触发方式同“ajex方式单点登录”一致，此处不再进行赘述。
网页登陆代码
height:30px;
border-bottom-color:#000;
border-bottom-style:groove;
border-bottom-width:2px;
line-height:30px;
font-weight:bold;
background-color:#999;
<br/><br/>
<input type="reset" value="重置" style="width:100px height:30px; background-cloor"#666; border-style:hidden;"/>
<input type="submit" value="登录" style="width:100px height:30px; background-cloor"#666; border-style:hidden;"/>
<br/>
用户:<input type="text" style="width:200px height:30px; background-cloor"#999; border-style:hidden;"/>
<br/><br/>
密码:<input type="password" style="width:200px height:30px; background-cloor"#999; border-style:hidden;"/>
html5注册页面示例代码
代码如下:<!doctype html><html><head><title>register.html</title><meta http-equiv=keywords content=keyword1,keyword2,keyword3> <meta http-equiv=description content=this is my page><meta http-equiv=content-type content=text/html; charset=utf-8><link rel=shortcut icon href=favicon.ico /><link rel=stylesheet type=text/css href=css/register.css /><script src=js/checkbox.js type=text/javascript></script><script type=text/javascript>function play(){document.getelementbyid(menu_item).style.display = ;}function noplay(){document.getelementbyid(menu_item).style.display = none;}function passwd(){var pass = document.getelementbyid(password).value;var tip = document.getelementbyid(tip);if (pass.length < 4) {document.getelementbyid(meter).value = pass.length;tip.innerhtml = 差;}elseif (pass.length <= 8) {document.getelementbyid(meter).value = pass.length;tip.innerhtml = 中;}else {document.getelementbyid(meter).value = pass.length;tip.innerhtml = 高;}}</script></head><body><div id=3 style=position: relative; top: 100px; z-index: 3;><form id=f1 action=register.html method=post><table align=center cellspacing=0 class=table><td align=center>会员注册</td></tr><tr><td><table id=registertable border=0px align=center border=0px cellspacing=0 cellpadding=5px><tr><tr><td align=right>员工编号：</td><td align=left><input type=text name=username placeholder=用户名required/></td></tr><tr><td align=right>密码：</td><td align=left><input type=password name=password id=password placeholder=密码required onkeyup=passwd()/><meter min=1 max=10 low=5 high=8 value=0 id=meter></meter><span id=tip></span></td></tr><tr><td align=right>密码确认：</td><td align=left><input type=password name=password2 placeholder=确认密码required/></td></tr><tr><td align=right>生日：</td><input type=date name=borthday /></td></tr><tr><td align=right>性别：</td><td align=left><input type=radio name=gender value=0 checked/>男<input type=radio name=gender value=1/>女</td></tr><tr><td align=right>邮箱：</td><td align=left><input type=email name=email placeholder=邮箱id=email required/></td></tr><tr><td align=right>手机：</td><td align=left><input type=tel pattern=[0-9]{11} id=p name=phone placeholder=请输入11位数字/> </td></tr><tr><td align=right>地址：</td><td align=left><input type=text name=address placeholder=地址list=l/><datalist id=l><option value=sh>上海</option><option value=bj>北京</option><option value=js>江苏</option><option value=zz>郑州</option><option value=sz>深圳</option></datalist></td></tr><tr><td align=right>个人网页：</td><td align=left><input type=url name=page placeholder=主页网址/></td></tr><tr><td align=right>起床时间：</td><td align=left><input type=time name=bed onblur=pro()/></td></tr><tr><td align=right>头像：</td><td align=left><input type=file id=f accept=image/jpeg onchange=show()/><span><img id=img src= width=60 height=60 /></span><script>function show(){var file = document.getelementbyid(f).files[0];var filereader = new filereader();filereader.readasdataurl(file);filereader.onload = function(){document.getelementbyid(img).src = filereader.result;}}</script></td></tr><tr><td colspan=2><details><p>允许注册<mark>许可证</mark>信息</p><summary>注册许可信息</summary></details></td></tr><tr><td align=right>验证码：</td><td valign=middle><input type=text name=captcha size=11 maxlength=4 title=输入右边的验证码/><span id=span></span><script>var span = document.getelementbyid(span);span.innerhtml=math.floor(math.random());</script></td></tr><tr height=60px><td align=center colspan=2><input type=button value=转到登录onclick=window.location.replace('login.html') id=btn1 onmousemove=changebgcolor('btn1') onmouseout=recoverbgcolor('btn1') class=submit /> <input type=submit accesskey=enter value=注册id=btn onmousemove=changebgcolor('btn') onmouseout=recoverbgcolor('btn'); class=submit formmethod=post/></td></tr></table></td></tr></table></form></div></body></html>代码如下:body {background-image: url(../images/bg.jpg);text-align: center;background-repeat: repeat-x;background-position: 0px 0px ;background-size：}.table {border: 1px solid #90bfff;width:810px;}tr {font-family: 微软雅黑;font-weight:800;color: #448ef3;}input{border: 1px solid #448ef3;color: #448ef3;font-weight:bold;font-family: 微软雅黑;height: 35px;line-height: 30px;border-radius:5px;}.submit {width: 150px;height: 40px;cursor :hand;font-size: 20px;color: #ffffff;background-color: #448ef3;border: 0px;}.thead {height: 40px; background : #90bfff;font-family: 微软雅黑;font-size: 30px;font-weight: 700;color: #ffffff;background: #90bfff;}#3{margin-bottom: 100px;}代码如下:function chkallclick(sonname, cballid){var arrson = document.getelementsbyname(sonname); var cball = document.getelementbyid(cballid);var tempstate=cball.checked;for(i=0;i<arrson.length;i++) {if(arrson[i].checked!=tempstate)arrson[i].click();}}function chksonclick(sonname, cballid) {var arrson = document.getelementsbyname(sonname);var cball = document.getelementbyid(cballid);for(var i=0; i<arrson.length; i++) {if(!arrson[i].checked) {cball.checked = false;return;}}cball.checked = true;}function chkoppclick(sonname){var arrson = document.getelementsbyname(sonname);for(i=0;i<arrson.length;i++) {arrson[i].click();}}function changebgcolor(btn){var btn = document.getelementbyid(btn);btn.style.backgroundcolor = #90bfff}function recoverbgcolor(btn){var btn = document.getelementbyid(btn);btn.style.backgroundcolor = #448ef3}------------------------------------------------上面文件的顺序是：register.html register.css checkbox..js -------------------------------------------------背景图片：bg.jpg。
HTML5表单之input类型-DatePickers（日期选择器）
<input type="date" name="start_time" value="" />
例2：month
<input type="month" name="start_time" value="" />
例3：week
<input type="week" name="start_time" value="" />
博客园 用户登录 代码改变世界 密码登录 短信登录 忘记登录用户名 忘记密码 记住我 登录 第三方登录/注册 没有账户, 立即注册
s（日期选择器）
HTML5 拥有多个可供选取日期和时间的新输入类型： 1. date：选取日、月、年 2. month：选取月、年 3. week：选取周和年 4. time：选取时间（小时和分钟） 5. datetime-local：选取时间、日、月、年（本地时间） 6. datetime：选取时间、日、月、年（在有些浏览器内失效，选用datetime-local）
例4：time
<input type="time" name="start_time" value="" />
例5：datetime-local
<input type="datetime-local" name="start_time" value="" />
一、（3）HTML表单与表格-综合应用
DTD TF
TF STF STF STF STF STF
</tr> <tr> <td>2.2</td> <td>2.3</td> </tr> </table>
注意事项：列的个数要一致 如果一个格子中没有内容，请尽量使用 （ 空格）补齐
1.3 常见问题 1.如果要完成跨行跨列，先做一个完整的表格。再一步一步的去完成跨行合并或跨列合并操作。 2.结构化后的表格需要去掉结构标签后,再做合并操作 3.注意需要合并的td起始位置,合并完成后必须清除同行或列多出来的td
<p>爱好： <input type="checkbox" name="hobbuy" value="唱歌" checked/>唱歌 <input type="checkbox" name="hobbuy" value="看书"/>看书 <input type="checkbox" name="hobbuy" value="学习"/>学习 <input type="checkbox" name="hobbuy" value="上网"/>上网
其它属性：
placeholder：定义输入框的提示文字 maxlength：设置文本框最多输入多少字符 readonly：只读(不可输入) disabled：禁用(不可输入) -> 不会提交这个表单元素的数据 checked：仅用于 radio/checkbox，作用是设置默认选中项
Bootstrap实现登录校验表单（带验证码）
Bootstrap实现登录校验表单（带验证码）这个登陆窗⼝是双登陆窗⼝的，对IE8及早期版本不⽀持，可以根据⾃⼰的开发语⾔更换，我这个是asp的，其中的引⽤⽂件可以在⽹络上⾃⾏下载，如找不到可以留下邮箱~！关键代码如下所⽰：<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>scm登陆界⾯</title><style type="text/css">body {background-color: #999;}</style><link rel="stylesheet" href="../bootstrap335/css/bootstrap.min.css"><link rel="stylesheet" href="../bootstrap335/css/bootstrapValidator.min.css"><script src="../bootstrap335/js/jquery-2.1.4.min.js"></script><script src="../bootstrap335/js/bootstrap.min.js"></script><script src="../bootstrap335/js/bootstrapValidator.min.js"></script><%Response.Buffer = TrueResponse.ExpiresAbsolute = Now() - 1Response.Expires = 0Response.CacheControl = "no-cache"%></head><body ><!--<nav class="navbar navbar-default navbar-fixed-top" role="navigation"><div class="container-fluid"><div class="navbar-header"><a class="navbar-brand" ui-sref=".">******系统 (ver 1.0.0 beta)</a></div><div class="collapse navbar-collapse" id="navbar-ex1-collapse"><ul class="nav navbar-nav navbar-right"><li class="small"><a href="" target="_blank">80s ©2015-2010</a></li></ul></div></div></nav>--><div class="col-lg-5 col-lg-offset-2"><div class="page-header" style="margin-top:5em;"><h2>******管理系统</h2></div></div><div class="col-md-offset-4 col-md-4" ><div class="panel panel-primary" style="margin-top:3em;" ><ul id="myTab" class="nav nav-tabs"><li class="active"><a href="#Prv" data-toggle="tab">供应商登陆</a></li><li><a href="#CPrv" data-toggle="tab">⽣产商登陆</a></li></ul><div id="myTabContent" class="tab-content"><div class="tab-pane fade in active" id="Prv"><div class="well well-sm " ><h3 class="panel-title">供应商登陆</h3></div><div class="panel-body"><form name="LoginG" id="LoginG" action="Admin_ChkLogin_G.asp" method="post" target="_parent" ><div class="form-group"><div class="input-group"><span class="input-group-addon">账号</span><input name="Username" type="text" class="form-control" placeholder="Username" ><!--<span class="help-block" id="UsernameMessage" /> --></div><br /></div><!-- /form-group--></div><!-- /form-group--><h5>请将如下计算结果填⼊⽂本框内：</h5><div class="form-group form-horizontal"><label class="col-lg-3 control-label " id="captchaOperation"></label><div class="col-lg-9"><input type="text" class="form-control " name="captcha" /></div></div><br /><br /> <br /><div class="form-group"><input class="btn btn-primary btn-block" type="submit" value="登 录" /></div></form></div><!-- /panel-body --></div><!-- tab-pane fade in active--><div class="tab-pane fade" id="CPrv"><div class="well well-sm"><h3 class="panel-title">⽣产商登陆</h3></div><div class="panel-body"><form name="LoginS" id="LoginS" action="Admin_ChkLogin_S.asp" method="post" target="_parent" > <div class="form-group"><div class="input-group"><span class="input-group-addon">账号</span><input name="Username2" type="text" class="form-control" placeholder="Username" ><!--<span class="help-block" id="UsernameMessage" /> --></div><br /></div><!-- /form-group--><div class="form-group"><div class="input-group"><span class="input-group-addon">密码</span><input name="Password2" type="Password" class="form-control" placeholder="Password"><!--<span class="help-block" id="PasswordMessage" /> --></div></div><!-- /form-group--><h5>请将如下计算结果填⼊⽂本框内：</h5><div class="form-group form-horizontal"><label class="col-lg-3 control-label " id="captchaOperation2"></label><div class="col-lg-9"><input type="text" class="form-control " name="captcha2" /></div></div><br /><br /> <br /><div class="form-group"><input class="btn btn-primary btn-block" type="submit" value="登 录" /></div></form></div><!-- /panel-body --></div><!-- tab-pane fade--></div><!--myTabContent--></div><script type="text/javascript">$(document).ready(function() {// Generate a simple captchafunction randomNumber(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);};function generateCaptcha() {$('#captchaOperation').html([randomNumber(1, 50), '+', randomNumber(1, 50), '='].join(' '));};generateCaptcha();$('#LoginG').bootstrapValidator({//message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {Username: {message: 'The username is not valid',validators: {max: 10,message: '供货商账号长度 5-10'},/*remote: {url: 'remote.php',message: 'The username is not available'},*/regexp: {regexp: /^[a-zA-Z0-9_\.]+$/,message: '只接受数字和字母 '}}},Password: {validators: {notEmpty: {message: '密码不能为空'}}},captcha: {validators: {callback: {message: '验证码错误',callback: function(value, validator) {var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]); return value == sum;}}}}}}).on('error.form.bv', function(e) {var $form = $(e.target),bootstrapValidator = $form.data('bootstrapValidator');if (!bootstrapValidator.isValidField('captcha')) {// The captcha is not valid// Regenerate the captchagenerateCaptcha();}});});</script><script type="text/javascript">$(document).ready(function() {// Generate a simple captchafunction randomNumber(min, max) {return Math.floor(Math.random() * (max - min + 1) + min);};function generateCaptcha() {$('#captchaOperation2').html([randomNumber(1, 50), '+', randomNumber(1, 50), '='].join(' ')); };generateCaptcha();$('#LoginS').bootstrapValidator({//message: 'This value is not valid',feedbackIcons: {valid: 'glyphicon glyphicon-ok',invalid: 'glyphicon glyphicon-remove',validating: 'glyphicon glyphicon-refresh'},fields: {Username2: {message: 'The username is not valid',validators: {notEmpty: {message: '供货商账户不能为空'},stringLength: {min: 5,url: 'remote.php',message: 'The username is not available'},*/regexp: {regexp: /^[a-zA-Z0-9_\.]+$/,message: '只接受数字和字母 '}}},Password2: {validators: {notEmpty: {message: '密码不能为空'}}},captcha2: {validators: {callback: {message: '验证码错误',callback: function(value, validator) {var items = $('#captchaOperation2').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]); return value == sum;}}}}}}).on('error.form.bv', function(e) {var $form = $(e.target),bootstrapValidator = $form.data('bootstrapValidator');if (!bootstrapValidator.isValidField('captcha')) {// The captcha is not valid// Regenerate the captchagenerateCaptcha();}});});</script></body></html>。
登录页面HTML+CSS+JS代码
网页效果截图：源码：HTML代码（login.html）<!DOCTYPE html><html><head lang="zh-CN"><title>表单登录页面</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1"><link href="login.css" rel="stylesheet" type="text/css"/><link href="dist/css/bootstrap.min.css" rel="stylesheet" type="text/css"/> </head><body><div class="form-box"><div class="welcom"><span>欢迎您的到来</span></div><div class="input-box"><form class="form-horizontal" role="form" action="/" method="POST" enctype="text/plain"><div class="form-group "><label for="username" class="control-label col-md-3">Username:</label><div class="col-md-9"><input type="text" class="form-control" id="username" placeholder="请输入用户名"/><label class="nameinfo"></label></div></div><div class="form-group"><label for="password" class="control-label col-md-3">Password:</label><div class="col-md-9"><input type="password" maxlength="10" class="form-control" id="password" placeholder="请输入密码"/><label class="passwordinfo"></label></div></div><div class="submit-button"><button type="button"><span>Login</span></button></div></form></div></div><script src="jquery.min.js"></script><script src="dist/js/bootstrap.min.js"></script><script type="text/javascript" src="login.js"></script><!-- noscript标签检查脚本是否被禁用--><noscript><div>脚本已被禁用了，〒_〒...</div></noscript></body></html>CSS代码（login.css）*{padding:0;margin:0;}body {/* overflow:scroll; */font-family:Georgia;color:#000;}.form-box {width:470px;height:296px;margin:100px auto;border:3px #ADFF2F solid;background-color:#C5FF6D;border-radius:8px;}.welcom {width:100%;height:52px;line-height:52px;text-align:center;font-size:30px;font-family:Microsoft YaHei;font-weight:bold;border-bottom:1px #ADFF2F solid; }.input-box {position:relative;width:100%;height:248px;padding-top:30px;}.form-group {width:100%;height:50px;line-height:50px;}.form-group label,.form-group input { display:block;height:40px;font-size:16px;}.submit-button button {position:absolute;top:190px;left:2%;width:96%;height:42px;line-height:42px;border-style:none;border:2px #75FF58 solid;border-radius:3px;background-color:#86FF6D;}.submit-button span {font-size:20px;font-weight:bold;}JS代码：（login.js）$(function(){//设定两个标志，判断是否满足提交的条件var ok1=false;var ok2=false;//设定键盘事件，回车换行$(".form-control").keydown(function(event){//判断是否是回车键if(event.which == '13'){if($(this).val().length == 0){}else{var currIndex = $(this).index(':input');$(':input:eq('+(currIndex+1)+')').focus();}}});// 验证用户名$('input[id="username"]').blur(function(){var nameform=$(this).val();// 验证是否输入用户名if($(this).val() == ""){$(".nameinfo").html("用户名不能为空！");$(".nameinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});}// 验证用户名是否大于六位else if($(this).val().length < 6){$(".nameinfo").html("用户名至少为6位！");$(".nameinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});}//验证用户名格式是否正确elseif(!nameform.match(/^[a-zA-Z][a-zA-Z0-9@]*$/)){$(".nameinfo").html("用户名格式不正确！");$(".nameinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});}else{$(".nameinfo").html("输入正确");$(".nameinfo").css({"color":"green","font-family":"KaiTi","font-size":"16px"});//验证通过，将标志位置为trueok1 = true;}});//验证密码$('input[id="password"]').blur(function(){if($(this).val() == "" ){$(".passwordinfo").html("密码不能为空！");$(".passwordinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});}else if($(this).val().length < 6){$(".passwordinfo").html("密码至少为6位！");$(".passwordinfo").css({"color":"red","font-family":"KaiTi","font-size":"16px"});}else{$(".passwordinfo").html("输入正确");$(".passwordinfo").css({"color":"green","font-family":"KaiTi","font-size":"16px"});ok2 = true;}});//输入不合法的情况下，获取焦点时清空错误输入$('input[id="username"]').focus(function(){if(!ok1){$('input[id="username"]').val("");}});$('input[id="password"]').focus(function(){if(!ok2){$('input[id="password"]').val("");}});//点击进行用户名后台验证，通过验证后实现页面跳转$(".submit-button button").click(function(){username=$("#username").val();password=$("#password").val();if(ok1 && ok2){//普通方式$.ajax({url:"/Login/ValidUser",type:"POST",dataType:"json",data:{username:"+username+",password:"+password+"},success:function(){window.location.href="menu.html";},error:function(){window.location.href="menu.html";}});//deferred模式// $.ajax("/Login/ValidUser",// {type:"post"},// {dataType:"json"},// {data:{username:"+username+",password:"+password+"}} // ).done(function(){window.location.href="menu.html";})// .fail(function(){window.location.href="menu.html";})}return false;//抑制了浏览器的默认点击行为});});。
HTML5+CSS3网页设计与制作实用教程单元4 表单应用与制作注册登录页面
【任务4-1-1】创建电脑版用户注册网页
4．在网页中插入表格 在网页040101.html 的表单域中插入一个9 行3 列的表格，该表格的id 设置为“table01”， “宽”设置为“700 像素”，“边框”设置为“1”，“填充”设置为“3”，“间距”设置为
“0”，“ 对齐”方式设置为“居中对齐”，对应的【属性】面板如图4-6 所示。
图4-9 单行文本域的“属性”设置
【任务4-1-1】创建电脑版用户注册网页
5．插入单行文本域
如果在文本框【属性】面板中的“类型”选项组中选择“密码”单选按钮，则文本框将 转换成密码框，密码框和文本框的设置完全一致，只是在浏览时，密码框中输入字符时，字符 将自动以符号“*”或“ · ”显示，文本内容被隐藏，从而起到保密作用。 在“密 码：*”行的第2 个单元格中和“再次输入密码：*”行的第2 个单元格中分别插 入1 个“单行文本域”，这两个文本框的类型为“密码”，“最多字符数”设置为“16”，名
【任务4-1-1】创建电脑版用户注册网页
表单域的属性设置完成后，其【属性】面板如图4-5 所示。
图4-5 表单域的属性设置
对应的HTML 代码如下所示：
<form action="register.aspx" method="post" name="form1" target="_blank" id="form1"> </form>
2．插入表格域 一个表单域插入到网页中，在编辑窗口中显示为一个红色虚线框，其他的表单对象必须要 放入这个框内才能起作用。如果看不见插入到页面中的标记表单域的红色虚线区域，则可以选
择菜单命令【查看】→【可视化助理】→【不可见元素】，使红色虚线可见，如图4-4 所示。
html 表单表格模板
bordercolor:设置边框的颜色(ie9以下有效，FF,谷歌，opera都有效)
eg:map.html
4】居中标签:就是将某些内容强制居中一般很少人使用
<center>
居中的内容
</center>
eg:
<center>
我是老大，你认为呢！
</center>
表格
eg:map.html
5】table标签：
1、数据的显示
2、简单的页面布局（重点）
格式:
Table tr td
<table>
i: i,ii,iii,iv,v....
如果type的值不能被识别，那么列表序列号会显示为1,2,3,4,5……
Eg:list.html
无序列表:每个列表项的前面都有一个特定符号,这样的列表
格式:
<ul >
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
</ul>
Type：circle空心圆
列表、表单、表格
HTML的剩余标签
1】列表标签:
有序列表:每个列表项的前面都有个有序的序列号，这样列表
<ol >
<li>列表项内容</li>
<li>列表项内容</li>
<li>列表项内容</li>
</ol>
type:设置列表项序列号的样式
1：1,2,3,4,5..
html的两种提交按钮submit和button
html的两种提交按钮submit和buttonhtml按钮有两种：<input type="button" value="登录" onclick="login()"/>和<button onclick="login()">登录</button>这两种在页⾯上看起来好像⼀样没什么区别，但是这两种是有区别的。
1，如果在<form id="loginForm" name="loginForm" action="<%=path%>/hdlogin/login.action" method="post"></form>标签中，使⽤<input type="button" value="登录" onclick="login()"/>，要想提交form，你必须写成<input type="submit" value="登录" onclick="login()"/>，或者document.loginForm.submit();否则form是不会提交的。
2，如果在form中使⽤<button onclick="login()">登录</button>只要点击就会提交。
<button type="submit" value="登录" onclick="login()"/>。
今天在使⽤<button></button>时，我⼜在js控制表单提交，结果这个action总是莫名其妙的⾛两次！根源就是表单提交了两次，⼀次是<button></button>，⼀次是document.loginForm.submit();这个错误很隐蔽，⼤家以后要注意。
前端开发实训案例实现一个响应式登录页面
前端开发实训案例实现一个响应式登录页面在前端开发过程中，响应式设计是一项非常重要的技能。
在本次实训案例中，我们将实现一个响应式的登录页面，以适应不同尺寸的设备，提供更好的用户体验。
页面结构与HTML布局首先，我们需要创建一个HTML文件，并设置合适的语言和字符编码。
在文件的头部，我们可以使用一些meta标签来指定视口，以确保页面在不同设备上显示正常。
接下来，我们可以使用HTML标签建立页面的基本结构。
通常，一个登录页面包含一个表单和输入字段，以及一个提交按钮。
我们可以使用HTML的form元素来创建表单，并使用input元素来添加输入字段。
为了实现响应式布局，我们可以使用HTML的div元素来创建容器，以便对页面元素进行布局。
样式与CSS布局在实现响应式布局之前，我们需要先设置一些基本的样式。
我们可以使用CSS来为页面元素添加样式，使其符合设计要求。
为了方便管理样式，我们可以首先为整个页面指定一个样式表。
然后，我们可以使用CSS选择器来选择页面中的元素，并为其设置样式属性。
通过使用媒体查询，我们可以根据不同的设备宽度来应用不同的样式。
例如，我们可以为较小的设备设置媒体查询，并使用CSS布局来适应不同的屏幕尺寸。
响应式设计技巧在实现响应式登录页面时，我们需要考虑以下几个方面：1. 自适应布局：使用CSS的布局技巧，使页面元素能够随页面大小的变化而自动调整位置和大小。
2. 弹性图片：使用CSS的max-width属性，使图片在不同设备上保持相应的比例，并适应页面的布局。
3. 媒体查询：根据不同的设备尺寸，使用媒体查询来应用不同的样式。
例如，当页面宽度小于某个阈值时，我们可以隐藏某些元素或者调整字体大小。
4. 视口设置：使用meta标签指定视口，以确保页面在不同设备上显示正常。
设置视口可以使页面自动适应设备宽度，并禁用缩放功能。
总结通过本次实训案例，我们学习了如何实现一个响应式的登录页面。
通过合理的HTML结构和CSS布局，我们能够为用户提供一致的优质体验，无论他们使用的是桌面设备、平板还是手机。
毕业论文__设计用户登录界面
毕业论文设计用户注册页面在之前的章节中，已经介绍了用户登录界面的设计，事实上在用户登录网站之前，往往还需要访问用户注册的页面，注册为网站的会员。
使用Dreamweaver的文本区域表单组件和菜单/列表表单组件，以及之前介绍的文本字段组件和按钮组件，可以方便地制作各种用户注册的页面，如图6-36所示。
图6-36 用户注册页面1 设计思路用户注册页面也是互联网中最常见的用户交互页面类型。
其与用户登录网站类似，都是提供一些表单供用户填写，通过网页获取用户填入的信息，再把用户信息写入到网站的数据库中。
用户注册往往是网站用户系统中与用户交互的第一步。
具有十分重要的作用。
1．用户注册页面分析在设计用户注册页面时，首先需要设计具体的注册填写项目，包括各种必填项目、选填项目等。
设计项目时不能盲目的设计，而应参考以下一些规范。
设计项目应目的明确设计注册填写项目时，应该有明确的目的。
每一个需要用户填写的内容，都应该是网站经营者需要获得的信息，而不是无聊的玩笑。
一些小网站往往要求用户填写数页的注册信息内容，将其保存起来，却从来不对这些信息进行分析和总结，这样的注册没有任何意义，反而延长了用户在注册网站时花费的时间，给用户造成很坏的印象。
为什么需要用户注册？通常互联网中各种经营性的网站获得用户信息有许多种，例如，获得用户的联系方式（电话号码，手机号码，电子邮件，通信地址等）、喜好和习惯（生活规律，业余爱好，擅长领域，工作习惯等）、个人信息（教育程度，社会阶层，职业年龄，性别经历等）、真实身份（身份证号，学生证号，工号帐号，其他身份等）。
获取的这些信息都应该与网站的经营目的有关，如图6-37所示。
图6-37 网站注册项目的作用在设计网站注册的填写项目时，应量体裁衣，根据网站用户的性质归化注册项目，尽量避免无意义的注册项目，防止这些既浪费用户时间，又占用数据库的空间的项目产生，降低网站系统的运营效率。
●设计项目应精简易填网站的注册项目还应该通俗易懂。
基于bootstrap表单登录（带验证码）
基于bootstrap表单登录（带验证码）<%@ page contentType="text/html;charset=UTF-8"language="java"%><!-- 跳转到登录页⾯之前的URL --><%String redirectUrl = (String) request.getSession().getAttribute("redirectUrl");String bikeNo = (String) request.getSession().getAttribute("bikeNo");request.setAttribute("url", redirectUrl);request.setAttribute("bikeNo", bikeNo);%><html><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/><meta name="viewport"content="width=device-width,initial-scale=1,maximum-scale=1.0"/><title>登录</title><!-- 引⼊ Bootstrap --><link href="${pageContext.request.contextPath}/css/bootstrap.min.css"rel="stylesheet"><!-- 引⼊⾃定义css --><link href="${pageContext.request.contextPath}/css/style.css"rel="stylesheet"><!-- jQuery --><script src="${pageContext.request.contextPath}/js/jquery.min.js"></script><!-- 包括所有已编译的插件 --><script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script></head><body class="login"><div class="container a "><div class="row center-vertical"><%--屏蔽框--%><div class="hidebox"align="center"><img src="${pageContext.request.contextPath}/images/Loading.gif"style="width: 69.6px;height: 44.8px;top:50%;left:50%;margin-top:322px;border-radius:6px;"/></div><div class="col-sm-4 col-sm-offset-4 "><br><br><br><form class="bs-example bs-example-form"role="form"><div class="input-control"align="center"style="margin-bottom: 10px"><img src="${pageContext.request.contextPath}/images/logo.jpg"style="width: 60px;height: 60px"/><h1>租借单车</h1></div><div class="input-group input-group-lg"><span class="input-group-addon"><span class="glyphicon glyphicon-phone"></span></span><input type="text"class="form-control input-lg"id="userPhone"name="userPhone"placeholder="请输⼊⼿机号"maxlength="11"onkeyup="this.value=this.value.replace(/\D/g,'')"onafterpaste="this.value=this.value.replace(/\D/g,'')"><span class="glyphicon form-control-feedback"></span></div><br><div class="input-group input-group-lg"><span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span><input type="text"name="kaptcha"class="form-control input-lg"id="kaptcha"placeholder="请输⼊验证码"><span class="glyphicon form-control-feedback"></span><span class="input-group-addon-kaptcha"><span class="input-group-addon-kaptcha"><img src="${pageContext.request.contextPath}/login/getkaptchaCode.do"id="kaptchaImage"style="cursor:pointer"></span></div><br><div class="form-group center"><p align="center"><button type="button"class="btn btn-lg btn-md btn-primary"id="submit">登录</button></p></div><button type="button"id="showBox">显⽰</button></form></div></div></div></body><script>//更换验证码$("#kaptchaImage").click(function () {$(this).attr('src', '${pageContext.request.contextPath}/login/getkaptchaCode.do?'+ Math.floor(Math.random() * 100)); });//校验⼿机号格式function checkUserPhone() {var $userPhone = $("#userPhone");var userPhone = $userPhone.val();if(!userPhone) {addCheckError($userPhone);return false;}var reg = /^1[3|4|5|7|8][0-9]{9}$/; //⼿机号验证规则if(!reg.test(userPhone)) {addCheckError($userPhone);return false;}addCheckOk($userPhone);return userPhone;}//校验验证码格式function checkKaptcha() {var $kaptcha = $("#kaptcha");var kaptcha = $kaptcha.val();if(!kaptcha) {addCheckError($kaptcha);return false;}var regKaptcha = /^[0-9a-zA-Z]{4}$/;//验证码验证规则if(!regKaptcha.test(kaptcha)) {addCheckError($kaptcha);return false;}//addCheckOk($kaptcha);return kaptcha;}//添加校验错误样式function addCheckError($element) {$element.parent("div").addClass("has-error");$element.next("span").addClass("glyphicon-remove-sign");}//移除校验错误样式function removeCheckError($element) {$element.parent("div").removeClass("has-error");$element.next("span").removeClass("glyphicon-remove-sign");}//添加校验成功样式function addCheckOk($element) {$element.parent("div").addClass("has-success");$element.next("span").addClass("glyphicon-ok-sign");}//移除校验成功样式function removeCheckOk($element) {$element.parent("div").removeClass("has-success");$element.next("span").removeClass("glyphicon-ok-sign");}//当输⼊框获得焦点时，移除成功或失败样式$("#userPhone,#kaptcha").on("focus", function () {removeCheckError($(this));removeCheckOk($(this));});//验证⽤书输⼊的验证码是否正确/*$('#kaptcha').on("blur", function () {var kaptcha = checkKaptcha();if (!kaptcha) {return false;}$.ajax({type: "POST",url: "${pageContext.request.contextPath}/login/check.do",data: {"kaptcha": kaptcha},dataType: "json",success: function (data) {alert(data.kaptchaFlag);}});});*///登录$("#submit").on("click", function () {showBox();var userPhone = checkUserPhone();if(!userPhone) {hideBox();return false;}var kaptcha = checkKaptcha();if(!kaptcha) {hideBox();return false;}var url = "${url}";if(!url) {window.location.href = "${pageContext.request.contextPath }/index.jsp"; return;return;}url = "${url}"+ "?bikeNo="+ "${bikeNo}";$.ajax({type: "POST",url: "${pageContext.request.contextPath }/login/login.do", data: {userPhone: userPhone,kaptcha: kaptcha},dataType: "json",success: function (data) {("data:"+ data);if(data.kaptchaFlag) {//alert("验证码正确");addCheckOk($("#kaptcha"));if(erFlag) {window.location.href = url;} else{alert("⽤户不存在");hideBox();}} else{alert("验证码错误");addCheckError($("#kaptcha"));hideBox();}}});});$("#showBox").click(function () {showBox();});$("#hideBox").click(function () {hideBox();});//页⾯屏蔽不可点击function showBox() {$(".hidebox").show().height($(window).height());}//去除隐藏层和弹出层function hideBox() {$(".hidebox").hide();}</script></html>。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
竭诚为您提供优质文档/双击可除html表单登陆模板
篇一：html表单控件及Frame框架技术实现
html表单控件及Frame框架技术实现
html表单控件
define:
通过网页收集客户信息
用法：
常见的表单控件：
文本框控件：text
密码框控件：password
提交按钮：submit
重置取消按钮：reset
单选按钮：radio
复选按钮：checkbox
下拉列表：selectoption
注册界面：
案例：
Frame框架
将网页进行按行，按列进行分割
篇二：html实验报告
教育信息技术与传媒学院
instituteofeducationalinformationtechnologyandcommu nication
web教育平台开发实验报告
学号姓名专业信息技术班级
教师评语
日期：20xx年3月11日
篇三：html5表单标签
2、标签常用属性详解
在表单的标记中还可以设置表单的基本属性，包括表单的名称、处理程序、传送方法等。
一般情况下，表单的处理程序action和传送方法method是必不可少的参数。
action属性定义一个uRl。
当点击提交按钮时，向这个uRl发送数据。
真正处理表单的数据脚本或程序是在action属性里，这个属性值可以是程序或脚本的一个完整的uRl。
说明：在该语法中，表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。
这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他的地址形式，例如发送e-mail等。
method属性用于向actionuRl发送数据的http方法。
method=get：使用这个设置时，来访者输入的数据会附加在uRl之后，由用户端直接发送至服务器，所以速度上会比post快，但缺点是数据长度不能够太长。
在没有指定method的情形下一般都会视get为默认值。
method=post：使用这种设置时，表单数据是与uRl分
开发送的，用户端的计算机会通知服务器来读取数据，所以通常没有数据长度上的限制，缺点是速度上也会比post慢。
enctype属性对表单内容进行编码的mime类型。
text/plain以纯文本的形式传送
application/x-www-form-urlencoded默认的编码形式
multipart/form-datamime编码，上传文件的表单必须
选择该项
target属性目标显示方式。
target属性用来指定目标
窗口的打开方式。
_blank是指将返回的信息显示在新打开的窗口中；
_parent是指将返回信息显示在父级的浏览器窗口中；。