html5 案例练习（注册页面）

最新推荐文章于 2024-05-20 14:56:04 发布
最新推荐文章于 2024-05-20 14:56:04 发布
阅读量423 收藏 4
点赞数
分类专栏： 前端学习小案例 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_40116418/article/details/119737719
版权 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>世纪佳缘</title>
</head>
<body>
    <table width="600" align="center" >
        <caption><h4>青春不常在，抓紧谈恋爱</h4></caption>
        <!-- 1 -->
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex"/><img src="../images/man.png">男
                <input type="radio" name="sex"/><img src="../images/woman.png">女

            </td>
        </tr>
        <!-- 2 -->
        <tr>
            <td>生日</td>
            <td>
                <!-- 年份的 -->
                <select>
                    <option>--请选择年--</option>
                    <option>1995</option>
                    <option>1996</option>
                    <option>1997</option>
                    <option>1998</option>
                </select>
                <!-- 月份的 -->
                <select>
                    <option>--请选择年--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                </select>
                <!-- 日 -->
                <select>
                    <option>--请选择日--</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                </select>
            </td>
            
        </tr>
        <!-- 3 -->
        <tr>
            <td>所在地区</td>
            <td>
                <input type="text" value="北京思密达"/>
            </td>
        </tr>
        <!-- 4 -->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" checked="checked"/> 未婚
                <input type="radio" name="marry"/> 已婚
                <input type="radio" name="marry"/> 离婚
            </td>
        </tr>
        <!-- 5 -->
        <tr>
            <td>学历</td>
            <td>
                <input type="text" value="幼儿园"/>
            </td>
        </tr>
        <!-- 6 -->
        <tr>
            <td>月薪</td>
            <td>
                <input type="text" value="10000-20000"/>
            </td>
        </tr>
        <!-- 7 -->
        <tr>
            <td>手机号</td>
            <td>
                <input type="text" value="13600365536"/>
            </td>
        </tr>
        <!-- 8 -->
        <tr>
            <td>昵称</td>
            <td>
                <input type="text" value="幼儿园老大"/>
            </td>
        </tr>
        <!-- 9 -->
        <tr>
            <td>喜欢的类型</td>
            <td>
                <input type="checkbox" name="love"/>妩媚的
                <input type="checkbox" name="love"/>可爱的
                <input type="checkbox" name="love"/>小鲜肉
                <input type="checkbox" name="love"/>老腊肉
                <input type="checkbox" name="love"/>都喜欢 
            </td>
        </tr>
        <!-- 10 -->
        <tr>
            <td>自我介绍</td>
            <td>
                <textarea>自我介绍</textarea>
            </td>
        </tr>
        <!-- 11 -->
        <tr>
            <td></td>
            <td>
            <input type="button" value="免费注册" style="background-color: crimson;color: #ffffff;border-color: #ffffff;"/>
            </td>
        </tr>
        <!-- 12 -->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" name="agree" checked="checked"/>
                我同意注册条款和会员加入标准</td>
            </td>
        </tr>
        <!-- 13 -->
        <tr>
            <td></td>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>
        <!-- 14 -->
        <tr>
            <td></td>
            <td>
                <h3>我承诺</h3>
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
    </table>
    <table></table>
</body>
</html>

窗台的花花
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
HTML网页练习之网易邮箱注册页面
12-01
使用HTML+CSS+JavaScript搭建的网易邮箱注册页面，所用代码和素材都已经包含在压缩包中，涉及网页的搭建和客户端对用户名、密码等的格式验证。欢迎大家下载参考
VB注册码代码示例.（有源码+实例）
12-30
VB注册码代码示例. 可以学习、参考，适合新入门的各位兄弟
HTML 使用表单标签实现注册页面的实例代码
12-14
案例说明：　　　   　　　　- 使用表格实现页面效果  　　　　- 超链接不想要有效果，使用href="#" 　　　　- 如果表格里面的单元格没有内容，使用空格作为占位符   　　　　- 使用图片标签提交表单 <input type="image" src="图片的路径"/>   完整代码：   <html> <head> <title>World</title> </head> <body> <form action="01-hello.html" method="post"> <h3 align=
Css-Demo:css练习案例
05-14
我的作品     PS:github pages加载网页有点慢，毕竟是免费的服务器，耐心等待个几秒哈！！！ （移动端浏览）   桌游精灵3——一个完整的webApp，以bootstrap为基础满足更多不同的需求 响应式的企业网站--demo展示1         响应式的企业网站--demo展示2     响应式的企业网站--demo展示3 51包装——一个常见的表单页面 修真院免费提供css、js等技术的练手小项目。通过完成修真院平台的css模块的15个任务。我的css水平提升了很多，感谢修真院。 对css的自适应，响应式，浮动，定位，flex布局，css sprite（雪碧图）等进行自学，以及制作下拉菜单和轮播图（纯css写的），掌握了bootstrap和sass的使用，并运用到项目里。在做项目遇到很多问题，在通过解决问题中， 掌握了这几个方面的优缺点，例如浮动，一个元素，里
十个静态页面展示-练习 HTML-CSS
12-12
适合前端刚入门的小白，对前端感兴趣的小伙伴
vue-例3-15综合示例演示注册.html
虾米大王的学习历程
04-24 111
【代码】vue-例3-15综合示例演示注册.html。
DHTML技术综合演示---示例:表格创建2
大Z小z的博客
05-14 271
DHTML技术综合演示---示例:表格创建2 table{ border:#00ffff solid 2px; width:500px; border-collapse:collapse; } table td{ border:#ff80ff solid 2px; padding:5px; margin:1px; } //创建固定行数和列数的表格-
html-综合案例之注册页面
m0_53163148的博客
09-17 750
2.< lable >中添加for属性，< input >中添加id属性，将两个标签形成联系。页面布局分为上下两大部分，上面用标题标签，下面用表格标签，行标签和单元格标签。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.在单选按钮中，使用< lable >标签，可以增强用户体验。1.设置默认选中选项，在< input >标签中设置属性。右边为文本框(value设置默认值)右边是表单元素中的单选按钮。（以此类推）总共十一行。
实现综合案例的注册（register）、登录（login）和跳转到主页面（index）的功能
qq_69105510的博客
06-08 1328
<!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"> ......
14-综合案例-注册页面
WangZhang_521的博客
12-22 101
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"> &l
宽屏html5网络科技有限公司官网单页面响应式模板
06-21
项目介绍： 本项目主要由html5，css样式，原生js构成的宽屏单页面响应式模板。整体结构清晰，布局大气美观，可扩展性强，适用于网络科技公司，活动策划公司或个人工作室官网......等等。 包含模块： 该项目页面共包含首页，关于我们，成功案例，服务流程，团队介绍，资讯中心等五大模块。 项目结构包含，css，fonts(字体)，images(图片)，js，libs(jar包)，index.html 等六大模块。 适用于但不仅限于以下几类： 1.作为网络科技公司，活动策划公司或个人工作室官网开发使用。 2.作为web学习中的练习项目使用，开发对应的后台接口，对页面进行数据绑定动态从数据库中获取数据。 3.作为毕业设计使用。
HTML5+CSS3前端小案例——移动端购物支付页面
08-18
在练习HTML和CSS的同学们可以拿去参考，做个小案例练练手。 内容涉及flex布局、公共样式公共类的挑选、多个大盒子与多个小盒子的嵌套（div>li>span、p>span等）、多行内容的排版、字体图标的引入设置、图片的引入和...
模仿QQ官网首页 前端 静态页面 用来练习基础的HTML+CSS
09-21
我写了零基础学前端的系列，为了给初学打好页面布局和样式的基础，特意编写模仿QQ官网首页的案例，供初学者学习和使用
案例练习-HTML+CSS(Less)实现简单的注册页面(web移动端静态页面)
qq_43358004的博客
04-24 1613
html+css移动端静态登陆页面，新手案例练习
前端开发练习：HTML注册页面
APythonC的博客
11-05 498
效果图如下： 代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>注册页面</title> </head> <body> <h4>青春不常在，抓紧谈恋爱</h4> <table width="500"> <!-- 第一行性别-
【HTML练习】登录注册界面模板1
coding加油站
08-04 9550
登录注册界面
【HTML5】实例练习
alexlau2016的博客
10-08 260
1.许多时髦的网站都提供视频。如果在网页上展示视频？ <!DOCTYPE HTML> <html> <body> <video width="320" height="240" controls="controls"> <source src="/i/movie.ogg" type="video/ogg"&...
【每日一练】小兔鲜项目-04
qq_46580087的博客
03-06 777
活在别人的掌声中，是禁不起考验的人。
【html5】09-Canvas画布（1）
最新发布
m0_68467925的博客
05-20 996
绘图方法落笔-连线-描边；解决重绘问题；连线方式；设置线帽；设置渐变方案；填充效果；非零环绕原则
js html css案例
12-25
在这个案例中，我使用了HTML来构建整个页面的结构和布局，使用了CSS来美化页面的样式和排版，还使用了JavaScript来实现页面的交互和动态效果。 在HTML部分，我使用了标签来构建整个页面的各个元素，比如标题、段落...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

窗台的花花

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值