手机wap端用户注册表单（html+css）

实现效果：

html代码：

<div class="login"><form action="*跳转接口*" method="post" onsubmit="return checkForm()"><div class="mt30"> <span>输入手机号码</span><div class="input-wrap"><input type="text" name="phone" maxlength="11" id="mobile" /></div></div><div class="mt30"><span>设置登录密码</span> <a class="switch"><img src="img/eye.png" class="eye" id="eyeBtn" /></a><div class="input-wrap"><input type="password" name="password" maxlength="16" id="password"  placeholder="(6-16位字符)" /></div></div><div class="mt30"> <span>输入验证码</span><div class="yzm-button"><a id="captchaBtn" href="javascript:void(0)">获取验证码</a></div><div class="input-wrap input-wrap-captcha"><input type="text" name="code" id="yzm"  /></div></div><button href="javascript:void(0)" type="submit" class="login-button" id="registerBtn"></button></form></div>

需要注意的需求：

手机号码长度：maxlength=”11”
密码长度：maxlength=”16”
输入框的位置
placeholder内容

css代码：

注意事项：

元素位置控制，最好不要用绝对定位

//设置input最外层div
.mt30 {margin: 0.5rem auto;//控制上下间距background-image: url(../img/input.jpg);//表单背景图片background-size: 100% 100%;//图片自适应height: 1.6rem;//div高度position: relative;
}//设置输入框的提示文字
.mt30 span {color: #fff;font-size: 0.3rem;z-index: 2;display: block;float: left;line-height: 1.6rem;//行高跟div高度一致，文字对齐width: 2rem;margin-left: 0.4rem;
}#mobile, #password, #yzm {border: none;//去掉输入框边框padding: 0;//去掉内间距background-color: #f26247;//输入框背景色font-size: 0.3rem;//输入框字体大小color: #FFFFFF;//字体颜色height: 1rem;//输入框高度display: block;width: 100%;margin: 0.3rem 0 0 0;//控制输入框位置padding: 0;box-sizing: border-box;//通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。-moz-box-sizing:border-box; /* Firefox */-webkit-box-sizing:border-box; /* Safari */
}
//设置placeholder的字体颜色
::-webkit-input-placeholder { /* WebKit browsers */color: #cf381c;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */color: #cf381c;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */color: #cf381c;
}
:-ms-input-placeholder { /* Internet Explorer 10+ */color: #cf381c;
}//设置input内层div，控制input的位置
.input-wrap {margin: 0 1.1rem 0 2.6rem;height: 100%;padding-top: 1px;
}//设置密码明文按钮样式
.switch {display: block;float: right;margin: 0 0 0 0.1rem;height:100%;width: 1rem;text-align: left;
}
//设置明文按钮图片样式
.eye {display: inline-block;width: 20px;height: 10px;
}//控制验证码的input输入框长度
.input-wrap-captcha {margin-right: 2.6rem;
}
//验证码按钮样式
.yzm-button {float: right;width: 1.5rem;height: 0.5rem;background-color: #ffd463;border: 10px solid #ffd463;-moz-border-radius: 10px;      /* Gecko browsers */-webkit-border-radius: 10px;   /* Webkit browsers */border-radius: 10px;            /* W3C syntax */margin: 0.38rem 0.6rem 0 0;//设置按钮位置
}
//按钮文字链接样式
.yzm-button a {display: block;color: #a2631f;text-align: center;text-decoration: none;font-size: 0.3rem;line-height: 0.5rem;
}//注册按钮样式
.login-button {width: 80%;height: 1rem;margin: 0 auto 0.5rem ;border:none;background: url("../img/login.jpg") no-repeat ;display: block;background-size: 100% 100%;border-radius: .1rem;
}

手机wap端用户注册表单（html+css）相关推荐

【Java Web前端开发】HTML表单和CSS部分
文章目录 HTML标签:表单标签 CSS:页面美化和布局控制案例: HTML标签:表单标签 * 表单:* 概念:用于采集用户输入的数据的.用于和服务器进行交互.* form:用于定义表单的.可以定义 ...
（30）-- 用户注册表单验证
# 用户注册表单验证 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:// ...
HTML5期末考核大作业：美食主题网站设计——沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript
HTML5期末大作业:美食主题网站设计--沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制 ...
HTML5期末考核大作业：美食主题网站设计——沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript (1)
HTML5期末大作业:美食主题网站设计--沪上美食(9页)带Flash动画视频导航下拉表单 HTML+CSS+JavaScript 期末作业HTML代码学生网页课程设计期末作业下载 web网页设计制 ...
HTML 表格、表单和CSS初识
表格.表单和CSS初识一.提问 html骨架结构是什么常用标签有哪些图像标签有哪些属性,绝对路径和相对路径的区别链接标签有哪些属性,说出各个属性的作用列表标签分几种,分别是什么二.本章任务 ...
Web:学生课程表表格/用户注册表单
一.学生课程表 1.课程表模样 2.课程表html代码块 <!DOCTYPE html> <html lang="en"><head><m ...
Jquery之AJAX用户注册表单验证(Vancl版)
Jquery用户注册表单验证(Vancl版),效果图实例下载:DEMO 转载于:https://www.cnblogs.com/xiaobaigang/archive/2009/12/30/1636 ...
JQuery用户注册表单验证
使用jquery编写代码实现用户注册表单的验证功能: 用户名.密码.确认密码和手机号不能为空密码长度在8~20位之间,密码至少由数字.字母或下划线其中两种组成确认密码必须和密码一致手机号应该是1 ...
html的练习之用户注册表单
这是最终效果图,具体实现代码在下面,一些注意点在代码里有注释,对是新手学习html基础比较友好. 本人刚接触前端学习,这里当作作业的练习,不足之处,欢迎交流,共同进步! <!DOCTYPE ht ...

手机wap端用户注册表单（html+css）

手机wap端用户注册表单（html+css）相关推荐

最新文章

热门文章