效果展示：

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h3>个人信息登记表</h3>

<!--    表格标签-->

    <table>

<!--    定义第一行-->

        <tr>

            <td>性别:</td>

            <td>      <!--单选项-->

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

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

            </td>

        </tr>

<!--    第二行-->

        <tr>

            <td>出生日期:</td>

            <td>    <!--多选框-->

                <select name="" id="">

                    <option value="">--请选择年份--</option>

                    <option value="">2022</option>

                    <option value="">2021</option>

                    <option value="">2020</option>

                </select>

                <select name="" id="">

                    <option value="">--请选择月份--</option>

                    <option value="">12月</option>

                    <option value="">11月</option>

                    <option value="">10月</option>

                    <option value="">9月</option>

                    <option value="">8月</option>

                    <option value="">7月</option>

                    <option value="">6月</option>

                    <option value="">5月</option>

                    <option value="">4月</option>

                    <option value="">3月</option>

                    <option value="">2月</option>

                    <option value="">1月</option>

                </select>

                <select name="" id="">

                    <option value="">--请选择天数--</option>

                    <option value="">31日</option>

                    <option value="">30日</option>

                    <option value="">29日</option>

                    <option value="">28日</option>

                    <option value="">27日</option>

                    <option value="">26日</option>

                    <option value="">25日</option>

                    <option value="">24日</option>

                    <option value="">23日</option>

                    <option value="">22日</option>

                    <option value="">21日</option>

                    <option value="">20日</option>

                    <option value="">19日</option>

                    <option value="">18日</option>

                    <option value="">17日</option>

                    <option value="">16日</option>

                    <option value="">15日</option>

                    <option value="">14日</option>

                    <option value="">13日</option>

                    <option value="">12日</option>

                    <option value="">11日</option>

                    <option value="">10日</option>

                    <option value="">9日</option>

                    <option value="">8日</option>

                    <option value="">7日</option>

                    <option value="">6日</option>

                    <option value="">5日</option>

                    <option value="">4日</option>

                    <option value="">3日</option>

                    <option value="">2日</option>

                    <option value="">1日</option>

                </select>

            </td>

        </tr>

<!--    第三行-->

        <tr>

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

            <td>  <!--文本框-->

                <input type="text" value="长沙">

            </td>

        </tr>

<!--    第四行-->

        <tr>

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

            <td>   <!--单选框-->

                <input type="radio" name="marry" id="yihun"> <label for="yihun">已婚</label>

                <input type="radio" name="marry" id="weihun"> <label for="weihun">未婚</label>

                <input type="radio" name="marry" id="lihun"> <label for="lihun">离婚</label>

            </td>

        </tr>

<!--    第五行-->

        <tr>  <!--多选框-->

            <td>爱好：</td>

            <td>

                <input type="checkbox" name="hobby" id="sing"><label for="sing">唱歌</label>

                <input type="checkbox" name="hobby" id="dance"><label for="dance">跳舞</label>

                <input type="checkbox" name="hobby" id="swim"><label for="swim">游泳</label>

                <input type="checkbox" name="hobby" id="run"><label for="run">跑步</label>

            </td>

        </tr>

<!--    第六行-->

        <tr>

            <td></td>

            <td>   <!--提交按钮-->

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

            </td>

        </tr>

<!--    第七行-->

        <tr>   <!--复选框-->

            <td></td>

            <td>

                <input type="checkbox" id="xieyi"><label for="xieyi">我同意条款并愿意加入</label>

            </td>

        </tr>

<!--    第八行-->

        <tr>   <!--无序列表-->

            <td></td>

            <td>

                <ul>

                    <li>我承诺</li>

                    <li>年满十八岁</li>

                    <li>自愿加入</li>

                </ul>

            </td>

        </tr>

    </table>

</body>

</html>

HTML实战：个人信息登记表的更多相关文章

  1. Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表

    Qt5.5.0使用mysql编写小软件源码讲解---顾客信息登记表 一个个人觉得比较简单小巧的软件. 下面就如何编写如何发布打包来介绍一下吧! 先下载mysql的库文件链接:http://files. ...

  2. 简单python爬虫案例(爬取慕课网全部实战课程信息)

    技术选型 下载器是Requests 解析使用的是正则表达式 效果图: 准备好各个包 # -*- coding: utf-8 -*- import requests #第三方下载器 import re ...

  3. golang实战--客户信息管理系统

    总计架构图: model/customer.go package model import ( "fmt" ) type Customer struct { Id int Name ...

  4. HTML连载54-网易注册界面实战之信息填写

    一.完成了内容中的右边的一部分.练习了三点:小盒子在大盒子中的位置,最好用大盒子的内边距完成布局,而不是用小盒子的外边距来进行布局:复习了ul,li的用法. <!DOCTYPE html> ...

  5. 20190321xlVBA_明细信息表汇总成数据表

    刚开始能把代码敲得行云流水的时候,写代码是种乐趣.有了功利目的之后,重复的工作写多几次,厌烦的情绪四处弥漫. 去年八月份正好写了一回,还能支持控件,在此备忘. Public Sub Informati ...

  6. 王家林系列之scala--第69讲：Scala并发编程react、loop代码实战详解

    刚才看了一下,群里王家林老师又更新课程了,真为王老师的勤奋感到佩服,于是迫不及待的下载下来观看学习.本期讲的是关于scala并发编程的react.loop代码实战. 信息来源于 DT大数据梦工厂微信公 ...

  7. Spring的学习与实战

    目录 一.Spring起步 学习路线图 Spring的基础知识 什么是Spring Spring框架核心模块 SpringBoot 第一个Spring应用DEMO 编写自己的第一个SpringMVC例 ...

  8. 【原创】记一次DouPHP站点的RCE实战之旅

    声明 本次实践是在合法授权情况下进行,数据已经全部脱敏,主要是提供思路交流学习,请勿用于任何非法活动,否则后果自负. 实战记录 信息收集 1,踩点站点 通过fofa 查到目标DouPHP框架该站点(也 ...

  9. 两个月吃透阿里P9推荐260页SpringBoot2企业应用实战pdf入职定P6+

    前言 Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不再需要定义样板化的配置 ...

  10. 【Java EE 学习 55】【酒店会员管理系统项目总结】

    本酒店会员管理系统使用了SSH框架和传值播客提供的协同OA静态页面. 项目地址:https://github.com/kdyzm/HotelMembersManagement 一.需求分析 酒店会员管 ...

随机推荐

  1. QT--弹出新的对话框 show()/exec()的区别

    show()显示非模态对话框,exec()显示模态对话框. 非模态对话框不会阻塞程序的线程,因此 如果你的对话框时创建在栈上,跳出作用域之后,对象便销毁了,对话框会一闪而过: 如果使用new在堆上创建 ...

  2. php functions 生成唯一码

    <?php /** * 微擎密码生成 * */ function we7password($passwordinput, $salt, $authkey) { $passwordinput = ...

  3. python 爬虫 selenium 与 chromedriver

    selenium  安装 pip install   selenium chromedriver  下载 https://npm.taobao.org/mirrors/chromedriver?spm ...

  4. (原创)odoo one2many字段以子列表形式显示

    模块详情

  5. Asp.Net Core上传大文件请求体限制设置

    IIS进程内部署时 1. Web.Config的<system.webServer>节点下增加 <security> <requestFiltering> < ...

  6. [转]idea 试用30天“无限续费”idea破解

    首先打开idea设置 左上角点击file-->setting-->Plugins   https://plugins.zhile.io 然后点击 确定 ("OK") 点 ...

  7. C#中延迟初始化实现原理的一点浅见。

    定义 延迟初始化:一个对象的延迟初始化意味着它的创建被推迟到它第一次使用.(对于本主题,延迟初始化和延迟实例化是同义词.)延迟初始化主要用于提高性能.避免浪费计算和减少程序内存需求. 用法及简单介绍 ...

  8. C++ STL摘记

    一.string类补充 1.函数示例: (1)find和rfind函数,返回的是下标或者string::npos index=ss.find(s1,pos,num) find从pos(包括)开始往右查 ...

  9. h5打包exe，uniapp打包桌面应用exe，mac，electron方式

    1.配置镜像 因为下载慢,所以.(网速快的可以跳过这步) 右键我的电脑-属性-高级系统设置-高级-环境变量-新建 变量名: ELECTRON_MIRROR 变量值: https://cdn.npm.t ...

  10. （python）正则表达式

    # -*- coding: utf-8 -*- import re def test_dot(): """ . => 表示匹配任意字符 ""&q ...