HTML案例之注册页面

最新推荐文章于 2024-07-31 11:41:46 发布
最新推荐文章于 2024-07-31 11:41:46 发布
阅读量1w 收藏 165
点赞数 14
分类专栏： html学习笔记 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rihjyy/article/details/122807843
版权

HTML案例之注册页面

经过前面的学习，我们已经学了很多的标签和语法了，HTML的学习即将告一段落，我们一起来做一个综合的练习：做一个简单的小说网站的注册页面。

废话不多说，直接上代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <title>注册页面</title>
</head>
<body>
    <h3>填写基本资料(必填)</h3>
    <table cellpadding="10">
        <tr>
            <td>登陆账号:</td>
            <td>
                <input type="text" placeholder="请输入账号" name="username"> 登陆账号应由5-18位的数字、字母、下划线组成
            </td>
        </tr>
        <!-- 第一行 -->
        <tr>
            <td>账户密码:</td>
            <td>
                <input type="password" placeholder="请输入密码" name="password"> 密码长度建议在6-20位之内
            </td>
        </tr>
        <!-- 第二行 -->
        <tr>
            <td>确认密码:</td>
            <td>
                <input type="password" placeholder="请输入密码" name="password"> 密码长度建议在6-20位之内
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>昵称:</td>
            <td>
                <input type="text" placeholder="请输入昵称" name="id"> 昵称可以使用中文、英文、数字等，长度应在20为之间
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" id="nan" name="gender" value="nan"><label for="nan">男<img src=""></label>
                <input type="radio" id="nv" name="gender" value="nv"><label for="nv">女</label>
                <input type="radio" id="baomi" name="gender" value="baomi"><label for="baomi">保密</label>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年--</option>
                    <option>2000</option>
                    <option>2001</option> 
                    <option>2002</option> 
                    <option>2003</option>
                    <option>...</option>                      
                </select>
                <select>
                    <option>--请选择月--</option>
                    <option>1</option>
                    <option>2</option> 
                    <option>3</option> 
                    <option>4</option>
                    <option>...</option>                      
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option> 
                    <option>3</option> 
                    <option>4</option>
                    <option>...</option>                      
                </select>
            </td>
        </tr>
        <tr>
            <td>爱好:</td>
            <td>
                <input type="checkbox" id="junshi" name="hobby" value="junshi"><label for="junshi">军事</label>
                <input type="checkbox" id="kehuan" name="hobby" value="kehuan"><label for="kehuan">科幻</label>
                <input type="checkbox" id="xuanhuan" name="hobby" value="xuanhuan"><label for="xuanhuan">玄幻</label> 
                <input type="checkbox" id="yanqing" name="hobby" value="yanqing"><label for="yanqing">言情</label>
                <input type="checkbox" id="mohuan" name="hobby" value="mohuan"><label for="mohuan">魔幻</label>
                <input type="checkbox" id="dushi" name="hobby" value="dushi"><label for="dushi">都市</label>
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>您的邮箱:</td>
            <td>
                <input type="text" name="e-mali" placeholder="请输入您的e-mali地址">
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td></td>
            <td>
                <input type="submit" name="zhuce" value="免费注册">
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <td>
                <h5>注册用户您可以:</h5>
                <ul>
                    <li>阅读 最新最热门的网络小说</li>
                    <li>下载 众多格式的优质电子书</li>
                    <li>分享 您喜爱的作品</li>
                    <li>享受 个人书屋、藏书架等人性化服务</li>
                    <li>参与 原创社区活动</li>
                </ul>
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我已有账号，直接登录</a>
            </td>
        </tr>
    </table>
</body>
</html>

这里的代码是用表格布局的表单，里面用到知识在前面几篇文章中我都有详细的讲过，这里也不多赘述了，看不懂的小伙伴们要注意去复习了啊。我们运行结果是这样的。

在这里插入图片描述

从明天开始，我们准备开始一起继续学习css吧。

秃头少年小阮
关注
  • 14
    点赞
  • 踩
  • 165
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
HTML案例-4.注册页面表单练习
m0_46279684的博客
03-14 586
<dt>奶茶</dt><dd>奶茶是奶和茶做的</dd><dd>非常好喝</dd>...
html注册页面代码实现案例,H5制作一个注册页面的代码实例
weixin_33425215的博客
06-09 2981
HTML5写的注册页面，正在学习html5的朋友可以参考下代码如下:register.html function play(){ document .getElementById("menu_item").style. display = ""; } function noplay(){ document.getEleme...
【web前端开发网页设计】一步步实现：HTML + CSS + JavaScript 完整注册/登录表单（超实用）轻松搞定注册/登录表单功能：完整源代码与详细教程（新手必看）轻松入门前端开发新手超友好
南北极之间
06-16 813
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。
html-综合案例之注册页面
m0_53163148的博客
09-17 786
2.< lable >中添加for属性，< input >中添加id属性，将两个标签形成联系。页面布局分为上下两大部分，上面用标题标签，下面用表格标签，行标签和单元格标签。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.设置默认选中选项，在< input >标签中设置属性。右边为文本框(value设置默认值)右边是表单元素中的单选按钮。（以此类推）总共十一行。
HTML综合案例——注册页面
榕城候佳人的博客
03-05 654
🌟所属专栏：前端只因变凤凰之路🐔作者简介：rchjr——五带信管菜只因一枚😮前言：该系列将持续更新前端的相关学习笔记，欢迎和我一样的小白订阅，一起学习共同进步~👉文章简介：本文介绍一个HTML综合案例，将综合运用之前所学的表单、表格、列表、input输入元素、select选择元素、复选框等等构建一个注册页面，知识学习内容来自b站的@黑马程序员的视频😃。
HTML5用户注册页面实现案例
＃两个西柚
03-20 2425
【代码】HTML5用户注册页面实现案例。
html+css登录注册页面案例
LQlove1的博客
05-26 1万+
一、展示效果 1. 登陆页面展示（背景图片来自网络可以自己更换）： 2. 注册页面展示： 二、需要添加的normalize.css跟common.css 代码如下（normalize.css重置样式表）： /* 重置样式表 */ /* 重置内外边距 */ *{ margin: 0%; padding: 0%; box-sizing: border-box; } /* 去除图片底部4px白边 */ img{ vertical-align: middle; } /* 去
html(五)注册页面案例
wzj_110的博客
02-21 188
html5注册小案例
前端之登录注册页面案例
热门推荐
KK_2018的技术博客_程序员不止是程序员
05-08 3万+
一、效果图 （1）登录界面 （2）注册界面 二、详细设计 （1）登录界面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录界面</title> <style> ...
HTML注册界面案例
qq_47804149的博客
09-02 440
纯HTML制作的注册界面案例，案例来自黑马前端
综合案例CSS注册页面.html
01-12
综合案例CSS注册页面.html
新手入门案例 HTML表单之人人网
03-22
在这个"新手入门案例：HTML表单之人人网"中，我们将学习如何使用HTML和CSS来创建一个类似人人网的注册页面。通过这个案例，你可以掌握基本的HTML结构、表单元素以及CSS样式应用，为后续的网页开发打下基础。 首先，...
HTML5登陆注册页面模板
05-05
HTML5登陆注册页面模板是一个基于前端技术实现的交互式网页设计。这个模板主要利用了HTML5、CSS和JavaScript...对于想要提升前端开发技能或寻找快速构建登录注册页面解决方案的人来说，这是一个很好的学习和实践案例。
登录和注册html页面（简洁美观）
05-25
在这个案例中，我们讨论的是一款简洁而美观的HTML登录和注册页面，可以从17素材网站购买并下载。这样的页面设计通常注重用户体验，以吸引并方便用户进行操作。 HTML（HyperText Markup Language）是构建网页的标准...
Web前端：HTML篇（一）
sjb2274540432的博客
07-22 1164
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。
html实现酷炫美观的可视化大屏(十种风格示例，附源码)
xcLeigh
07-25 2564
html实现酷炫美观的可视化大屏(十种风格示例，附源码)，大屏源码，可视化大屏模板源码，html可视化大屏源码下载，内含十种不同风格的大屏可视化代码，详细的讲解，酷炫的线条，美观的设计，让图文图表结合的更融洽。兼容各种大屏，调整页面到合适的分辨率，F12全屏观看。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
前端Web-JavaScript(上)
最新发布
Yu2uki的博客
07-31 942
JavaScript（简称：JS） 是一门跨平台、面向对象的脚本语言，是用来控制网页行为的，实现人机交互效果。JavaScript 和 Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。组成：ECMAScript: 规定了JS基础语法核心知识，包括变量、数据类型、流程控制、函数、对象等。BOM：浏览器对象模型，用于操作浏览器本身，如：页面弹窗、地址栏操作、关闭窗口等。DOM：文档对象模型，用于操作HTML文档，如：改变标签内的内容、改变标签内字体样式等。
HTML注册页面设计代码
05-20
HTML注册页面设计代码的实现可以分为以下几个步骤： 1. 创建一个 HTML 文件，并在文件头部添加文档类型声明和字符集设置： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <!-- 注册表单 --> </body> </html> ``` 2. 在 `<body>` 标签中创建一个表单，添加必要的输入项，如用户名、密码和确认密码： ```html <form action="#" method="POST"> <label for="username">用户名：</label> <input type="text" id="username" name="username"><br> <label for="password">密码：</label> <input type="password" id="password" name="password"><br> <label for="confirm_password">确认密码：</label> <input type="password" id="confirm_password" name="confirm_password"><br> <input type="submit" value="注册"> </form> ``` 3. 添加样式，美化表单，如设置输入框的宽度和高度、字体、颜色等： ```html <style> input[type=text], input[type=password] { width: 100%; padding: 12px 20px; margin: 8px 0; display: inline-block; border: 1px solid #ccc; box-sizing: border-box; font-family: Arial, sans-serif; font-size: 16px; } input[type=submit] { background-color: #4CAF50; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer; font-family: Arial, sans-serif; font-size: 16px; } input[type=submit]:hover { background-color: #45a049; } </style> ``` 以上就是一个基本的 HTML 注册页面设计代码。如果您还有其他问题或需要更深入的了解，欢迎继续提问。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值