html9 登录 注册界面

最新推荐文章于 2024-02-07 18:40:26 发布
最新推荐文章于 2024-02-07 18:40:26 发布
阅读量103 收藏
点赞数
分类专栏： HTML CSS JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/flyzer/article/details/115578440
版权

综合案例

目标效果：

我的代码（有些地方写的不合适，可以看下面老师讲的代码）：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title> 我的页面 </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <form>
        性别 <input type="radio" name="sex" checked="checked">男 <input type="radio" name="sex">女    <br>
        生日
        <select>
            <option>1995</option>
            <option>1996</option>
            <option>1997</option>
            <option>1998</option>
            <option>1999</option>
        </select> 
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select> 
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
        </select> 
        <br>
        所在地区：
        <select>
            <option>北京</option>
            <option>河南</option>
            <option>吉林</option>
        </select>
        <br>    
        婚姻状况：
        <input type="radio" name="hunyin" checked="checked">未婚 <input type="radio" name="hunyin">离异 <input type="radio" name="hunyin">丧偶    
        <br>
        学历：
        <select>
            <option>小学</option>
            <option>初中</option>
            <option>高中</option>
            <option>专科</option>
            <option>本科</option>
            <option>研究生</option>
            <option>博士</option>
        </select>
        <br>
        喜欢的类型：
        <input type="checkbox">妩媚的 <input type="checkbox">可爱的 <input type="checkbox">小鲜肉 <input type="checkbox">老腊肉
        <br>
        自我介绍：
        <textarea colos="50" rows="5">请输入您的自我介绍</textarea>
        <br>
        <input type="button" value="免费注册">
        <br>
        <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
        <br>
        <a href="#">我是会员，立即登录</a>
        <br>
        <h5>我承诺</h5>
        <ul>
            <li>年满18岁、单身</li>
            <li>抱着严谨的态度</li>
            <li>真诚的寻找另一半</li>
        </ul>
    </form>
</body>
</html>

我的效果：

听完老师讲解后修改的代码：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title> 我的页面 </title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h4>青春不常在，抓紧谈恋爱</h4>
    <!-- 写的时候table里面加border="1"看着更清晰 -->
    <table width="500">
        <!-- 第一行 -->
        <tr>
            <td>性别：</td>
            <td>
                <input type="radio" name="sex" id="man" checked="checked"> <label for="man"> <img src="man.jpg"> 男 </label>
                <input type="radio" name="sex" id="woman"> <label for="woman"> <img src="woman.jpg"> 女 </label>
            </td>

        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                    <option>1999</option>
                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
                <select>
                    <option>--请选择生日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                </select>
            </td>
        </tr>
        <!-- 第三行 -->
        <tr>
            <td>所在地区</td>
            <td> <input type="text" value="北京"> </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" checked="checked" id="weihun"> <label for="weihun">未婚</label>
                <input type="radio" name="marry" id="liyi"> <label for="liyi">离异</label>
                <input type="radio" name="marry" id="sangou"> <label for="sangou">丧偶</label>
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="本科"></input>
            </td>
        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" id="wumei" checked="checked"> <label for="wumei">妩媚的</label>
                <input type="checkbox" id="cute"> <label for="cute">可爱的</label>
                <input type="checkbox" id="xiaoxianrou"> <label for="xiaoxianrou">小鲜肉</label>
                <input type="checkbox" id="laolarou"> <label for="laolarou">老腊肉</label>
            </td>
        </tr>
        <!-- 第七行 -->
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea colos="40" cows="4" value="请输入您的自我介绍"></textarea>
                <!-- <input type="textarea" cols="50" rows="5" value="请输入您的自我介绍"> -->
            </td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <td></td>
            <!-- <td> <input type="button" value="免费注册"> </td> -->
            <td>
                <input type="submit" value="免费注册">
            </td>
        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准
            </td>
        </tr>
        <!-- 第十行 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 第十一行 -->
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满十八岁、单身</li>
                    <li>抱着严谨的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
</body>
</html>

效果图：

flyzer
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
纯前端实现—用户注册登录界面
孤寒者的博客
10-20 4万+
理想实现效果： 1.注册界面的实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册界面</title> <link rel="stylesheet" href="RESETCSS.css"> <style> div{ width: 300px;
django登录注册html页面,Django实现页面注册登录界面
weixin_33557333的博客
06-10 1689
增加数据在acsign/models.py中创建用户数据：class Users(models.Model):u_name = models.CharField(max_length=10)u_password = models.CharField(max_length=255)u_ticket = models.CharField(max_length=30, null=True)在acsign...
简单的html登录注册页面
gugugu08042的博客
03-01 4万+
简洁登录注册界面
HTML&CSS实现经典登录注册页面
Hedy的博客
10-09 18万+
提要：本篇文章说的是一个简单的登录、注册页面用HTML结合css如何实现，包括两个页面的相互跳转，不包括对输入数据的处理，适合刚入门的新手小白。 1、首先看一下最后的实现效果：首先是一个登录界面，点击“立即注册”会跳转到第二张图片，也就是注册界面，点击注册界面的“请登录”又会跳转回到第一个登录界面。 2、下面看一下具体的代码实现（使用的开发工具是HBuilder，有非常强大的提示功能，...
HTML实现登录注册界面
m0_74135466的博客
11-01 5044
【代码】HTML实现登录注册界面。
HTML+CSS+JS实现十款好看的登录注册界面模板，赶紧收藏起来吧！
热门推荐
道阻且长，行则将至。
04-20 27万+
推荐十款好看的登录注册界面，赶紧收藏起来吧！ 界面一：简约版 界面二 界面三 界面四 界面五 界面六 界面七 界面八 界面九 界面十
HTML5登录+注册界面
洛谷小蒟蒻
02-07 713
script.js:无。
HTML实现简单注册登录页面
m0_57714421的博客
12-21 1万+
HTML实现注册登录
【html+css】html登录注册页面
陈俊卓的博客
07-08 2万+
html页面登录注册代码，包含css样式
HTML5设计注册/登录界面
m0_62101200的博客
06-25 2万+
因为我们注册或者登录时是需要提交信息给后台的，所以需要用到表单form标签 span标签是一个基本的文本标签 如果需要登录是要点登录进行页面跳转的，所以我们需要使用a标签进行网址跳转 input标签也就是需要用户进行自行输入信息，并且可以通过type属性进行指定输入文本框的类型，比如我们输入密码时需要进行屏蔽，因而可以设置password属性，在输入密码期间可以不显示具体文本，达到隐私隐藏效果 设置按钮需要用到button标签，其实也可以用input标签，然后设置属性为button，也可以达到同样的
html+css+js酷炫全屏的后台登录注册界面模板
04-10
html+css+jshtml+css+js酷炫全屏的后台登录注册界面模板，带背景图片自动切换登录注册模板代码，适用于网页设计的登录页面个性化制作。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，...
简单登录注册界面html模板
04-25
【标题】"简单登录注册界面html模板"是一个用于创建用户登录和注册页面的HTML模板，设计简洁而实用。这个模板利用了HTML的基础结构，结合JavaScript的功能性和CSS的样式设计，为开发者提供了一个快速构建基本用户...
html网页设计注册与登录页面模板
10-09
在这个“html网页设计注册与登录页面模板”中，我们将深入探讨如何创建高效且用户友好的注册与登录界面。 首先，`index.html`是主页面文件，它包含了整个页面的结构和内容。HTML标记语言被用来定义网页的各个部分，...
登录注册的页面html模板源码
12-04
登录注册页面是任何网站的基本组成部分，它为用户提供访问系统所需的入口。在这个场景中，我们讨论的是...通过合理地组合和定制这些文件，开发者能够快速构建出符合项目需求的登录注册界面，为用户提供流畅的使用体验。
登录注册界面（HTML）
12-20
本文将详细讨论如何创建一个高效、用户友好的登录注册界面，重点在于HTML的基础知识及其在构建这种界面中的应用。 首先，HTML（HyperText Markup Language）是网页内容的基础语言，用于定义网页的结构和内容。在...
H为供应链的变革、模式和方法.pdf
最新发布
08-24
H为供应链的变革、模式和方法.pdf
java源码资源很强的Java加密解密算法源码
08-24
java源码资源很强的Java加密解密算法源码提取方式是百度网盘分享地址
五、前后端分离通用权限系统（5）gansu-system-front.zip
08-24
五、前后端分离通用权限系统（5）gansu-system-front.zip
CIMPLICITY.zip
08-24
CIMPLICITY.zip
html登录注册界面
05-23
HTML登录注册界面通常由以下几个部分组成： 1. 标题和LOGO：标题通常用于显示网站或应用程序的名称，LOGO用于展示品牌标识或者应用程序的图标。 2. 登录表单：登录表单一般包含用户名、密码以及登录按钮。用户需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值