前端表单-综合案例：注册页面

最新推荐文章于 2023-03-28 15:11:32 发布
最新推荐文章于 2023-03-28 15:11:32 发布
阅读量287 收藏 1
点赞数
文章标签： 前端 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_51495354/article/details/127715440
版权

 

<!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>Document</title>

</head>

<body>

    <h4>青春不常在，抓紧谈恋爱</h4>

    <table width="500">

        <!-- 第一行 -->

        <tr>

            <td>性别：</td>

            <td>

                <input type="radio" name="sex" id="nan"><label for="nan"> ♂ 男</label>

                <input type="radio" name="sex" id="nv"><label for="nv"> ♀ 女</label>

            </td>

        </tr>

        <!-- 第二行 -->

        <tr>

            <td>生日：</td>

            <td>

                <select>

                <option>-请选择年-</option>

                <option>2000</option>

                <option>1999</option>

                <option>1998</option>

                <option>1997</option>

                </select>

           

                <select>

                    <option>-请选择月-</option>

                    <option>12</option>

                    <option>11</option>

                    <option>10</option>

                    <option>9</option>

                </select>

           

                <select>

                    <option>-请选择日-</option>

                    <option>30</option>

                    <option>29</option>

                    <option>28</option>

                    <option>27</option>

                </select>

            </td>

        </tr>

        <!-- 第三行 -->

        <tr>

            <td>所在地区：</td>

            <td><input type="text" value="北京"></td>

        </tr>

        <!-- 第四行 -->

        <tr>

            <td>婚姻状况：</td>

            <td>

                <input type="radio" name="hun" id="hun" checked="checked"><label for="hun" >未婚</label>

                <input type="radio" name="hun" id="hun1"><label for="hun1">已婚</label>

                <input type="radio" name="hun" id="hun2"><label for="hun2">离婚</label>

            </td>

        </tr>

        <!-- 第五行 -->

        <tr>

            <td>学历：</td>

            <td>

                <input type="text" value="幼儿园">

            </td>

        </tr>

        <!-- 第六行 -->

        <tr>

            <td>喜欢的类型：</td>

            <td>

                <input type="checkbox" name="like" id="like1"><label for="like1">妩媚的</label>

                <input type="checkbox" name="like" id="like2"><label for="like2">可爱的</label>

                <input type="checkbox" name="like" id="like3"><label for="like3">小鲜肉</label>

                <input type="checkbox" name="like" id="like4"><label for="like4">老腊肉</label>

                <input type="checkbox" name="like" id="like5"><label for="like5">都喜欢</label>

            </td>

        </tr>

        <!-- 第七行 -->

        <tr>

            <td>自我介绍：</td>

            <td>

                <textarea cols="30" rows="2"></textarea>

            </td>

        </tr>

        <!-- 第八行 -->

        <tr>

            <td></td>

            <td>

                <input type="submit" value="免费注册">

            </td>

        </tr>

        <!-- 第九行 -->

        <tr>

            <td></td>

            <td>

                <input type="checkbox" id="it" checked="checked"><label for="it">我同意注册条款和会员加入标准</label>

            </td>

        </tr>

        <!-- 第十行 -->

        <tr>

            <td></td>

            <td><a href="#">我是会员，立即登录</a></td>

        </tr>

        <!-- 第十一行 -->

        <tr>

            <td></td>

            <td>

                <h3>我承诺</h3>



            </td>

        </tr>

        <!-- 十二 -->

        <tr>

            <td></td>

            <td>

                <ul>

                    <li>年满18岁、单身</li>

                    <li>抱着严肃的态度</li>

                    <li>真诚寻找另一半</li>

                </ul>



            </td>

        </tr>

    </table>

</body>

黄丫丫07
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
零基础小白学Node-RED（07）：综合案例分析
知无涯
10-25 4065
讲解Node-RED的综合示例
会员注册表单——表单
weixin_63912123的博客
02-25 477
综合实践案例实现
表单实例--注册页面
qq_46617150的博客
02-19 318
html表单实例
web前端学习（四）——HTML 表单（1）- 用户注册表单举例
m0_55637498的博客
12-09 5806
一、表单 表单：就是类似于登录界面，用于接收用户的信息。 表单以<form>开始，以</form>结束。 1、表单有什么用？ 收集用户信息。表单展现之后，用户填写表单，点击提交按钮提交数据给服务器。 2、怎么画一个表单？ 使用form标签画表单。 3、一个网页当中可以有多个表单form。 4、表单最终是需要提交数据给服务器的，form标签有一个action属性，这个属性用来指定服务器地址：action属性和超链接中的href属性一样，都可以向服...
web前端——表单注册页面设计（注册信息）
weixin_65997960的博客
03-18 4915
在页面底部插入“电话”、“短信”、“E-Mail”和“返回顶部”4个导航链接，前三个导航链接必须使用相应的超链接伪协议，“返回顶部”链接到页面顶部锚点。另外，需设置链接状态样式，链接字体为蓝色，已访问过为灰色，鼠标经过时为红色，鼠标按下时为黄色。设置用户名、学号和密码为必填项，在输入域后显示红色“*”号，设置用户名输入框默认获得焦点，密码输入框中提示用户“请输入。除用户名、学号、密码、单选按钮、复选框、列表框和文本区之外，其它input元素必须为HTML5新增的输入类型；个选项，默认选择“成都”；
前端学习笔记--注册表单
xiaomiguoba7的博客
05-18 365
表单在网页中主要负责数据采集功能html中使用form标签完成。表单标签其实是一组标签的组合，不是一个标签。表单元素是允许用户在表单中（比如：输入框、文本域、下拉列表、单选框、复选框等等）输入信息的元素。 在html中使用来定义表单： 注册表单就是通过input的各种属性实现用户输入 以下是代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
HTML 表格标签、列表标签、表单标签（案例： 注册页面）
酷爱前端的小陈博客
04-16 2287
1. 表格标签 表格是实际开发中非常常用的标签: 1. 表格的主要作用 2.表格的基本语法 1.1 表格的主要作用 表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 总结: 表格不是用来布局页面的,而是用来展示数据的。 1.2 表格的基本语法 1. <table> </table> 是用于定义表格的标签。 2. &...
Image-Hosting-Application::glowing_star:ᴛʜꜱꜱɴɢɴɢɴɢᴄᴛᴜʀᴇꜱᴄᴛᴜʀᴇꜱᴄᴛᴜʀᴇꜱᴄᴛᴜʀᴇꜱᴄᴛᴜʀᴇꜱ:laptop:
04-05
综合来看，这个项目涵盖了Web开发的全栈知识，从前端的UI设计到后端的服务实现，再到数据库管理和云部署，是一个很好的学习和实践案例。开发者需要对这些技术有深入理解，并能协调它们共同工作，以创建一个高效、...
PRP-Web体验：PRP网站升级
02-06
PRP-Web体验：PRP网站升级项目是一个专注于利用现代Web技术提升用户界面和交互性的实践案例。这个项目的核心目标是通过更新和优化网站的前端架构，为用户提供更流畅、更具响应性的体验。以下是该项目涉及的主要知识...
57-513Crew:57-513乘员库
05-20
JavaScript是一种客户端脚本语言，可以添加交互性，如表单验证、下拉菜单效果、弹出框等。AJAX则允许在不刷新整个页面的情况下更新部分网页内容，这在展示大量乘员信息时非常有用，用户可以快速加载和查看所需信息。...
会员注册表单案例
绿色水杯
08-21 1342
代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form &
会员注册页面的完善
10-18 779
今天老师没有开始新的页面的实现，而是带领我们分析了整个登录过程和完善注册页面的工作。 登录界面：    主要是以下格式：   用户名：   口令：    登录      注册新用户 用javascript验证各项信息的有效性：第一种 onsubmit="return
编写注册表单 HTML
最新发布
一七
03-28 3820
通过编写一个注册页学习 HTML 表单学习如何控制人们在表单中可以输入的数据类型，以及使用一些新的 CSS 工具装饰页面
利用 HBuilderX 设置CSS样式会员注册页面
听风者i的博客
10-11 4905
利用 HBilderX 设置CSS样式会员注册页面 打开任务“web”(项目实名称)项目中的公司简介网页register.html,并对其设置CSS样式。
使用HTML制作会员注册界面
weixin_45275957的博客
03-02 7413
1.认识表单 表单是网页用于输入信息的区域，它的主要功能是收集用户信息，是获取用户输入或选择数据的一种方式。 表单设计 表单设计分为，表单界面和应用程序。 表单三部分组成： 1.表单标签 包含处理表单数据所使用的服务器程序的URL以及数据交到服务器的方法。 2.表单域 包含不同的表单控件，如文本框，密码框，多行文本框，复选框，单选框，下拉框等 3.表单按钮 1） 提交按钮 2） 重置按钮 3...
使用表单标签注册页面
qq_44757223的博客
03-04 476
注册页面图 2.代码 <!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"> &.
表单注册会员表单 mysql_from表单实现注册
weixin_33338498的博客
02-10 400
html代码: //引入php代码确定取消php代码:header( 'Content-Type:text/html;charset=utf-8 ');include_once("conn/conn.php"); //引入导入数据库控制页面$name=$_...
网页前端html、css、js--登录注册页面案例
m0_52822058的博客
12-08 1493
当用户名输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使id=‘username_err’ 的span标签显示出来，给出用户提示。当密码输入框失去焦点时，判断输入的内容是否符合 长度是 6-12 位 规则，不符合使id='password_err’的span标签显示出来，给出用户提示。当手机号输入框失去焦点时，判断输入的内容是否符合 长度是 11 位 规则，不符合使 id='tel_err’的span标签显示出来，给出用户提示。如果有一个不符合规则，则不允许提交表单。
前端50个精美登录注册模板
热门推荐
FZUMRWANG的博客
03-12 3万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="100%&quo
前端开发实战：无缝轮播图与滚动导航案例解析
这部分内容涵盖了前端表单处理和事件监听的基本知识。 接下来的电梯导航功能更为复杂，它通过检测用户的滚动位置来动态调整导航栏状态。当用户滚动到特定模块，相应的导航项会被激活，并且可以通过点击导航项实现...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值