效果1：
效果2：

效果1：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>h2{text-align: center;}form{width: 800px;height: 800px;border: 1px solid red;margin: auto;background: rgb(106, 131, 70);}p{width: 700px;height: 80px;background: white;border-radius: 20px 20px 20px 20px;line-height: 80px;margin: auto;margin-top: 30px;padding-left: 50px;}span{margin-left: 200px;}#b{width: 60px;height: 50px;border: 1px solid rgb(61, 121, 96);background: rgb(61, 121, 96);margin:auto;margin-top: 50px;border-radius: 30px 30px 30px 30px;text-align: center;line-height: 50px;}div > input{background: rgb(61, 121, 96);}</style></head><body><h2>注册表单</h2><form action=""><p>用户昵称：<span><input type="text"></span> </p><p>Email：<span><input type="email" required placeholder="example@domain.com"></span></p><p>工作年龄：<span><input type="range" min="1" max="30"> 30 </span></p><p>年龄：<span><input type="number" required placeholder="your age" min="1" max="20" step="3"></span></p><p>出生日期：<span><input type="date"></span></p><p>个人主页：<span><input type="url"></span></p><div id="b"><input type="button" value="注册"></div></form></body></html>

效果2：


<html><head><meta charset="utf-8"><title>注册表单</title><STYLE type=text/css>* {margin: 0;padding: 0;list-style: none;}body {font-size: 12px;font-family: "Times New Roman", Times, serif;line-height: 1.25;text-align: center;}h1 {font-weight: bold;line-height: 2em;margin: 10px auto;}form {width: 500px;margin: 0 auto;background: #9cbc2c;border-radius: 5px;box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);padding: 4px;}fieldset {padding: 10px;border-style: none;}#regForm ol li {margin-bottom: 12px;background: white;border: 1px solid #f7f7f7;border-radius: 5px;padding: 5px 10px;line-height: 30px;height: 30px;position: relative;}#regForm label {float: left;width: 120px;font: italic 13px/30px Georgia, "Times New Roman", Times, serif;}#regForm button {margin: 5px auto;background: #384313;font: 14px Georgia, "Times New Roman", Times, serif;color: #ffffff;letter-spacing: 1px;text-shadow: 0 1px 1px #000000;border-radius: 14px;border-style: none;padding: 4px 15px;}#regForm ol li:hover {background: #f7f7f7;border-color: #9cbc2c;}</STYLE></head><body><h1>注册表单</h1><form id=regForm onsubmit="return chkForm();" method=post><fieldset><ol><!-- span 与 lable是一样功能的标签--><li><label for=username>用户昵称：</label><input id=username name=username type="text" autofocus required></li><li><label for=uemail>Email：</label><input id=uemail type=email name=uemail required placeholder="example@domain.com"></li><li><label for=age>工作年龄：</label><input id=age type=range name=range1 max="60" min="18"><outputonforminput="value=range1.value">30</output></li><li><label for=age2>年龄:</label><input id=age2 type=number required placeholder="your age"></li><li><label for=birthday>出生日期：</label><input id=birthday type=date></li><li><label for=search>个人主页：</label><input id=search type=url required list="searchlist"><datalist id=searchlist><option label="Google" value="http://www.google.com" ><option label="Yahoo" value="http://www.yahoo.com" ><option label="Bing" value="http://www.bing.com" ><option label="Baidu" value="http://www.baidu.com" ></datalist></li><li><select><option>1</option><option>2</option></select></li></ol></fieldset><div><button type=submit>注册</button> </div></form></body></html>

HTML注册表单的页面制作相关推荐

制作一个注册表单页面
制作一个表单注册页面在Dreamweaver中创建一个.html文件,添加一个11行2列的表格,左侧的内容是手动输入(第一行也手动输入),右侧的内容是用代码来写的(最后一行也是用代码来写)(用代码写 ...
html5 注册协议弹出层,js制作带有遮罩弹出层实现登录注册表单特效代码分享
本文实例讲述了js制作带有遮罩弹出层实现登录注册表单代码特效代码.分享给大家供大家参考.具体如下: 运行效果图: ----------------------查 ...
购物车的制作与注册表单验证
购物车的制作 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
html语言怎么清除用户名 name= password=,在html页面中填写注册表单后，它会给出这个错误，并使用用户名和密码并将值存储在登录表单中...
在html页面中填写注册表单后,它会给出此错误,并使用用户名和密码并将值存储在登录表单中:TypeError at /login/ argument of type 'NoneType' is not ...
html表单注册跳转页面,出现一个问题，点击“注册”按钮页面进入注册表单后自动跳转回登录页面...
源自:4-5 单页面应用Demo2(2) 出现一个问题,点击"注册"按钮页面进入注册表单后自动跳转回登录页面用户名: 密码: 登录注册用户名: 密码: 再次输入密码: 确定 ...
哔哩哔哩注册--表单练习
哔哩哔哩注册–表单练习 HTML代码可能代码有些不足或者用词不当等希望大家能够见谅这是一次bilibili的注册表单练习里面都有详细注释当然一个网页有许多种这只是其中一种是为了相互交流 ...
登录界面转换实现html,html5和css3登录注册表单界面切换动画
这是一款使用html5和css3 伪类:target制作的登录界面和注册表单界面切换动画. HTML html结构包含两个表单:登录表单和注册表单.开始时使用css将注册表单隐藏. Log in Yo ...
登录滑块验证表单_如何构建双滑块登录和注册表单
登录滑块验证表单 Some of you might already know but for those who don't, I'm starting a Weekly Coding Challe ...
jQuery带背景切换登录注册表单
jQuery带背景切换登录注册表单原始HTML+CSS+JS页面设计,这是一个不错的登录网页制作,画面精明,非常适合初学者学习使用. 作品介绍 1.网页作品简介方面 :jQuery带背景切换登录注册 ...
ajax注册表单用户名实时验证,Ajax注册表单用户名实时验证..doc
Ajax注册表单用户名实时验证. Ajax注册表单用户名实时验证 1.1.1 摘要很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用 ...

HTML注册表单的页面制作

效果1：

效果2：

HTML注册表单的页面制作相关推荐

最新文章

热门文章