HTML+CSS实现的简单注册表单

最新推荐文章于 2022-11-09 23:50:23 发布
最新推荐文章于 2022-11-09 23:50:23 发布
阅读量7.3k 收藏 19
点赞数 2
分类专栏： CSS+HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhanglei_uestc/article/details/18729809
版权

效果总览：


具体代码实现

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>提交用户信息</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
body, div, td, input {font-size:12px; margin:0px; }
select {height:20px; width:300px; }
.title {font-size: 16px; padding: 10px; width:80%; }
.text {height:20px; width:300px; border:1px solid #AAAAAA; }
.line {margin:2px; }
.leftDiv {width:110px; float:left; height:22px; line-height:22px; font-weight:bold; }
.rightDiv {height:42px; }
.button {
color:#fff;
font-weight:bold;
font-size: 11px;
text-align:center;
padding:.17em 0 .2em .17em;
border-style:solid;
border-width:1px;
border-color:#9cf #159 #159 #9cf;
background:#69c url(images/bg-btn-blue.gif) repeat-x;
}
</style>
</head>
<body>
<form action="/servlet/servlet/PostServlet" method="POST">
<div align="center">
<br/>
<fieldset style='width:90%'>
<legend>填写用户信息</legend>
<br/>
<div class='line'>
<div align="left" class='leftDiv'>请填写您的姓名：</div>
<div align="left" class='rightDiv'>
<input type="text" name="name" class="text" />
</div>
</div>
<div class='line'>
<div align="left" class='leftDiv'>请填写您的密码：</div>
<div align="left" class='rightDiv'>
<input type="password" name="password" class="text" />
</div>
</div>
<div class='line'>
<div align="left" class='leftDiv'>请再次输入密码：</div>
<div align="left" class='rightDiv'>
<input type="password" name="passwordConfirm" class="text" />
</div>
</div>
<div class='line'>
<div align="left" class='leftDiv'>请选择性别：</div>
<div align="left" class='rightDiv'>
<input type="radio" name="sex" value="男" id="sexMale">
<label for="sexMale">男</label>
<input type="radio" name="sex" value="女" id="sexFemale">
<label for="sexFemale">女</label>
</div>
</div>
<div class='line'>
<div align="left" class='leftDiv'>请输入年龄：</div>
<div align="left" class='rightDiv'>
<input type="text" name="age" class="text">
</div>
</div>
<div class='line'>
<div align="left" class='leftDiv'>请输入生日：</div>
<div align="left" class='rightDiv'>
<input type="text" name="birthday" class="text">
<br/>格式："yyyy-mm-dd"
</div>
</div>
<div class='line'>
<div align="left" class='leftDiv'>请选择您的爱好</div>
<div align="left" class='rightDiv'>
<input type="checkbox" name="interesting" value="音乐影视" id="i1">
<label for="i1">音乐影视</label>
<input type="checkbox" name="interesting" value="外出旅游" id="i2">
<label for="i2">外出旅游</label>
<input type="checkbox" name="interesting" value="社交活动" id="i3">
<label for="i3">社交活动</label>
</div>
</div>
<div class='line'>
<div align="left" class='leftDiv'>请选择省市：</div>
<div align="left" class='rightDiv'>
<select name="area">
<option>---请选择省份---</option>
<optgroup label="北京市">
<option value="北京市海淀区">海淀区</option>
<option value="北京市朝阳区">朝阳区</option>
<option value="北京市东城区">东城区</option>
<option value="北京市西城区">西城区</option>
</optgroup>
<optgroup label="山东省">
<option value="山东省济南市">济南市</option>
<option value="山东省青岛市">青岛市</option>
<option value="山东省潍坊市">潍坊市</option>
</optgroup>
</select>
</div>
</div>
<div class='line'>
<div align="left" class='leftDiv'>自我描述：</div>
<div align="left" class='rightDiv'>
<textarea name="description" rows="4" style="width:300px; ">请填写其他资料... </textarea>
</div>
</div>
<br/>
<div class='line'>
<div align="left" class='leftDiv'></div>
<div align="left" class='rightDiv'>
<br/><input type="submit" name="btn" value=" 提交信息 " class="button"><br/>
</div>
</div>
</fieldset>
</div>
</form>
</body>

</html>

代码分析


文档类型声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

这段代码叫做DOCTYPE声明。DOCTYPE是document type(文档类型)的简写，用来说明你用的XHTML或者HTML是什么版本。这里说明你用的是"HTML 4.01"版本,类似的还有: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
这里声明本文档使用的是XHTML 1.0版本. 

HTML<style>标签

<style> 标签定义文档中的样式。

如果需要在文档中引用样式表，应该定义外部的样式表，然后使用 <link> 来连接这个样式表。

提示：在 HTML5 中，所有元素都不支持 style 属性，如需为一个元素添加样式，请在 style 元素中使用 scoped 属性。

注释：如果没有定义 scoped 属性，则 <style> 元素必须是 head 元素的子元素，或者是（属于 head 元素的子元素的） noscript 元素的子元素。

<head>
    <style type="text/css">
    h1 {color: blue}
    h2 {color: red}
    </style>
</head>

HTML<FieldSet>标签

 HTML legend 标签

如果一个页面的表单项太多,我们最好把它们分组显示,就像使用p标签分开段落一样,可以使用fieldset与legend标签对表单内容分组.

fieldset 标签 -- 对表单进行分组
  • fieldset标签是成对出现的,以<fieldset>开始,以</fieldset>结束
  • 一个表单可以有多个<fieldset>,每对<fieldset>为一组,每组内容的描述可以使用legend标签说明
  • 引用网址:http://www.dreamdu.com/xhtml/tag_fieldset/
  • 属性:


wangluozhangleilei
关注
  • 2
    点赞
  • 踩
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html+css+js实现简单版仿阿迪达斯商城
01-05
使用了html+css+js实现一个简单的阿迪达斯网站，有注册登陆表单，二级三级页面，包括轮播图、放大镜等功能，有需要的小伙伴留个关注自取哦
编写注册表单 HTML
一七
03-28 3332
通过编写一个注册页学习 HTML 表单学习如何控制人们在表单中可以输入的数据类型，以及使用一些新的 CSS 工具装饰页面
HTML,CSS,JavaScript登录注册页面
qq_51359038的博客
08-09 864
本页面运用了HTML,CSS,JavaScript，其中，HTML,CSS用于创建表单并进行样式设计，JavaScript用于进行表单验证。 效果图如下： 登录，注册页面.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">...
html和css制作一个注册页面,html5+css3实现一款注册表单实例
weixin_35723036的博客
06-03 617
效果图如下：html源码：个人信息账号:密码:重复密码:邮箱地址:其他信息个人网址:年龄:月薪:10000function showValue(value) {document.getElementById("rangevalue").innerHTML=value;}描述:css源码：body{background:url(bg.jpg) repeat;font-family:Arial Nar...
CSS3大样式字段集注册表单
culiao9310的博客
09-28 118
字段校验 css样式Experimenting with CSS3, I created a big style registration form with rounded borders and shadow effects. The only image used is not the button, but the pen that serves as a background image...
【HTML/CSS】简单登录注册表单制作
m0_49442965的博客
11-09 3612
Microsoft Edge这个浏览器就不显示（支持）background-size包含在background这个复合属性里面。上述这种写法是对的，我的HTML书本上还包含有background-size属性，我建议这个单独写，至于正则表达式，我还是喜欢在JS里面单独判定给出提示。
Html+CSS实现简单的注册表单
mohen110的博客
09-17 1万+
这次和大家分享一个用html语言实现的一个简单的注册表单,豪华升级版在文末的链接,感兴趣的可以点击浏览. 来, 先看预览 预览 在这里呢,我们将html和css分开编写 html: <!doctype html> <html> <head> <meta charset="utf-8"> <title>程序员阿菜</title> </head> <body> <div class...
html5+css3实现一款注册表单实例
09-28
注册表单采用html5+css3布局实现，效果相当不错，感兴趣的前端web设计者可以参考下哈，希望可以帮助到你
HTML5 CSS登录注册表单界面示例源码
热门推荐
qq_17240471的博客
11-28 4万+
先上图 高质量前端技术交流，有问必答q群：579720104 html &lt;!DOCTYPE html&gt; &lt;html lang="zh"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,
js+html+css实现简易商城项目
12-25
这是一个商城小项目，内含电子时钟、轮播图、表单验证、验证码等功能，包含注册、登录、设计说明、问卷调查、网上投票等页面！
HTML-表单标签制作注册页面
07-22
HTML中使用表单标签制作注册页界面，表单标签重要的是使用type属性
基于Web基础的投票网站（html+css+js）
07-04
制作美观大方的登录页面和注册页面，使用HTML、CSS和JavaScript知识，制作表单页面，并使用虚拟帐号实现登录和重定向功能 2).以表格或div布局方式，设计较人性化、美观大方的投票表单。 3).用图形化方式，展示使用...
基于html+css+js实现的共享视频静态网站（含报告）
06-30
使用百度图片搜索功能，搜索美观大方的登录页面和注册页面，模仿其界面布局，使用所学的HTML、CSS和JavaScript知识，制作自己的表单页面，并使用虚拟帐号实现登录和重定向功能。 2).以表格或div布局方式，设计较人性...
纯CSS3实现表单验证效果(非常不错)
12-29
今天继续学习Web表单相关的内容，不过今天重点落实到实战中，利用HTML5表单与CSS3-UI实现一款不错的表单效果。 效果可看下面动图： 如效果演示，我们今天就通过简单几行CSS就可实现。 主要介绍内容 1、CSS3用户接口...
node-v9.6.0-x86.msi
04-29
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
Python基于机器学习的分布式系统故障诊断系统源代码，分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别
04-29
基于技术手段（包括但不限于机器学习、深度学习等技术）对分布式系统的故障数据进行分析，设计故障诊断模型，高效地分析并识别故障类别，实现分布式系统故障运维的智能化，快速恢复故障的同时大大降低分布式系统运维工作的难度，减少运维对人力资源的消耗。在分布式系统中某个节点发生故障时，故障会沿着分布式系统的拓扑结构进行传播，造成自身节点及其邻接节点相关的KPI指标和发生大量日志异常
JavaScript前端开发的核心语言前端开发的核心语言
最新发布
04-29
javascript 当今互联网时代，JavaScript已经成为了前端开发的核心语言它是一种高级程序设计语言，通常用于网页的交互和动态效果的实现。JavaScript的灵活性以及广泛的使用使得它变得异常重要，能够为用户带来更好的用户体验。 JavaScript的特点之一是它的轻量级，它可以在网页中运行无需单独的编译或下载。这意味着网页可以更快地加载并且用户无需安装额外的软件才能运行网页上的JavaScript代码。此外，与HTML和CSS紧密结合，可以直接在HTML文档中嵌入，使得网页的开发变得非常便捷。 JavaScript具有动态性，它可以在浏览器中实时修改页面内容和样。它可以通过操作DOM（文档对象模型来动态地修改网页的结构和布局，并且可以根据用户的行为实时地响应各种事件，如点击、标悬停、滚动等。这使得开发者可以轻松地为网页添加交互性和动态效果，提供更好的用户体验。 JavaScript也是一种面向对象的语言。它支持对象、类、继承、多态等面向对象编程的概念，使得代码结构更加清晰和可维护。开发者可以创建自定义的对象和方法，对功能进行封装和复用，提高代码的可读性和可维护性。
四则运算自动生成程序安装包
04-29
四则运算自动生成程序安装包
基于Linux的私有文件服务器(网盘).zip
04-29
基于Linux的私有文件服务器(网盘)
前端html+css+js注册+登录案例
06-07
好的，以下是一个简单的前端HTML + CSS + JS注册和登录案例： HTML代码： ``` <!DOCTYPE html> <html> <head> <title>注册和登录</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>欢迎注册和登录</h1> <div class="container"> <div class="form-container"> <h2>注册</h2> <form id="register-form" onsubmit="return validateRegisterForm()"> <label for="username">用户名:</label> <input type="text" name="username" id="username"> <label for="password">密码:</label> <input type="password" name="password" id="password"> <label for="email">电子邮件:</label> <input type="email" name="email" id="email"> <button type="submit">注册</button> </form> </div> <div class="form-container"> <h2>登录</h2> <form id="login-form" onsubmit="return validateLoginForm()"> <label for="username">用户名:</label> <input type="text" name="username" id="login-username"> <label for="password">密码:</label> <input type="password" name="password" id="login-password"> <button type="submit">登录</button> </form> </div> </div> <script src="script.js"></script> </body> </html> ``` CSS代码： ``` body { font-family: Arial, Helvetica, sans-serif; background-color: #f4f4f4; } h1 { text-align: center; margin-top: 50px; } .container { display: flex; flex-direction: row; justify-content: center; align-items: center; margin-top: 50px; } .form-container { background-color: #fff; padding: 20px; margin: 20px; border-radius: 5px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); } label { display: block; margin-bottom: 5px; } input[type="text"], input[type="password"], input[type="email"] { width: 100%; padding: 10px; margin-bottom: 10px; border: none; border-radius: 5px; background-color: #f4f4f4; } button[type="submit"] { background-color: #4CAF50; color: #fff; padding: 10px; border: none; border-radius: 5px; cursor: pointer; } button[type="submit"]:hover { background-color: #3e8e41; } ``` JavaScript代码： ``` function validateRegisterForm() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var email = document.getElementById("email").value; if (username == "") { alert("请输入用户名"); return false; } if (password == "") { alert("请输入密码"); return false; } if (email == "") { alert("请输入电子邮件"); return false; } alert("注册成功！"); return true; } function validateLoginForm() { var username = document.getElementById("login-username").value; var password = document.getElementById("login-password").value; if (username == "") { alert("请输入用户名"); return false; } if (password == "") { alert("请输入密码"); return false; } alert("登录成功！"); return true; } ``` 这个案例包含一个注册表单和一个登录表单。当用户提交表单时，JavaScript代码会验证输入是否有效，并根据结果显示成功或失败消息。您可以将此代码作为起点，进行更多的开发和改进，以实现更完整的注册和登录功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值