html5 初探2 表单

最新推荐文章于 2021-06-25 01:57:15 发布
最新推荐文章于 2021-06-25 01:57:15 发布
阅读量129 收藏
点赞数
分类专栏： 网页设计 html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xufei110/article/details/84415350
版权

一个简单的表单

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>test regist</title>
<link href="../css/add.css" rel="stylesheet" type="text/css">
</head>
<body>
	<div class='content'>
	    <header><h1>个人信息录入</h1></header>
		<form action="">
			<fieldset>
				<legend>基本信息</legend>
				<ol>
					<li><label for='name'>姓名:</label><input id='name' type="text" placeholder="name" required autofocus></li>
					<li><label for='age'>年龄:</label><input id='age' type="number" placeholder="age" required>	</li>	
					<li>
					   <ol>
						   <li>
						   		<label for='sex-1'>男</label><input name='sex' id='sex-1' type="radio">	
						   </li>
						   <li>
						   		<label for='sex-2'>女</label><input name='sex' id='sex-2' type="radio">	
						   </li>
					   </ol>
						
						
					</li>
				</ol>
			</fieldset>
			<fieldset>
				<legend>地址</legend>
				<ol>
					<li><label for='country'>国家:</label>
						<select>	
							<option value='1'>中国</option>
							<option value='2'>日本</option>
						</select>
					</li>
					<li><label for='city'>城市:</label><input id='city' type="text" placeholder="city" required>	</li>	
				</ol>
				
			</fieldset>
			<fieldset>
				<button type=submit>注册</button>
			</fieldset>
		</form>
		
		<footer>by xufei 2013/04</footer>
	</div>
	
</body>
</html>

 

 

css样式，里面有些 css3的东西

@CHARSET "UTF-8";

body {
	background: #ffffff;
	color: #111111;
}
header {
	text-align: center;
}
footer {
	text-align: center;
	font-size: 14px;
	margin-top: 10px;
}
select {
	height:25px;
	width:156px;
}

input {
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px; /* 圆角 */
	border-radius: 3px;
	height:20px;
	box-shadow: 0 0 3px #aaa; /* 阴影 */
}

.content {
	width : 800px;
	height: 100%;
	border: 1px solid;
	margin-right: auto;
	margin-left: auto;
	padding-top: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

form {
	background: #9cbc2c;
	border-radius: 5px;
	padding: 20px;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
}
/* 表单分组  */
form fieldset {
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	margin-bottom: 10px;
}
/* 表单分组 最后一个  */
form fieldset:last-of-type {
	margin-bottom: 0;
	border:none;
	text-align:center;		
}
/* 表单分组 的标题  他的位置根据fieldset的 text-align:center决定*/
form legend {
	color: #384313;
	font-size: 16px;
	font-weight: bold;
	padding-bottom: 5px;
	text-shadow: 0 1px 1px #c0d576;
}

form label {
	float: left;
	width: 110px;
}
form fieldset fieldset label {
	background:none no-repeat left 50%;
	line-height: 20px;
	padding: 0 0 0 30px;
	width: auto;
}
form fieldset label:hover {
	cursor: pointer;
}

form ol li {
	background: #b9cf6a;
	background: rgba(255,255,255,.3);
	border-color: #e3ebc3;
	border-color: rgba(255,255,255,.6);
	border-style: solid;
	border-width: 2px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	line-height: 30px;
	list-style: none;
	padding: 5px 10px;
	margin-bottom: 2px;
	float: left;

}

form ol ol {
	padding-left: 5px
}
form ol ol li {
	background: none;
	border: none;
	float: left;
}

form ol ol li label{
	background:none no-repeat left 50%;
	line-height: 20px;
	
	width: auto;
}

/* 提交按钮 */
form button {
	width:100px;
	height:30px;
	font-weight: bold;
    color: #2D2D2D;
    font-size: 14px;
    text-shadow: 0px 1px 1px #fff;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid rgb(160,160,160);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    background: -webkit-gradient(linear, left top, left bottom, from(rgb(253,253,253)), to(rgb(190,190,190))); /* 渐变 在webkit核心浏览器下(Safari4+, Chrome) */
    background: -moz-linear-gradient(top, rgb(253,253,253), rgb(190,190,190)); /*  */
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#FDFDFD,endColorstr=#BEBEBE); /* IE */
    cursor: pointer;
    text-decoration: none;
}
/* 鼠标放到按钮上时，按钮的样式 */
form button:hover {
	 background: rgb(190,190,190 );
	 text-decoration: none;
     color: #000;
}

 

 

以上代码只在 google的Chrome下测试过

 

整个页面看起来跟用VB做出的效果很像

 

 说明：

    1，fieldset 元素可将表单内的相关元素分组。跟VB的一样，很好用的标签

    2，渐进效果让按钮看起来更立体，就像有个图片背景似的

    3，button:hover；鼠标放到按钮上时，改变按钮的样式

    4，html5的表单input还自带一些页面验证的功能，例如：type是number时自动验证是不是数字，还有一个必须输入的属性required

 

关于验证的部分，下次一个一个实验

 

xufei110
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 表单（2）
zhuanshu12的博客
08-19 203
单选按钮、复选框和下拉框 单选按钮用于一组相互排斥的选项，组中的每个选项应具有相同的名称（name），以确保用户只能选择一个选项，单选按钮对应的type设置为radio。 <form> <input type="radio" name="fruit" value="apple">苹果<br> <input type="radio" name="fruit" value="orange">桔子<br> <input ty
HTML5-表单
MUYUFANSHENXUE的博客
03-13 1824
表单时网页中非常重要的元素，比如一些网站软件的注册页面，登录页面都会用到表单这个东西。 表单的初级应用： 1，表单的基本结构： <form method="post" action="result.html"> </form> method是指表单数据提交的方法，包括post和get，post相对于get安全一点，但也只是相对而言，两种方法，一般开发中通常采用post提交表单数据。action后面的表示向何处发送表单数据。 以上是一些表单元素常用的属性和属
form表单以json格式向后台传输
xgysimida的博客
08-20 1697
最终实现效果如下： 直接上html的程序，相关的js路径都弄好了，直接复制粘贴就可以 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="http://cdn.bootcss.com/jquery/1.12.2/jquery.js"></scri
html5初探ppt,HTML5---HTML5初探151019.ppt
weixin_32424885的博客
06-25 87
HTML5---HTML5初探151019* HTML5新增的元素 新增的结构元素 section、article、aside、header、hgroup、footer、nav、figure 新增的其它元素 video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbr、canvas、command、details、datalist、datagr...
初探jquery——表单应用范例
10-31
### 初探jQuery——表单应用范例 #### 一、引言 随着Web开发技术的不断进步，jQuery作为一种轻量级的JavaScript库，在前端开发领域占据着举足轻重的地位。它简化了许多复杂的DOM操作，并提供了丰富的插件支持，...
html学习初探 doc
05-21
HTML的学习不仅仅限于这些基础标签，还包括表格、图像、链接、表单、框架等更复杂的元素。理解并熟练运用这些基本元素是构建网页的基础，通过不断实践和学习，可以创建出功能丰富、设计精美的网页。
CV:这是我的第一个HTML5页面
05-23
【HTML5页面初探】 HTML5是超文本标记语言（HyperText Markup Language）的第五个主要版本，它在2014年正式成为W3C的推荐标准，为Web开发带来了许多新的特性和改进。这个“CV：这是我的第一个HTML5页面”是一个初学...
聚类算法-一种无监督学习方法.docx
08-12
聚类算法是一种无监督学习方法，用于将数据集中的数据点自动分组到不同的类别中，这些类别也称为“簇”或“群”。聚类的目标是让同一簇内的数据点尽可能相似，而不同簇之间的数据点尽可能不相似。聚类算法广泛应用于多种领域，如数据挖掘、模式识别、图像分析、信息检索等。 聚类算法的基本概念 无监督学习：聚类算法不需要事先标记数据点的类别标签，而是根据数据本身的相似性来分组。 相似性度量：聚类算法依赖于某种相似性或距离度量来决定数据点之间的相似程度。常用的度量包括欧氏距离、曼哈顿距离等。 目标函数：大多数聚类算法都会尝试最小化某种目标函数，例如簇内的平方误差和（SSE）。 常见的聚类算法 K-Means K-Means 是一种原型聚类算法，它通过迭代地将数据点分配到最近的质心来形成簇，并重新计算每个簇的质心，直到质心不再显著变化为止。 在 Python 的 scikit-learn 库中，可以通过 KMeans 类实现 K-Means 聚类。 层次聚类 层次聚类构建一个树状图（称为树状图或 dendrogram），显示数据点是如何逐渐合并成簇的。 这种算法可以是凝聚型（自底向上）或分裂型（自顶向下）。
45ft集装箱模型3D图纸 STEP格式.zip
08-12
45ft集装箱模型3D图纸 STEP格式.zip
Spring Boot网吧管理系统.zip
08-12
该系统严格按照需求分析制作相关模块，并利用所学知识尽力完成，但是本人由于学识浅薄，无法真正做到让该程序可以投入市场使用，仅仅简单实现部分功能，希望日后还能改善。 本系统具有以下优点： 该系统具有较高的适用性，选用B/S结构，可以在绝大部分个人平台上使用该系统。 系统将用户权限进行划分，管理员，网管和会员都能看到及操作的信息不一样，三者具备不同的操作权限。 该系统操作界面简单明了，大部分人都可以正常使用。 但也存在以下问题需要改进： 运行时窗口不能被刷新，可以改进。 系统过于简单，显示的信息有限。。 不能添加多个管理员账号，如果可以则将利于发展网吧规模，便于网吧信息集中管理。 不能实时预约接待消息和网吧反馈建议，容易被忽视，不利于管理员服务客户。
微信小程序大作业 新闻小程序
08-12
微信小程序大作业 新闻小程序
一种简单易用的通用循环队列的C语言解决方案
08-12
博文《一种简单易用的通用循环队列的C语言解决方案》实现的代码。 在实际的嵌入式编程中，消息队列的使用还是比较频繁的，已经在文章《一种简单安全的消息队列的C语言解决方案》中说明了一种队列的解决方案，但是那种设计其中还是存在一些不方便的用法，对于嵌入式系统中一些要求或者性能限制下，可能会用到循环队列，但是对于不使用操作系统的情况下，队列相关的功能就需要手动实现。所以下面将会介绍一种简单的循环队列的实现方式。
智慧城市应急指挥中心系统平台建设方案PPT(41页).pptx
08-12
城市应急指挥系统是智慧城市建设的重要组成部分，旨在提高城市对突发事件的预防和处置能力。系统背景源于自然灾害和事故灾难频发，如汶川地震和日本大地震等，这些事件造成了巨大的人员伤亡和财产损失。随着城市化进程的加快，应急信息化建设面临信息资源分散、管理标准不统一等问题，需要通过统筹管理和技术创新来解决。 系统的设计思路是通过先进的技术手段，如物联网、射频识别、卫星定位等，构建一个具有强大信息感知和通信能力的网络和平台。这将促进不同部门和层次之间的信息共享、交流和整合，提高城市资源的利用效率，满足城市对各种信息的获取和使用需求。在“十二五”期间，应急信息化工作将依托这些技术，实现动态监控、风险管理、预警以及统一指挥调度。 应急指挥系统的建设目标是实现快速有效的应对各种突发事件，保障人民生命财产安全，减少社会危害和经济损失。系统将包括预测预警、模拟演练、辅助决策、态势分析等功能，以及应急值守、预案管理、GIS应用等基本应用。此外，还包括支撑平台的建设，如接警中心、视频会议、统一通信等基础设施。 系统的实施将涉及到应急网络建设、应急指挥、视频监控、卫星通信等多个方面。通过高度集成的系统，建立统一的信息接收和处理平台，实现多渠道接入和融合指挥调度。此外，还包括应急指挥中心基础平台建设、固定和移动应急指挥通信系统建设，以及应急队伍建设，确保能够迅速响应并有效处置各类突发事件。 项目的意义在于，它不仅是提升灾害监测预报水平和预警能力的重要科技支撑，也是实现预防和减轻重大灾害和事故损失的关键。通过实施城市应急指挥系统，可以加强社会管理和公共服务，构建和谐社会，为打造平安城市提供坚实的基础。
毕业设计php网络相册-qkrp源码含文档工具包
08-12
毕业设计php网络相册-qkrp源码含文档工具包 php，数据库mysql，jdk1.8，开发工具用ecplise、myecplise、sts、idea都可以 本网站由用户模块、风采相册、留言簿模块与管理模块等构成，其中用户模块实现了用户注册、登陆与修改个人资料等功能；在线论坛提供交流平台；风采相册实现图片上载和在线浏览功能；留言簿模块实现网上留言功能；管理模块实现用户管理、论坛管理、相册管理与留言簿管理等功能。 包含：源码、数据库脚本、论文、环境工具包、相同框架项目的安装教程（在说明文档中）
基于Springboot和Vue的中药实验管理系统源码 中药实验管理系统代码（优秀毕业设计）
最新发布
08-12
中药实验管理系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！ 系统源码（高分毕设），个人经导师指导并认可通过的98分毕业设计项目，主要针对计算机相关专业的正在做毕设的学生和需要项目实战练习的学习者。也可作为课程设计、期末大作业。包含全部项目源码[代码]、该项目可以直接作为毕设使用。项目技术栈：前端是vue，后端是springboot，项目代码都经过严格调试，代码没有任何bug！
【轨迹跟踪】基于matlab四轴飞行器轨迹跟踪（含位置 速度）【含Matlab源码 6846期】.mp4
08-12
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
HTML5游戏开发：Box2d+HTML5初探
"HTML5游戏开发涉及的技术和应用" 在HTML5游戏开发中，开发者可以利用新的Web技术来创建丰富的互动体验。"创建一个世界:-HTML5 游戏开发"这个主题，展示了如何使用Box2D库来构建一个基础的游戏环境。Box2D是一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值