移动端表单模板

最新推荐文章于 2024-04-27 12:38:16 发布
最新推荐文章于 2024-04-27 12:38:16 发布
阅读量1.3k 收藏 2
点赞数
文章标签： 移动端表单
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40580988/article/details/103504771
版权

HTML代码： 可直接复制，只需更改引入文件路径

<!DOCTYPE html>
<html style="background-color:#FFFFFF;">
	<head>
		<meta charset="utf-8" />
		<meta name="wap-font-scale" content="no">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>个人信息</title>
		<meta name="apple-mobile-web-app-capable" content="no" />
		<meta name="keywords" content="">
		<meta name="description" content="">
		
		
		<script src="js/rembasic.js" type="text/javascript" charset="utf-8"></script>
		
		<link rel="stylesheet" type="text/css" href="css/MultiPicker.css"/>
		<link rel="stylesheet" href="css/pandastar.css" />
		
	</head>
	<body>					
			<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="
最低0.47元/天 解锁文章
Bumblebee-Wxr
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery mobile css3手机表单页面布局按钮样式
11-24
jquery mobile css3手机表单页面布局按钮样式
【jeecg移动开发能力】表单移动开发能力，提供多套表单模板（移动端、PC端），支持自定义...
iteye_14984的博客
03-04 308
[一]、请假表单风格（单表） 【1】移动端风格 【2】PC端风格一 【3】PC端风格二 [二]、订单管理表单风格（一对多） 【1】移动端风格 【2】PC端风格一 【3】PC端风格二 ...
移动端简单表单页面
最新发布
sinat_27688375的博客
04-27 117
【代码】移动端简单表单页面。
移动端表单类型
文摘资讯
07-16 202
HTML5 引入了大量新的输入类型。这些新输入类型可以提示浏览器，屏幕键盘应显示什么类型的键盘布局。用户无需切换键盘，就能更轻松地输入所需信息，并且只看到该输入类型的相应按键。type为...
移动端页面模板
weixin_30786617的博客
11-18 965
<!DOCTYPE html><html lang="en"><head><title>淘宝网触屏版</title><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0,width=device-width,user-sca...
适配移动端的优秀表单OhMyForm
wbsu2004的博客
04-25 1184
OhMyForm 是 TypeForm、TellForm 或 Google Forms 的免费开源替代品。
微信读书移动端HTML模板
11-05
微信读书移动端HTML模板是专为在手机和平板等移动设备上提供阅读体验而设计的一种网页模板。这个模板的目的是为了创建一个与微信读书应用类似，具有良好用户体验和视觉效果的在线阅读平台。它通常包括一系列精心设计...
移动端用户登录模板
06-01
移动端用户登录模板是针对移动设备优化的用户身份验证界面，主要设计用于智能手机和平板电脑等设备。这种模板通常包括简洁的布局、响应式设计以及友好的用户体验元素，以确保用户在小屏幕设备上也能轻松完成登录操作...
基于vue-cli4和vant搭建的移动端开发模板
02-19
4. **全面覆盖**：Vant涵盖了常用的移动端组件，如按钮、表单、导航、布局等，满足多样化的需求。 5. **高性能**：Vant采用了Vue 2.x的虚拟DOM和优化技术，确保在移动设备上的流畅体验。 6. **兼容性**：Vant对...
电商或商城H5移动端静态模板
04-10
【电商或商城H5移动端静态模板】是一套专为电商及在线商城设计的HTML5页面模板，旨在提供一套完整、兼容性优秀的解决方案，使商家能够快速构建适应各种移动端设备的电商平台。这一模板集成了丰富的功能和组件，确保...
基于umi+antd-mobile的移动端项目模板
02-22
"基于umi+antd-mobile的移动端项目模板"是一个针对移动端应用开发的高效解决方案，它结合了两个强大的工具：umi框架和antd-mobile组件库。这个模板提供了一个快速启动的项目结构，旨在帮助开发者更高效地构建高质量...
中奖了手机表单模板
04-10
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>中奖信息</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> </head> <style>
HTML移动端APP注册登录页面模板
10-01
HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板 HTML移动端APP注册登录页面模板
登录表单界面样式大全
12-23
登录表单界面样式大全，包含多种样式的表单登录
jQuery手机端个人信息填写表单页面代码.zip
07-11
js代码 [removed] $('[name="nice-select"]').click(function(e){ $('[name="nice-select"]').find('ul').hide(); $(this).find('ul').show(); e.stopPropagation(); }); $('[name="nice-select"] li').hover(function(e){ $(this).toggleClass('on'); e.stopPropagation(); }); $('[name="nice-select"] li').click(function(e){ var val = $(this).text(); $(this).parents('[name="nice-select"]').find('input').val(val); $('[name="nice-select"] ul').hide(); e.stopPropagation(); }); $(document).click(function(){ $('[name="nice-select"] ul').hide(); }); [removed] 一款简洁美观的jQuery手机端个人信息填写表单页面代码，用户个人资料完善表单代码下载。
完整的漂亮手机模板UI库html5
06-25
完整的漂亮手机模板UI库html5，导航控件，列表控件，表单控件，搜索组件，面板，组件库，对话框，按钮等等；是一个完整的组件库。
表单 设置字体_【勤哲资料】12.3 移动端样式设置
weixin_30082211的博客
01-15 275
移动端样式设置点击【移动端样式设置】打开下图所示页面：显示都可设置哪些内容。图 12 ‑4412.3.1默认主题默认主题：可以理解为是系统默认的一组样式，不可编辑。可以复制样式后进行其它样式的设置，使用哪组样式就选择哪组样式。下面就先建一个新的样式。1.点击上图中“默认主题”对应的【复制】。图 12 ‑452.输入名称后点击【确定】。图 12 ‑463.点击“样式1”对应的【编辑】按钮，...
移动端 html 表单案例,【干货】5大移动端表单设计原则及案例赏析
weixin_30921373的博客
06-17 1897
当我们在享受手机App为生活带来的巨大便利时，无形中已经经历了多种多样的移动表单设计形式。而表单设计又是移动应用设计中与用户产生最多交互的步骤，包括用户注册、订阅服务、用户反馈、问卷表单、买卖交易等等。一个优秀的表单设计更有助于提升用户体验，提高转化率，达到更好的营销效果每一个表单设计的页面都有一个特定的目的，或是吸引注册，或是达成交易。考虑不周甚至是错误的设计有可能会导致用户的流失或交易失败。因...
移动端开发模板
幸福有多远
03-19 359
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta name="viewport" id="viewport" content="width=device-width, initial-s
html5 移动端登录模板
10-19
HTML5移动端登录模板是为移动设备用户提供方便快捷的登录界面的模板。该模板使用HTML5技术开发，可以适配不同尺寸的移动设备屏幕，提供用户友好的交互体验。以下是一些常见的特点和设计要素： 1. 响应式设计：该...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值