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="" />
- 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是指将返回信息显示在父级的浏览器窗口中；。