效果展示：

代码示例：

<!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. 「postOI」以另一种方式证明 FWT

    记号 \(\otimes\) 代表或/与/异或卷积: \(\oplus\) 代表"拼接",例如 \(A\oplus B\) 即将 \(B\) 接在 \(A\) 的后面: \(+,- ...

  2. VMware Workstation Ubuntu 20.04 LTS无法连接网络问题

    本文记录了自己使用的安装在VMware Workstation上的Ubuntu20.04无法连接到网络的解决过程--终于解决困扰我两个小时的问题 出现问题# 毫无征兆,平时使用正常的Ubuntu在今天 ...

  3. 阻塞I/O,非阻塞I/O，同步I/O,异步I/O

    根据应用程序是否阻塞自身运行分为: 阻塞I/O:是指应用程序在执行I/O操作后,如果没有获得响应,          就会阻塞当前线程,不能执行其他任务. 非阻塞I/O:是指应用程序在执行I/O操作后 ...

  4. STM32F407 HardFault_Handler 中断输出初步定位越界问题

    1.测试环境:MDK + STM32F407 2.汇编重写 HardFault_Handler  中断 3.根据输出 nextPoint 地址对照编译生成的 .map 文件 /* 硬件错误中断的回调 ...

  5. OC基础 - isMemberOfClass | isKindOfClass

    isMemberOfClass | isKindOfClass 1 - 猜想以下代码输出的结果 1 #import <Foundation/Foundation.h> 2 #import ...

  6. [Oracle19C 数据库管理] 管理PDB

    更改PDB的打开模式 RESTRICT模式 维护时使用,可以让只有RESTRICT权限的用户才能连接到数据库,其他用户无法连接. ALTER PLUGGABLE DATABASE 数据库名 CLOSE ...

  7. String类对象的常用操作及方法

    在Java中,String类包含有50多个方法来实现字符串的各种操作,以下介绍一些我们需要经常使用的方法.1.字符串的连接public String concat(String str) 该方法的参数 ...

  8. RepVGG：一个结构重参数化网络

    ​  本文来自公众号"AI大道理" ResNet.DenseNet 等复杂的多分支网络可以增强模型的表征能力,使得训练效果更好.但是多分支的结构在推理的时候效率严重不足. 看起来二 ...

  9. PCA降维练习

    [题目] 1.现有我国大陆30个省.直辖市.自治区的经济发展状况数据集如表所示,包括8项经济指标:国民生产总值(A1):居民消费水平(A2):固定资产投资(A3):职工平均工资(A4):货物周转量(A ...

  10. 富文本编辑器转word

    https://blog.csdn.net/qq_41532872/article/details/108644773