广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >html5+css3怎么实现注册表单功能
  • 578

0
分享到

html5+css3怎么实现注册表单功能

2024-04-02 19:04:59 578人浏览 泡泡鱼
摘要

这篇文章主要介绍“HTML5+css3怎么实现注册表单功能”，在日常操作中，相信很多人在html5+CSS3怎么实现注册表单功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”

这篇文章主要介绍“HTML5+css3怎么实现注册表单功能”，在日常操作中，相信很多人在html5+CSS3怎么实现注册表单功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”html5+css3怎么实现注册表单功能”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

效果图如下：
html5+css3怎么实现注册表单功能
html源码：

代码如下:


<!DOCTYPE html>
<html>
<head>
<meta Http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.Googleapis.com/ajax/libs/Jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id=wrapper>
<div id=lbl></div>
<fORM>
<fieldset id=account>
<legend>个人信息</legend>
<label for=username>账号:</label>
<input id=username class=textbox type=text name=username required placeholder="请填写账号" />
<label for=passWord1>密码:</label>
<input id=password1 class=textbox type=password name=password1 required placeholder="请填写密码"/>
<label for=password2>重复密码:</label>
<input id=password2 class=textbox type=password name=password2 required placeholder="请重复密码"/>
<label for=email>邮箱地址:</label>
<input id=email class=textbox type=email name=email required placeholder="www.csdn.com" />
</fieldset>
<fieldset id=personal>
<legend>其他信息</legend>
<label for=WEBsite>个人网址:</label>
<input id=website class=textbox type=url name=website required placeholder="http://www.example.com" />
<label for=age>年龄:</label>
<input id=age class=textbox type=number name=age min=18 step=2 pattern="[0-9]{1,3}" placeholder="填写年龄">
<label for=salary>月薪:</label>
<input id=salary class=textbox type=range name=salary min=0 max=50000 step=500 pattern="[0-9]{2,}" placeholder="月薪几多" value=10000 onchange="showValue(this.value)" />
<span id=rangevalue>10000</span>
<script>
function showValue(value) {
document.getElementById("rangevalue").innerHTML=value;
}
</script>
<label for=description>描述:</label>
<textarea id=description name=description cols=30 rows=5 placeholder="这里是详细描述"></textarea>
</fieldset>
<fieldset id=confirm>
<input type=submit value="提交" />
<div class="clearfix"></div>
</fieldset>
</form>
</div>
</body>
</html>


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 h2{
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 h2{
color:#146FA0;
font-size:42px;
margin:0;
}
#wrapper h3{
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));
background:-webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
background:-moz-linear-gradient(top, #E3E3E3, #FFFFFF);
background:-ms-linear-gradient(top, #E3E3E3, #FFFFFF);
background:-o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
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));
background:url(required.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
background:url(required.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF);
background:url(required.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF);
background:url(required.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
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));
background:url(valid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
background:url(valid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF);
background:url(valid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF);
background:url(valid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
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));
background:url(invalid.png) no-repeat 200px 5px, -webkit-linear-gradient(top, #E3E3E3, #FFFFFF);
background:url(invalid.png) no-repeat 200px 5px, -moz-linear-gradient(top, #E3E3E3, #FFFFFF);
background:url(invalid.png) no-repeat 200px 5px, -ms-linear-gradient(top, #E3E3E3, #FFFFFF);
background:url(invalid.png) no-repeat 200px 5px, -o-linear-gradient(top, #E3E3E3, #FFFFFF);
}
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;
}

到此，关于“html5+css3怎么实现注册表单功能”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注编程网网站，小编会继续努力为大家带来更多实用的文章！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: html5+css3怎么实现注册表单功能

本文链接: https://www.lsjlt.com/news/75263.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • html5+css3怎么实现注册表单功能
    这篇文章主要介绍“html5+css3怎么实现注册表单功能”，在日常操作中，相信很多人在html5+css3怎么实现注册表单功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”...
    99+
    2022-10-19
  • 如何使用html5+css3实现一个注册表单
    这篇文章主要为大家展示了“如何使用html5+css3实现一个注册表单”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“如何使用html5+css3实现一个注册表单...
    99+
    2022-10-19
  • vue中怎么利用复合组件实现注册表单功能
    本篇文章给大家分享的是有关vue中怎么利用复合组件实现注册表单功能，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。具体内容如下<!doct...
    99+
    2022-10-19
  • CSS3怎么实现菜单功能
    这篇文章主要介绍“CSS3怎么实现菜单功能”，在日常操作中，相信很多人在CSS3怎么实现菜单功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS3怎么实现菜单功能”的疑惑...
    99+
    2022-10-19
  • Java web实现简单注册功能
    今天写了一个注册功能，没有用任何框架！发现不会写了，中间查了好几次百度。不过还是顺利的写完并且跑起来了。在这里记录一下。我认为有时候写这些代码还是对我们理解框架很有帮助的，因为框架也...
    99+
    2022-11-13
  • node.js实现简单登录注册功能
    本文实例为大家分享了node.js实现简单登录注册的具体代码，供大家参考，具体内容如下 1、首先需要一个sever模块用于引入路由，引入连接数据库的模块，监听服务器2、要有model...
    99+
    2022-11-13
  • 怎么用php实现简单登录和注册功能
    要实现简单的登录和注册功能，可以按照以下步骤使用PHP编写代码：1. 创建数据库表格在数据库中创建一个名为 `users` 的表格，...
    99+
    2023-10-10
    php
  • ajax中怎么实现注册功能
    ajax中怎么实现注册功能，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。一、当我们在验证表单的时候，为了阻止把错误的也发送到服务器，我们通...
    99+
    2022-10-19
  • Ajax注册用户时如何实现表单验证功能
    这篇文章主要讲解了“Ajax注册用户时如何实现表单验证功能”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Ajax注册用户时如何实现表单验证功能”吧！很多时候在网站上注册时，我们会发现，注册表...
    99+
    2023-06-08
  • 怎么用HTML5+CSS3实现拖放功能
    这篇文章主要介绍“怎么用HTML5+CSS3实现拖放功能”，在日常操作中，相信很多人在怎么用HTML5+CSS3实现拖放功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么...
    99+
    2022-10-19
  • Python+Tkinter简单实现注册登录功能
    本文实例为大家分享了Python+Tkinter简单实现注册登录功能的具体代码，供大家参考，具体内容如下 项目结构： 源代码： # -*- coding: utf-8 -*...
    99+
    2022-11-13
  • PHP怎么实现用户注册功能
    随着互联网应用的不断发展，用户注册功能已经成为各种网站和应用必备的功能之一。PHP是一种流行的服务器端脚本语言，相对于其他语言，PHP在实现用户注册功能方面更加简单、灵活、高效。本文将详细介绍PHP实现用户注册功能的步骤和相关注意事项。一、...
    99+
    2023-05-14
  • jQuery怎么实现注册正则表单验证
    使用jQuery实现注册正则表单验证的步骤如下：1. 添加jQuery库文件到HTML页面中：```html```2. 编写HTML...
    99+
    2023-08-11
    jQuery
  • SpringBoot+Vue实现简单的登录注册功能
    文章目录 一、前言1.开发环境2.功能3.项目运行截图 二、撸代码1.构建前端项目2.构建后端项目3.前端页面编写4.后端代码编写5.前后端联调 三、小结 一、前言 ...
    99+
    2023-09-20
    vue.js spring boot java mysql
  • node.js如何实现简单登录注册功能
    本文小编为大家详细介绍“node.js如何实现简单登录注册功能”，内容详细，步骤清晰，细节处理妥当，希望这篇“node.js如何实现简单登录注册功能”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。首先需要一个sev...
    99+
    2023-06-30
  • jsp怎么实现登录和注册功能
    要实现登录和注册功能，可以按照以下步骤进行：1. 创建一个登录页面（login.jsp）和一个注册页面（register.jsp）。...
    99+
    2023-08-09
    jsp
  • NodeJs+MySQL怎么实现注册登录功能
    这篇文章主要介绍“NodeJs+MySQL怎么实现注册登录功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“NodeJs+MySQL怎么实现注册登录功能”文章能帮助大家解决问题。nodejs中mys...
    99+
    2023-06-30
  • 怎么用css3制作登录表单功能
    这篇文章主要介绍“怎么用css3制作登录表单功能”，在日常操作中，相信很多人在怎么用css3制作登录表单功能问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用css3制作登...
    99+
    2022-10-19
  • Python实现修改IE注册表功能示例
    本文实例讲述了python实现修改IE注册表功能。分享给大家供大家参考，具体如下： 一、代码 # -*- coding:utf-8 -*- #! python3 import datetime import stri...
    99+
    2022-06-04
    Python 修改 IE注册表
  • Android用SharedPreferences怎么实现登录注册注销功能
    这篇“Android用SharedPreferences怎么实现登录注册注销功能”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇...
    99+
    2023-06-30
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作