14-综合案例-注册页面

最新推荐文章于 2023-04-24 11:59:24 发布
最新推荐文章于 2023-04-24 11:59:24 发布
阅读量119 收藏
点赞数 1
分类专栏： HTML 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/WangZhang_521/article/details/122084785
版权

14-综合案例-注册页面

<!DOCTYPE html>
<html lang="en">

<head>
    <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>综合案例-注册页面</title>
</head>

<body>
    <h4>青春不常在,抓紧谈恋爱</h4>
    <table width="600">
        <!-- 第一行 -->
        <tr>
            <td>性别:</td>
            <td>
                <input type="radio" name="sex" id="nan" checked="checked"> <label for="nan"><img src="images/men.jpg">男</label> <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.gif">女</label> </td>

        </tr>
        <!-- 第二行 -->
        <tr>
            <td>生日:</td>
            <td>
                <select>
                    <option>--请选择年份--</option>
                    <option>2002</option>
                    <option>2003</option>
                    <option>2004</option>

                </select>
                <select>
                    <option>--请选择月份--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>

                </select> <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</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">未婚 <input type="radio" name="marry">已婚 <input type="radio" name="marry">离婚
            </td>
        </tr>
        <!-- 第五行 -->
        <tr>
            <td>学历</td>
            <td><input type="text" value="硕士"></td>

        </tr>
        <!-- 第六行 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love">妩媚的
                <input type="checkbox" name="love">可爱的
                <input type="checkbox" name="love">漂亮的
                <input type="checkbox" name="love" checked="checked">清新的


            </td>

        </tr>
        <!-- 第七行 -->
        <tr>
            <td>个人介绍</td>
            <td><textarea>个人简介</textarea></td>
        </tr>
        <!-- 第八行 -->
        <tr>
            <!-- 第七行 -->
            <td></td>
            <td>
                <input type="submit" value="免费注册"><br>
                <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准

            </td>

        </tr>
        <!-- 第九行 -->
        <tr>
            <td></td>
            <td>
                <!-- #表示空链接 -->
                <a href="#">我是会员,立即登录</a>
            </td>
        </tr>
        <tr>
            <td></td>
            <td>
                <h5>我承诺</h5>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>



    </table>
</body>

</html>

效果展示

在这里插入图片描述
在这里插入图片描述

WangZhang_521
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
设计灵感|举足轻重！登录、注册页面设计案例
awayaya1的博客
01-10 649
登录注册页是链接用户跟产品中间的纽带，连接产品与用户。不同的产品会有不同的登录注册方式，设计时要注意账号区、背景、引导元素的搭配选择。当产品的需求是避免用户停留，让用户快速操作则可以选择纯色背景，按钮登录等设计手法。当产品需求是凸显品牌感则可以使用品牌色、 品牌LOGO等设计手法。当产品的需求是让用户可以“感受”产品，则可以使用情感化设计如欢迎词、情感小插画等。不同的设计手法会给用户不同的感觉，可以从产品的角度来出发，也可以从用户的角度来出发选择适合自己产品的方式。 总之注册、登录界面是如今大多数App的
html实现简单注册页面，无功能
carrotluotian的博客
12-25 205
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <h4>青春不常在，抓紧谈恋爱</h4> <t...
html5 案例练习（注册页面）
baipenggui_bo
08-16 443
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>世纪佳缘</title> </head> <body> <table width="600" align="center" > <caption><h4>青春不常在，抓紧谈恋爱</h...
页面注册案例
weixin_58470558的博客
04-22 461
效果图： 分析业务模块： 发送验证码模块 各个表单验证模块 勾选已经阅读同意模块 下一步验证全部模块：只要上面有一个input验证不通过就不同意提交 业务 1 ：发送验证码 用户点击之后，显示05秒后重新获取 时间到了，自动改为 重新获取 业务 2 ：用户名验证(注意封装函数 verifyxxx)，失去焦点触发这个函数 正则 /^ [a-zA-Z0-9-_ ]{6,10}$/ 如果不符合要求，则出现提示信息 并return false 中断程序 否则 则返回return true 之所以返回布尔
HTML--注册页面案例
hx1043116928的博客
09-29 479
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <!--表里标签：action:提交的地址 ...
综合案例CSS注册页面.html
01-12
综合案例CSS注册页面.html
Java-综合案例(用户信息).zip
07-14
在这个案例中，JSP页面主要用于展示用户界面，例如登录页面、注册页面以及用户信息展示页面。JSP中的Java代码可以用于处理简单的业务逻辑或数据绑定，同时可以通过`jsp:useBean`、`jsp:setProperty`等指令与后台...
swift-CollectionView综合案例全名TV-App
08-15
在这个“全名TV-App”的综合案例中，我们将深入探讨如何利用Swift来构建一个类似电视节目指南的应用。这个项目标签为“Swift开发-完整项目”，意味着它包含了一个完整的应用开发流程，从设计到实现，对于学习Swift和...
Web前端开发技术-综合案例（简易留言板）.pptx
07-07
通过这个综合案例，开发者可以深入理解DOM操作和事件处理在实际应用中的重要性，并且提升在JavaScript中处理动态网页的能力。这不仅有助于提高前端开发技能，也为未来更复杂的交互式网页开发打下坚实基础。
cn.xiaolonghong-00-综合案例练习.zip
01-07
在本综合案例练习中，我们聚焦于JavaScript编程语言的应用，主要涵盖了五个不同的示例，旨在提升你的编程技能和理解力。这些示例包括鼠标交互、时间处理、表单验证以及DOM操作等方面，对于任何想要深入JavaScript...
HTML 使用表单标签实现注册页面的实例代码
12-14
案例说明：　　　   　　　　- 使用表格实现页面效果  　　　　- 超链接不想要有效果，使用href="#" 　　　　- 如果表格里面的单元格没有内容，使用空格作为占位符   　　　　- 使用图片标签提交表单 <input type="image" src="图片的路径"/>   完整代码：   <html> <head> <title>World</title> </head> <body> <form action="01-hello.html" method="post"> <h3 align=
VB注册码代码示例.（有源码+实例）
12-30
VB注册码代码示例. 可以学习、参考，适合新入门的各位兄弟
vue-例3-15综合示例演示注册.html
虾米大王的学习历程
04-24 146
【代码】vue-例3-15综合示例演示注册.html。
web前端学习55-58（综合案例-注册页面）
weixin_51249285的博客
11-09 804
综合案例-注册页面（1） 基本框架，后续需调整格式等细节 eg: 综合案例-注册页面1.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-w
html-综合案例之注册页面
m0_53163148的博客
09-17 787
2.< lable >中添加for属性，< input >中添加id属性，将两个标签形成联系。页面布局分为上下两大部分，上面用标题标签，下面用表格标签，行标签和单元格标签。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.设置默认选中选项，在< input >标签中设置属性。右边为文本框(value设置默认值)右边是表单元素中的单选按钮。（以此类推）总共十一行。
实现综合案例的注册（register）、登录（login）和跳转到主页面（index）的功能
qq_69105510的博客
06-08 1398
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小兔鲜案例</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="renderer" content="webkit"> ......
前端笔记08 - 综合案例-注册页面
kukudeqi的博客
09-17 95
<!DOCTYPE html> <html lang="en"> <head> <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>综合
DHTML技术综合演示---示例:表格创建2
大Z小z的博客
05-14 293
DHTML技术综合演示---示例:表格创建2 table{ border:#00ffff solid 2px; width:500px; border-collapse:collapse; } table td{ border:#ff80ff solid 2px; padding:5px; margin:1px; } //创建固定行数和列数的表格-
【每日一练】小兔鲜项目-04
qq_46580087的博客
03-06 818
活在别人的掌声中，是禁不起考验的人。
JavaScript：综合案例---房贷计算器的实现
最新发布
06-10
好的，我很乐意为您介绍JavaScript实现房贷计算器的方法。 首先，我们需要了解房贷计算器的计算公式。一般来说，房贷计算器需要计算出每月还款金额、还款总额、支付利息总额等指标。这些指标的计算公式如下： 每月还款金额 = [贷款本金 × 月利率 × (1 + 月利率)^还款月数] ÷ [(1 + 月利率)^还款月数 - 1] 还款总额 = 每月还款金额 × 还款月数 支付利息总额 = 还款总额 - 贷款本金 了解了计算公式之后，我们就可以开始编写JavaScript代码了。以下是一个简单的房贷计算器实现代码示例： ```javascript // 获取页面元素 var loanAmount = document.getElementById("loan-amount"); var loanTerm = document.getElementById("loan-term"); var interestRate = document.getElementById("interest-rate"); var calculateButton = document.getElementById("calculate-button"); var resultMonthlyPayment = document.getElementById("result-monthly-payment"); var resultTotalPayment = document.getElementById("result-total-payment"); var resultTotalInterest = document.getElementById("result-total-interest"); // 计算每月还款金额 function calculateMonthlyPayment(loanAmount, loanTerm, interestRate) { var monthlyInterestRate = interestRate / 1200; // 月利率 var totalPayment = loanAmount * (1 + monthlyInterestRate * loanTerm); // 还款总额 var monthlyPayment = totalPayment / loanTerm; // 每月还款金额 return monthlyPayment.toFixed(2); // 保留两位小数 } // 计算房贷支付指标 function calculateLoanPayments() { var loanAmountValue = parseFloat(loanAmount.value); var loanTermValue = parseFloat(loanTerm.value); var interestRateValue = parseFloat(interestRate.value); var monthlyPayment = calculateMonthlyPayment(loanAmountValue, loanTermValue, interestRateValue); var totalPayment = monthlyPayment * loanTermValue; var totalInterest = totalPayment - loanAmountValue; resultMonthlyPayment.innerHTML = monthlyPayment.toFixed(2); resultTotalPayment.innerHTML = totalPayment.toFixed(2); resultTotalInterest.innerHTML = totalInterest.toFixed(2); } // 注册计算按钮点击事件 calculateButton.addEventListener("click", calculateLoanPayments); ``` 在上面的代码示例中，我们首先通过`document.getElementById()`方法获取了页面中的各个元素，然后定义了一个计算每月还款金额的函数`calculateMonthlyPayment()`，最后定义了一个计算房贷支付指标的函数`calculateLoanPayments()`。在`calculateLoanPayments()`函数中，我们获取了用户输入的贷款金额、贷款期限和利率，然后调用`calculateMonthlyPayment()`函数计算每月还款金额，并根据公式计算出还款总额和支付利息总额。最后，我们将计算结果显示到页面中相应的元素中。 最后，我们还为计算按钮注册了一个点击事件，当用户点击按钮时，会自动计算房贷支付指标并显示到页面上。 以上就是一个简单的房贷计算器JavaScript实现方法。希望可以帮助到您！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值