【HTML】利用form、table、input、select等html标签实现注册表单

已于 2022-04-06 13:41:01 修改
阅读量599 收藏 2
点赞数 3
分类专栏： HTML 文章标签： html webview 前端 html5
于 2022-02-23 22:30:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43797577/article/details/123100919
版权 
<!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>
    <!-- 表格居中 -->
    <table align="center" >
        <!-- center 将青春不常在，抓紧谈恋爱居中显示 -->
        <center><h3>青春不常在，抓紧谈恋爱</h3></center>
        <!-- 表单  点击下边注册，跳转到Day One.html 方式为get -->
        <form action="../html/Day One.html" method="get">
         <!-- 姓名 -->
       <tr>
        <td>姓名</td>
         <td><input type="text" placeholder="请输入姓名" /></td>
     </tr>
        <!-- 性别 -->
       <tr>
                <td>性别</td>
                <td>
                    <!-- 点击图片或者字体，也可以选择到单选框内 id要跟lable中for值一致 -->
                    <input type="radio" id="nan" name="sex"> 
                        <label for="nan">
                            <img src="../img/男.jpg"  width="20px" height="20px"/>男
                        </label>
                    <input type="radio" id="nv" name="sex"> 
                        <label for="nv">
                            <img src="../img/女.jpg"  width="20px" height="20px"/>女
                        </label>
                </td>
           
       </tr>
       <!-- 生日 -->
       <tr>
            <td>生日</td>
            <td>
                <!-- 年 -->
                <select name="年">
                    <option value="nian">---请选择---</option>
                    <option value="2000">1997</option>
                    <option value="2000">1998</option>
                    <option value="2000">1999</option>
                    <option value="2000">2000</option>
                    <option value="2001">2001</option>
                    <option value="2002">2002</option>
                    <option value="2003">2003</option>
                </select>
                <!-- 月 -->
                <select name="月">
                    <option value="yue">---请选择---</option>
                    <option value="1">1月</option>
                    <option value="1">2月</option>
                    <option value="1">3月</option>
                    <option value="1">4月</option>
                    <option value="1">5月</option>
                    <option value="1">6月</option>
                    <option value="1">7月</option>
                    <option value="1">8月</option>
                    <option value="1">9月</option>
                    <option value="1">10月</option>
                    <option value="1">11月</option>
                    <option value="1">12月</option>
                </select>
                <!-- 日 -->
                <select name="日">
                    <option value="ri">---请选择---</option>
                    <option value="1">1日</option>
                    <option value="1">2日</option>
                    <option value="1">3日</option>
                    <option value="1">4日</option>
                    <option value="1">5日</option>
                    <option value="1">6日</option>
                    <option value="1">7日</option>
                    <option value="1">8日</option>
                    <option value="1">9日</option>
                    <option value="1">10日</option>
                    <option value="1">11日</option>
                    <option value="1">12日</option>
                    <option value="1">13日</option>
                    <option value="1">14日</option>
                    <option value="1">15日</option>
                    <option value="1">16日</option>
                    <option value="1">17日</option>
                    <option value="1">18日</option>
                    <option value="1">19日</option>
                    <option value="1">20日</option>
                    <option value="1">21日</option>
                    <option value="1">22日</option>
                    <option value="1">23日</option>
                    <option value="1">24日</option>
                    <option value="1">25日</option>
                    <option value="1">26日</option>
                    <option value="1">27日</option>
                    <option value="1">28日</option>
                    <option value="1">29日</option>
                    <option value="1">30日</option>
                    <option >31日</option>
                </select>
            </td>
       </tr>
       <!-- 所在地区 -->
       <tr>
           <td>所在地区</td>
            <td><input type="text" placeholder="请输入所在地区" /></td>
        </tr>
        <!-- 婚姻状况 -->
        <tr>
            <td>婚姻状况</td>
            <!-- 点击字体同样可以选则到单选框 -->
            <td>
                <input type="radio"  name="hunyin" id="weihun" />
                <label for="weihun">未婚</label>
                <input type="radio"  name="hunyin" id="yihun" />
                <label for="yihun">已婚</label>
                <input type="radio"  name="hunyin" id="sangou" />
                <label for="sangou">丧偶</label>
            </td>
        </tr>
         <!-- 学历 -->
       <tr>
        <td>学历</td>
        <td>
            <select name="学历">
                <option value="qingxuanze">---请选择---</option>
                <option value="boshihou">博士后</option>
                <option value="boshi">博士</option>
                <option value="yanjiusheng">研究生</option>
                <option value="benke">本科</option>
                <option value="dazhuan">大专</option>
                <option value="zhongzhuan">中专</option>
                <option value="chuzhong">初中</option>
                <option value="xiaoxue">小学</option>
                <option value="youeryuan">幼儿园</option>
            </select>
        </td>
     </tr>
     <!-- 喜欢的类型 -->
     <tr>
        <td>喜欢的类型</td>
        <!-- 类型为多选框，点都喜欢不会全选 -->
        <td>
            <input type="checkbox" />妩媚型
            <input type="checkbox" />可爱型
            <input type="checkbox" />鲜肉型
            <input type="checkbox" />御姐型
            <input type="checkbox" />萝莉型
            <input type="checkbox" />都喜欢
        </td>
     </tr>
     <!-- 自我介绍 -->
     <tr>
         <td>自我介绍</td>
         <td><textarea name="textarea" placeholder="简单介绍一下自己吧！" /></textarea>
     </tr>
     <!-- 注册 -->
     <tr>
         <td></td>
          <td><input type="submit" value="免费注册"><br />
            <input type="checkbox" checked/>我同意注册条款和加入会员标准<br />
            <!-- 点击链接，跳转到Day Three.html-->
            <a href="../html/Day Three.html">我是会员，立即登录</a>
        </td>
     </tr>
     <tr>
         <td></td>
         <td>
            <h2>我承诺</h2>
            <ul>
                    <li>我已年满18周岁</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
            </ul>
         </td>
     </tr>
    </form>
    </table>
</body>
</html>

运行结果如下：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAQSAgTHVja3kgIEJveQ==,size_20,color_FFFFFF,t_70,g_se,x_16

Pixel0216
关注
专栏目录
【前端开发实战】用 CSS 制作一个华丽的动画登录表单超详细教程新手友好~完整代码示例| 前端动效| 网页设计| 项目实例|HTML/CSS动画|打造炫酷漂亮的登陆表单 - 适合初学者小白的详细指南
南北极之间
06-07 300
总之，学习前端开发需要耐心和毅力，要保持对技术的热情和兴趣，不断学习和提升自己。通过实践项目、学习工具和框架、关注前端趋势等方式，你可以逐渐成为一名优秀的前端开发者。在用户悬停在环形动画上时，边框颜色会变化并增加阴影，提升交互体验。整体效果是一个炫酷的动画登录表单。这个登录表单页面包含了一个环形动画效果和一些输入框、按钮的样式。
HTML—— 表单标签（input,lable,textarea等）以及相亲网注册界面实现
流楚丶格念的博客
06-26 4847
创建表格 在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的基本语法格式如下： <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> 在上面的语法中包含三对HTML标签，分别为 <table></table>、<tr></tr>、<td></td>，他们是创建表格的基
html注册表单代码
06-23
这是一个html表单代码，用于会员注册，简单易懂，例如： 性别选择部分： 性别： 男 女
html实现用户注册功能表单页面（附源码）
小助手爱编程
09-06 3815
运行结果如图 代码如下 源码地址 点击跳转下载源码
表单form 和 表单元素（input、select、textarea等）
qq_46302247的博客
06-27 145
表单元素
html js注册表单代码,用户注册常用javascript代码
weixin_42522167的博客
06-26 1268
用户注册function IsDigit(cCheck){return (('0'<=cCheck) && (cCheck<='9'));}function IsAlpha(cCheck){return ((('a'<=cCheck) && (cCheck<='z')) || (('A'<=cCheck) && (cCh...
HTML 使用表单标签实现注册页面的实例代码
09-22
下面详细介绍HTML使用表单标签实现注册页面的关键知识点。 1. <form>标签：它是表单的根元素，用来定义一个表单区域。它可以包含输入元素（如单选按钮、复选框、文本输入框等），<form>标签的action属性定义了提交...
HTML基本结构 标签 列表 表格 表单 form input 单选框radio 多选框checkbox 列表框select option 按钮button
weixin_45279447的博客
12-18 1543
文章目录HTMLHTML基本结构 HTML 定义：Hyper Text Markup Language（超文本标记语言） HTML基本结构 1、网页头部 2、网页主体 3、标签 <html> <head> <title>网页标题</title> </head> <body> 网页的主体 </body> </html> ...
HTML表单滚动文本框,table表格，form表单，select下拉列表，textarea文本域
weixin_34125314的博客
06-03 1425
表格标签table：1. 表格的作用：按照一定的格式摆放数据。2.表格的组成：表格是由一系列的单元格(矩形框)组成。按照从左到右，从上到下的顺序排列到一起组成的。3.用于创建表格的标记：用于标记一个表格的开始,用于标记一个表格的结束。一个表格中，只允许出现一对table标签。表格的标题，可以省略，表格标题必须跟在 table后面 ，tr标签前面，而且最多只能有一个。用于标记表格一行的开始，标记一...
【HTML】-- 用户注册表单
衍生星球的博客
06-11 8117
使用html标签做一个简单的注册表单，下面是一些常用的标签。 button标签：普通按钮，功能代码自定义。 submit：“确定” ，提交到后台。 reset：“取消” ，让表单控件原内容为空。 select标签：下拉选择框。 textarea：多行文本输入框。...
HTML表单用户注册
06-06
HTML表单，用户注册，CSS样式+HTML
html网页用户注册表单验证校验JavaScript源码代码
05-02
html网页用户注册表单验证校验JavaScript源码代码，完整代码已经打包，还迎下载，代码仅供学习参考。 function checkuser(){//检查用户名的方法 var usernameNode=document.getElementById("username");//通过id得到input标签节点 var str=usernameNode.value;//获取到input标签框框里面输入的值，是一个字符串 var regExp = new RegExp("^\\w*$","gm");//一定要写上开头^和结尾$不然匹配上后，没办法排除别的，要打上*号，表示可以0个以上匹配的字符 var ismacth=regExp.test(str);//获得的字符串跟正则表达式做比较 if(str.length !==0){//字符串的长度不等于0则判断字符串是否匹配正则表达式 if(ismacth){//输入的用户名不为空时 document.getElementById("username1").innerHTML="√";//正确时候输出√ document.getElementById("username1").setAttribute("class","duitishi");//设置div标签的class属性为对提示，让它正确的时候显示绿色 }else{//输入的用户名不为空但是有不合法字符时 document.getElementById("username1").innerHTML="× 只能包含数字，字母，下划线"; document.getElementById("username1").setAttribute("class","cuotishi");//设置div标签的class属性为错提示，让它错误的时候显示红色 } }else{//输入的用户名为空时 document.getElementById("username1").innerHTML="请输入用户名"; document.getElementById("username1").setAttribute("class","cuotishi"); } }
html注册登录表单
12-16
html注册登录表单，包含js/css代码，有需求的可下载。
编写注册表单 HTML
一七
03-28 3968
通过编写一个注册页学习 HTML 表单学习如何控制人们在表单中可以输入的数据类型，以及使用一些新的 CSS 工具装饰页面
使用form表单和table表格创造注册页面
qq_45624685的博客
06-23 2984
使用form表单和table表格创造注册页面 如图样式 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>注册页面</title> </head> <body> <form action="#" method="get"> <table border="2" align="center" c
html的select标签事件
paomianhu的专栏
01-24 3097
//////////////////////////////////////////////////////////////////////////////////////////////////////////////select _1/////////////////////////////////////////////////////////////////////////////
HTML做一个注册表单
最新发布
qq_63825941的博客
05-17 2240
【代码】HTML做一个注册表单。
day2-HTML标签：form、input、select、textarea实现的简单信息录取页面
Andersen的博客
09-25 190
使用的是sublime text3编译器 大部分通过input标签实现各种输入框、单选、多选、下拉框的功能 <!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="css/style.css"> <!-- 使用 html:css 快速打出 --> <meta charset="UTF-8"> <meta name="viewport"
HTML 用户注册表单
qq_35677589的博客
01-14 678
下拉列表支持多选 效果 file控件用于文件上传 效果 隐藏域 hidden控件 效果
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Pixel0216

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

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

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

打赏作者

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

抵扣说明：

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

余额充值