css3手机端个人资料表单页面特效代码下载



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

13 48 17



特效描述:手机端个人资料 表单页面。手机通用的设计师参赛个人资料表单填写页面模板html下载。设计师姓名、年龄、身高 、性别 、微信号 、邮箱、国籍及地区 、选择赛区、身份证/护照号码 、家长联系电话 、家庭住址 、推荐机构 、组别、是否参加走T台、作品要求、家长/监护人等功能。ps:手机打开正常演示。

代码结构

1. 引入CSS

<link rel="stylesheet" type="text/css" href="css/MultiPicker.css"/>
<link rel="stylesheet" href="css/pandastar.css" />

2. 引入JS

<script src="js/rembasic.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery-2.1.3.min.js"></script>
<script src="js/MultiPicker.js" type="text/javascript" charset="utf-8"></script>

3. HTML代码

			<div class="body-container">
				<div class="toper-wrap">
					<div class="toper-box">
						<div class="toper-left" style="padding:0;">
				        	<a class="cb-sgin" href="">
				        		<i class="fa fa-angle-left" aria-hidden="true"></i>
				        	</a>
			        	</div>
			        	<div class="toper-middle" style="padding:0;">
				        	个人资料
			        	</div>
			        	<div class="toper-right" style="padding:0;">
			        	</div>
					</div>
				</div>
				<div class="datawrap1">
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								设计师姓名
							</div>
							<div class="databox-left-et">
								Designer name
							</div>
						</div>
						<div class="databox-right">
							<input class="text-input" type="text" name="" id="" value="" placeholder="设计师姓名" maxlength="100"/>
						</div>
					</div>
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								年龄
							</div>
							<div class="databox-left-et">
								Age
							</div>
						</div>
						<div class="databox-right">
							<input class="age-input" type="text" name="" id="age-input" value="" placeholder="请选择" readonly/>
						</div>
					</div>
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								身高
							</div>
							<div class="databox-left-et">
								Height
							</div>
						</div>
						<div class="databox-right">
							<span class="cmtip">&nbsp;CM</span>
							<input class="text-input height-input" type="text" name="" id="" value="" placeholder="请填写" maxlength="3"/>
						</div>
					</div>
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								性别
							</div>
							<div class="databox-left-et">
								Sex
							</div>
						</div>
						<div class="databox-right">
							<input class="text-input sex-input" type="text" name="" id="sex-input" value="" placeholder="请选择" readonly/>
						</div>
					</div>
				</div>
				<div class="datawrap2">
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								微信号
							</div>
							<div class="databox-left-et">
								We chat
							</div>
						</div>
						<div class="databox-right">
							<input class="text-input" type="text" name="" id="" value="" placeholder="微信号" maxlength="50"/>
						</div>
					</div>
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								邮箱
							</div>
							<div class="databox-left-et">
								E-Mail
							</div>
						</div>
						<div class="databox-right">
							<input class="text-input" type="text" name="" id="" value="" placeholder="邮箱" maxlength="128"/>
						</div>
					</div>
					<div class="databox">
						<div class="databox-left" style="width:41%;">
							<div class="databox-left-ct">
								国籍及地区
							</div>
							<div class="databox-left-et">
								Nationality and area
							</div>
						</div>
						<div class="databox-right" style="width:59%;">
							<input class="text-input Nationality-input" type="text" name="" id="Nationality-input" value="" placeholder="国籍" readonly/>
							<input class="text-input area-input" type="text" name="" id="area-input" value="" placeholder="请选择地区" readonly/>
							<input class="text-input foreign-area-input" type="text" name="" id="foreign-area-input" value="" placeholder="请填写地区" maxlength="100"/>
						</div>
					</div>
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								选择赛区
							</div>
							<div class="databox-left-et">
								Choose division
							</div>
						</div>
						<div class="databox-right">
							<input class="text-input division-input" type="text" name="" id="division-input" value="" placeholder="请选择赛区" readonly/>
						</div>
					</div>
					<div class="databox">
						<div class="databox-left" style="width:61%;">
							<div class="databox-left-ct">
								身份证/护照号码
							</div>
							<div class="databox-left-et">
								Identity card/passport number
							</div>
						</div>
						<div class="databox-right" style="width:39%;">
							<input class="text-input" type="text" name="" id="" value="" placeholder="身份证/护照号码" maxlength="100"/>
						</div>
					</div>
				</div>
				<div class="datawrap5">
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								家长联系电话
							</div>
							<div class="databox-left-et">
								Parents of telephone
							</div>
						</div>
						<div class="databox-right">
							<input class="text-input" type="text" name="" id="" value="" placeholder="家长联系电话" maxlength="11"/>
						</div>
					</div>
					<div class="databox databox-b0">
						<div class="databox-left" style="width:21%;">
							<div class="databox-left-ct">
								家庭住址
							</div>
							<div class="databox-left-et">
								Address
							</div>
						</div>
						<div class="databox-right" style="width:79%;">
							<input class="text-input Nationality-input2" type="text" name="" id="Nationality-input2" value="" placeholder="选择国家" readonly/>
							<input class="text-input area-input2" type="text" name="" id="area-input2" value="" placeholder="请选择地区" readonly/>
							<input class="text-input foreign-area-input2" type="text" name="" id="foreign-area-input2" value="" placeholder="请填写地区" maxlength="100"/>
						</div>
					</div>
					<div class="databox-addr">
						<div class="databox-addr-box">
							<textarea class="textarea-input" name="" id="symptomTxt" oninput="autoTextAreaHeight(this)" placeholder="请填入详细地址" maxlength="100"></textarea>
						</div>
					</div>
				</div>
				<div class="datawrap1 dataw-margint">
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								推荐机构
							</div>
							<div class="databox-left-et">
								Recommendation agency
							</div>
						</div>
						<div class="databox-right">
							<input class="text-input" type="text" name="" id="" value="" placeholder="推荐机构" maxlength="50"/>
						</div>
					</div>
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								组别
							</div>
							<div class="databox-left-et">
								Group
							</div>
						</div>
						<div class="databox-right">
							<input class="text-input Group-input" type="text" name="" id="Group-input" value="" placeholder="请选择组别" readonly/>
						</div>
					</div>
					<div class="databox">
						<div class="databox-left" style="width:61%;">
							<div class="databox-left-ct">
								是否参加走T台
							</div>
							<div class="databox-left-et">
								Whether or not attend Image
							</div>
						</div>
						<div class="databox-right" style="width:39%;">
							<input class="text-input attend-input" type="text" name="" id="attend-input" value="" placeholder="请选择" readonly/>
						</div>
					</div>
				</div>
				<div class="datawrap1 dataw-margint">
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								作品要求
							</div>
							<div class="databox-left-et">
								Entry Requirements
							</div>
						</div>
						<div class="databox-right">
							<div class="Entry-Requirements">
								细节详见大赛文创本要求
							</div>
						</div>
					</div>
				</div>
				<div class="datawrap1 dataw-margint">
					<div class="databox">
						<div class="databox-left">
							<div class="databox-left-ct">
								家长/监护人
							</div>
							<div class="databox-left-et">
								The parent or guardian
							</div>
						</div>
						<div class="databox-right">
							<input class="text-input" type="text" name="" id="" value="" placeholder="请填写家长/监护人" maxlength="50"/>
						</div>
					</div>
				</div>
				<div class="signupDataSumbit-wrap">
					<input class="sinputSumbit" type="submit" name="" value="提交">
				</div>
				<div class="input-errortip" style="top:50%;">
					输入错误
				</div>
				<!--年龄选择容器-->
				<div id="age-targetContainer"></div>
				<!--性别选择容器-->
				<div id="sex-targetContainer"></div>
				<!--国籍选择容器-->
				<div id="Nationality-targetContainer"></div>
				<!--地区选择容器-->
				<div id="area-targetContainer"></div>
				<!--地址国籍选择容器-->
				<div id="Nationality-targetContainer2"></div>
				<!--地址地区选择容器-->
				<div id="area-targetContainer2"></div>
				<!--组别选择容器-->
				<div id="Group-targetContainer"></div>
				<!--是否参加走T台选择容器-->
				<div id="attend-targetContainer"></div>
				<!--赛区选择-->
				<div id="division-targetContainer"></div>
			</div>
		<script type="text/javascript">
			//选择年龄
			new MultiPicker({
		        input: 'age-input',//点击触发插件的input框的id
		        container: 'age-targetContainer',//插件插入的容器id
		        jsonData: [{
		          value: '6',
		        }, {
		          value: '7',
		        }, {
		          value: '8',
		        }, {
		          value: '9',
		        }, {
		          value: '10',
		        }, {
		          value: '11',
		        }, {
		          value: '12',
		        }, {
		          value: '13',
		        }, {
		          value: '14',
		        }, {
		          value: '15',
		        }, {
		          value: '16',
		        }, {
		          value: '17',
		        }, {
		          value: '18',
		        }, {
		          value: '19',
		        }, {
		          value: '20',
		        }, {
		          value: '21',
		        }, {
		          value: '22',
		        }, {
		          value: '23',
		        }, {
		          value: '24',
		        }],
		        success: function (arr) {
		            $('.age-input').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        }//回调
		    });
		    //选择性别
			new MultiPicker({
		        input: 'sex-input',//点击触发插件的input框的id
		        container: 'sex-targetContainer',//插件插入的容器id
		        jsonData: [{
		          value: '男',
		        }, {
		          value: '女',
		        }],
		        success: function (arr) {
		            $('.sex-input').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        }//回调
		    });
		    //选择赛区
		    new MultiPicker({
		        input: 'division-input',//点击触发插件的input框的id
		        container: 'division-targetContainer',//插件插入的容器id
		        jsonData: [{
		          value: '粤港澳赛区',
		        }, {
		          value: '东三省赛区',
		        }],
		        success: function (arr) {
		            $('.division-input').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        }//回调
		    });
		    //选择国籍
			new MultiPicker({
		        input: 'Nationality-input',//点击触发插件的input框的id
		        container: 'Nationality-targetContainer',//插件插入的容器id
		        jsonData: [{
		          value: '中国',
		        }, {
		          value: '海外',
		        }],
		        success: function (arr) {
		        	var nationality=JSON.stringify(arr[0].value).replace(/\"/g,"");
		        	if(nationality=='中国'){
		        		$('.area-input').show();
		        		$('.foreign-area-input').hide();
		        		$('.Nationality-input').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        	}else{
		        		$('.area-input').hide();
		        		$('.foreign-area-input').show();
		        		$('.Nationality-input').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        	}
		        }//回调
		    });
		    //选择地区
			new MultiPicker({
		        input: 'area-input',//点击触发插件的input框的id
		        container: 'area-targetContainer',//插件插入的容器id
		        jsonData: [{
		          value: '北京市',
		        }, {
		          value: '上海市',
		        }, {
		          value: '天津市',
		        }, {
		          value: '重庆市',
		        }, {
		          value: '黑龙江省',
		        }, {
		          value: '吉林省',
		        }, {
		          value: '辽宁省',
		        }, {
		          value: '山东省',
		        }, {
		          value: '山西省',
		        }, {
		          value: '陕西省',
		        }, {
		          value: '河北省',
		        }, {
		          value: '河南省',
		        }, {
		          value: '湖北省',
		        }, {
		          value: '湖南省',
		        }, {
		          value: '海南省',
		        }, {
		          value: '江苏省',
		        }, {
		          value: '江西省',
		        }, {
		          value: '广东省',
		        }, {
		          value: '广西壮族自治区',
		        }, {
		          value: '云南省',
		        }, {
		          value: '贵州省',
		        }, {
		          value: '四川省',
		        }, {
		          value: '内蒙古自治区',
		        }, {
		          value: '宁夏回族自治区',
		        }, {
		          value: '甘肃省',
		        }, {
		          value: '青海省',
		        }, {
		          value: '西藏自治区',
		        }, {
		          value: '新疆维吾尔自治区',
		        }, {
		          value: '安徽省',
		        }, {
		          value: '浙江省',
		        }, {
		          value: '福建省',
		        }, {
		          value: '台湾省',
		        }, {
		          value: '香港特别行政区',
		        }, {
		          value: '澳门特别行政区',
		        }],
		        success: function (arr) {
		            $('.area-input').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        }//回调
		    });
		    //地址选择国籍
			new MultiPicker({
		        input: 'Nationality-input2',//点击触发插件的input框的id
		        container: 'Nationality-targetContainer2',//插件插入的容器id
		        jsonData: [{
		          value: '中国',
		        }, {
		          value: '海外',
		        }],
		        success: function (arr) {
		        	var nationality=JSON.stringify(arr[0].value).replace(/\"/g,"");
		        	if(nationality=='中国'){
		        		$('.area-input2').show();
		        		$('.foreign-area-input2').hide();
		        		$('.Nationality-input2').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        	}else{
		        		$('.area-input2').hide();
		        		$('.foreign-area-input2').show();
		        		$('.Nationality-input2').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        	}
		        }//回调
		    });
		    //地址选择地区
			new MultiPicker({
		        input: 'area-input2',//点击触发插件的input框的id
		        container: 'area-targetContainer2',//插件插入的容器id
		        jsonData: [{
		          value: '北京市',
		        }, {
		          value: '上海市',
		        }, {
		          value: '天津市',
		        }, {
		          value: '重庆市',
		        }, {
		          value: '黑龙江省',
		        }, {
		          value: '吉林省',
		        }, {
		          value: '辽宁省',
		        }, {
		          value: '山东省',
		        }, {
		          value: '山西省',
		        }, {
		          value: '陕西省',
		        }, {
		          value: '河北省',
		        }, {
		          value: '河南省',
		        }, {
		          value: '湖北省',
		        }, {
		          value: '湖南省',
		        }, {
		          value: '海南省',
		        }, {
		          value: '江苏省',
		        }, {
		          value: '江西省',
		        }, {
		          value: '广东省',
		        }, {
		          value: '广西壮族自治区',
		        }, {
		          value: '云南省',
		        }, {
		          value: '贵州省',
		        }, {
		          value: '四川省',
		        }, {
		          value: '内蒙古自治区',
		        }, {
		          value: '宁夏回族自治区',
		        }, {
		          value: '甘肃省',
		        }, {
		          value: '青海省',
		        }, {
		          value: '西藏自治区',
		        }, {
		          value: '新疆维吾尔自治区',
		        }, {
		          value: '安徽省',
		        }, {
		          value: '浙江省',
		        }, {
		          value: '福建省',
		        }, {
		          value: '台湾省',
		        }, {
		          value: '香港特别行政区',
		        }, {
		          value: '澳门特别行政区',
		        }],
		        success: function (arr) {
		            $('.area-input2').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        }//回调
		    });
		    //详细地址栏输入下拉效果
		    function autoTextAreaHeight(o) {
		        o.style.height = o.scrollTop + o.scrollHeight + "px";
		    }
		    $(function () {
		        var ele = document.getElementById("symptomTxt");
		        autoTextAreaHeight(ele);
		    })
		    //选择组别
			new MultiPicker({
		        input: 'Group-input',//点击触发插件的input框的id
		        container: 'Group-targetContainer',//插件插入的容器id
		        jsonData: [{
		          value: '设计组',
		        }, {
		          value: '表演组',
		        }],
		        success: function (arr) {
		            $('.Group-input').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        }//回调
		    });
		    //是否参加走T台
			new MultiPicker({
		        input: 'attend-input',//点击触发插件的input框的id
		        container: 'attend-targetContainer',//插件插入的容器id
		        jsonData: [{
		          value: '是',
		        }, {
		          value: '否',
		        }],
		        success: function (arr) {
		            $('.attend-input').attr('value',JSON.stringify(arr[0].value).replace(/\"/g,""));
		        }//回调
		    });
			//吸顶效果
			$(window).scroll(function(){
				var scrollTop = $(window).scrollTop();
				if(scrollTop >0){
					$(".toper-box").stop(true,true).fadeIn();				
				}else{
					$(".toper-box").stop(true,true).fadeIn();	
				};
			});
		</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 图片头像上传 文件上传 文本框 下拉框 复选 单选 登录框 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到