HTML表单效果图,HTML_html5+css3实现一款注册表单实例，效果图如下： html源码： 复制 - phpStudy...

最新推荐文章于 2022-08-03 11:06:19 发布
最新推荐文章于 2022-08-03 11:06:19 发布
阅读量167 收藏
点赞数
文章标签： HTML表单效果图

html5+css3实现一款注册表单实例

效果图如下：

html源码：

复制代码代码如下:

个人信息

账号:

密码:

重复密码:

邮箱地址:

其他信息

个人网址:

年龄:

月薪:

10000

function showValue(value) {

document.getElementById("rangevalue").innerHTML=value;

}

描述:

css源码：

复制代码代码如下:

body{

background:url(bg.jpg) repeat;

font-family:Arial Narrow, Arial, sans-serif;

margin:0;

padding:0;

}

header, section, footer{

display:block;

}

header{

width:100%;

background-color:rgb(0, 0, 0);

background-color:rgba(0, 0, 0, 0.9);

color:#ccc;

padding:15px 0;

letter-spacing:1px;

margin-bottom:20px;

position:relative;

}

header h1{

margin:0 50px;

text-shadow:2px 2px 2px #888;

float:left;

}

#backlinks{

float:right;

margin:-10px 20px;

line-height:25px;

font-weight:bold;

font-size:12px;

text-align:right;

}

#backlinks a{

color:#ccc;

text-decoration:none;

margin:3px 0 0;

display:block;

}

#backlinks a:hover{

color:#fff;

}

footer{

background-color:rgb(0, 0, 0);

background-color:rgba(0, 0, 0, 0.8);

height:25px;

width:100%;

line-height:25px;

position:relative;

font-family:Arial,Helvetica,sans-serif;

bottom:0;

left:0;

color:#888;

font-size:11px;

}

footer span{

padding-left:20px;

}

footer a{

color:#1FA2E1;

}

#wrapper{

width:770px;

margin:0 auto;

text-align:center;

}

#wrapper hgroup{

margin:20px 0;

text-shadow:1px 1px 1px #ccc;

}

#wrapper h1{

color:#146FA0;

font-size:42px;

margin:0;

}

#wrapper h2{

color:#71C1ED;

font-size:27px;

margin:0;

}

#lbl{

color:#777;

font-size:17px;

font-weight:bold;

text-shadow:1px 1px 0 #fff;

margin:10px 0;

}

*:focus{

outline:none;

}

label, input, textarea, fieldset{

display:block;

}

fieldset#account, fieldset#personal{

width:250px;

padding:0 50px 50px;

margin:10px;

float:left;

background:rgb(244,244,244);

background:rgba(244,244,244,0.7);

-webkit-border-radius: 25px;

-moz-border-radius: 25px;

border-radius: 25px;

border:3px double #999;

}

fieldset#confirm{

padding-top:10px;

clear:both;

border:none;

line-height:15px;

margin:10px 0;

}

fieldset#confirm label, fieldset#confirm input{

display:inline;

float:left;

margin:15px 5px 0;

}

legend{

font-size:20px;

font-weight:bold;

letter-spacing:5px;

color:#999;

margin-left:-20px;

text-align:left;

padding:0 10px;

text-shadow:1px 1px 0 #ccc;

}

label{

font-size:17px;

font-weight:bold;

margin:17px 0 7px;

text-align:left;

text-shadow:1px 1px 0 #fff;

}

textarea{

resize:both;

max-width:230px;

}

input.textbox, textarea{

padding:5px 10px;

-webkit-border-radius: 15px;

-moz-border-radius: 15px;

border-radius: 15px;

border:1px solid #fff;

width:200px;

text-shadow:1px 1px 1px #777;

-moz-box-shadow: 0px 2px 0px #999;

-webkit-box-shadow: 0px 2px 0px #999;

box-shadow: 0px 2px 0px #999;

-webkit-transition: all 0.5s ease-in-out;

-moz-transition: all 0.5s ease-in-out;

transition: all 0.5s ease-in-out;

background:url(required.png) no-repeat 200px 5px #F0F0EF;

background:-webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */

background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */

background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */

background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */

background:-o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */

}

input.textbox:focus, textarea:focus{

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

transform: scale(1.1);

-moz-box-shadow: 5px 3px 1px #ccc;

-webkit-box-shadow: 5px 3px 1px #ccc;

box-shadow: 7px 7px 2px #ccc;

text-shadow:1px 1px 3px #777;

}

input.textbox:required{

background:url(required.png) no-repeat 200px 5px #F0F0EF;

background:url(required.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */

background:url(required.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */

background:url(required.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */

background:url(required.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */

background:url(required.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */

}

input.textbox:required:valid{

background:url(valid.png) no-repeat 200px 5px #F0F0EF;

background:url(valid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */

background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */

background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */

background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */

background:url(valid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */

}

input.textbox:focus:invalid, input.textbox:not(:required):invalid{

background:url(invalid.png) no-repeat 200px 5px #F0F0EF;

background:url(invalid.png) no-repeat 200px 5px, -webkit-gradient(linear, left top, left bottom, from(#E3E3E3), to(#FFFFFF)); /* Saf4+, Chrome */

background:url(invalid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF); /* Chrome 10+, Saf5.1+ */

background:url(invalid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF); /* FF3.6+ */

background:url(invalid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF); /* IE10 */

background:url(invalid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF); /* Opera 11.10+ */

}

input[type=submit] {

padding:10px;

margin:0 10px !important;

width:300px;

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

input[type=range] {padding:0;}

}

#rangevalue{

display:block;

text-align:right;

margin-top:-25px;

}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {

color: #aaa;

font-style:italic;

text-shadow:1px 1px 0 #fff;

}

input:-moz-placeholder, textarea:-moz-placeholder {

color: #aaa;

font-style:italic;

text-shadow:1px 1px 0 #fff;

}

.clearfix{

clear:both;

}相关阅读:

微软研发中心发布Win10新功能 win10新特性汇总

sqlServer使用ROW_NUMBER时不排序的解决方法

AngularJS基础 ng-mousemove 指令简单示例

Android中使用socket通信实现消息推送的方法详解

鼠标拖拽移动子窗体的JS实现

用jquery中插件dialog实现弹框效果实例代码

jsp实现将信息放入xml中的方法

.net邮箱发布邮箱信息的实例

php+MySql实现登录系统与输出浏览者信息功能

win10更新定点设置后电脑Fn键失灵问题修复两种方法

ThinkPHP写数组插入与获取最新插入数据ID实例

java selenium元素定位大全

oracle trunc()函数的使用方法

为Linux系统的服务器设置防火墙的方法

海风很想你
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用HTML语言和JAVA语言编写一份表单
m0_65358564的博客
10-15 2860
使用HTML语言和JAVA语言制作一份表单
用 HTML 做一个表单模板
Regino的博客
04-05 8858
本文包括了 HTML 的简述和用 HTML 做一个表单模板的相关内容。。。
HTML5表单的应用
码云仓库地址：https://gitee.com/lance-gyq
11-29 1144
** 表单的应用 ** 作用：收集用户信息，并将信息发送给服务器。 一、创建表但基本格式如下： 例子： 主要代码： 效果： 二、表单属性： 设置表单属性可以实现提交方式、自动完成、表单验证等不同功能。 下面将对from标记相关属性进行讲解： 1. action属性: 用于指定接受并处理表单数据的服务器程序url地址. method属性： 用于设置表单数据提交方式，可以取值为get或post。 get为默认属性,浏览器会与表单服务器建立连接，然后直接在一个传输步骤中发送所有表单数...
html怎么设计表单效果,HTML表单
weixin_39830205的博客
06-03 270
一、HTML表单表单是用来填写并收集用户信息的单子，就像银行存款单一样。HTML中的表单也是这样，比如注册QQ时填写的信息，问卷调查等都是常见的HTML表单。二、如何制作表单HTML中的表单通常写在标签中。这是因为用户填写完相关的表单信息，需要将其发送到服务端，如果不用标签包裹，那么可能出现发送的信息遗漏等问题。Demo如下:表单姓名：密码：性别：男女爱好：dota旅游宠物评论：我的car：萨博朗...
使用html表单制作简单网页（加表单详细知识点）
weixin_54107527的博客
04-01 4353
表单也是html非常重要的一块，常用于输入信息，进行信息的收集和提交 属性： action：信息提交地址 method：提交方式 get 信息拼接在地址中，不安全 post 信息打包发送，安全 select：下拉菜单 option：下拉菜单中的选项 textarea：多行文本域 可以加样式resize：none取消调整大小 input： 标签<input type=" " name=" ...
langlangDental::man_health_worker: HTML5_CSS3基础学习项目 - 朗朗口腔
08-04
HTML5/CSS3基础教程 教程官网： 视频地址： 项目访问： 学习内容：原生页面布局、标签语义化；熟练掌握常规属性，CSS3 选择器，定位 position，浮动 float，弹性布局 flex，过渡，圆角，阴影，以及 CSS3 新特性属性...
646-毕设-基于php的HTML5二手图书交易系统-源码-LW-PPT.rar
10-16
运行软件：小皮phpStudy 浏览器：谷歌浏览器 PHP配置环境链接：https://pan.baidu.com/s/1Co7e48rWFP3IDPk38nwIrA 提取码：0000 后台路径地址：localhost:8080/项目名称/admin/dist/index.html 前台路径地址：...
vue-admin-html：Vue-cli3.0 +元素UI + Spring Boot2.0 + ThinkPHP5.1 +响应式的后台管理系统https：lmxdawn.github.iovue-admin
01-29
项目JAVA首次地址： 项目PHP参考地址： 欢迎星整体效果目前v3.0.0版本更新日志更新vue-cli为3.0版本增加广告管理优化路由控制优化一些配置文件登录用户信息存储更改cookie一键操作包Windows上面建议用phpstudy，...
html+css网页设计（静态网页）
06-20
3. **网页布局**：CSS提供了多种布局方式，如流体布局（使用百分比单位实现响应式设计）、网格系统（利用`display: grid`或`flexbox`创建灵活的布局）以及盒模型（理解元素的width、padding、border和margin如何影响...
基于php+mysql+html超市商品管理系统（源码+数据库+论文）
最新发布
05-02
功能设计： （1）管理员注册 ...（3）商品库存数量管理 该模块实现用户对商品库存数量的及时管理 环境：vscode/phpstudy,mysql8 ,php7以上 详见：https://blog.csdn.net/Timi2019/article/details/138398728
html中可以做出哪些效果,9个值得学习的 HTML5 效果【附源码】
weixin_34917038的博客
06-08 852
这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点，拥有很多让人期待已久的新特性，特别是在移动端，Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的Web 应用。超炫 HTML5 粒子效果进度条我喜欢粒子效果作品，特别是那些能够应用于实际的，例如这个由 Jack Rugile 基于HTML5Cavnas 编写的进度条效果。看着这么炫的...
html5和css表单代码,HTML 5和CSS3表单示例和详细教程汇总
weixin_35752645的博客
06-20 258
为Web开发人员提供了详细参考指南。以下是文章摘要：本教程演示如何使用HTML5创建既时尚又好用的邮箱注册表单。引导大家一步一步创建占位符文本、表单域、邮箱+网络+手机、日程选择器等功能。有大部分的表单为了增强功能却降低输入框的标准。虽然在旧版本的浏览器中并不完全支持HTML5特性，但在教程中会演示如何解决和正确添加新功能。 【示例】此教程属于中等难度，演示如何创建一个具有滑动效果、数字微调、日期...
实验3 html5表单,用HTML5+css3制作HTML5验证的网页表单
weixin_39900736的博客
06-08 279
今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。文章简介：今天我们一起来看看如何创建一个实用并且功能强大的表单，表单使用如今最热门的技术HTML5和css3来创建，并且可以通过HTML5进行客户端验证。第十四步：介绍HTML5的pattern属性用type="email"属性来举例说明，在大部分浏览器中...
【4001】通过html做一个静态页面的表格表单，嘿嘿。
Caojian_0的博客
08-03 1423
【4001】通过html做一个简单的表格表单，嘿嘿。
html5发光动态效果图,一款带有发光动画的HTML5表单
weixin_42110038的博客
06-03 551
今天给大家秀一款带有发光动画的HTML5表单，挺酷的，效果图如下：当表单获取焦点时，表单四周就会呈现出发光动画的效果，并不断地进行颜色渐变；当表单失去焦点时，停止发光。其中颜色渐变的动画只有基于webkit的浏览器才有效果，比如chrome和safari。下面简单贴一下实现这个发光HTML5表单的CSS代码和HTML代码，如果你喜欢可以将它分享给你的朋友。HTML代码如下：EmailPasswor...
XHTML5 ----- 表单验证（用户名、密码和email检测）
博客
09-24 2363
指向表单元素 关于email 关于url 关于时间 后边两个支持率相当差，不推荐使用 关于number 关于range 关于color placeholder required默认验证规则 自定义验证 maxLength
用html语言设计1个表单,请用HTML语言设计一个表单程序
weixin_42307290的博客
06-09 526
共回答了20个问题采纳率：90%表单是实现动态网页的一种主要的外在形式。表单和表单域并不具有排版的能力，表单网页的制作最终还是要由表格组织起来。html表单是html页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 在浏览网站时经常会遇到表单，它是网站实现互动功能的重要组成部分。无论网站使用的是那种形式的语言来实现网站的互动功能，例如ASP、PHP、JSP，表单已经成为它们...
html实例，实现表单
aigo_2021的博客
03-29 6868
1.使用HTML完成下列功能 <!doctype html> <html> <head> <!-- <meta charset="GBK">--> </head> <body> <table width="60%" border="3" align="center" bgcolor="#F0F8FF" borderColor="blue"> <tr> &l.
HTML简单表格表单设计实验（含代码）
bruuuuuuuuno的博客
06-27 3668
目录目的和要求内容和步骤代码货品价格表用户留言表单心得体会 目的和要求 掌握 HTML 语言的使用，例如：TABLE、FORM、FRAME、CSS 等。 必须使用到 CSS。 必须有 HTML5 元素。 电子邮件输入框必须有邮件格式输入验证，采用客户端验证方法。 内容和步骤 1、创建如下图所示的货品价格表： 2、创建如下图所示的用户留言表单： 代码 货品价格表 <!DOCTYPE html> <html lang="en"> <head> <meta c
php分享到qq空间实现,HTML_QQ空间发光文字实现步骤，作者要实现类似QQ空间里的发 - phpStudy...
06-02
对于分享到QQ空间，可以使用QQ空间的API来实现。下面是实现步骤： 1. 首先需要申请QQ互联的开发者账号，并且创建一个应用。 2. 在应用中开启分享到QQ空间的功能，并获取到app ID和app key。 3. 在PHP中使用QQ空间...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值