效果展示：

代码示例：

<!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. Java中静态方法和实例方法

    static修饰的方法可以直接用方法名.    访问 实例成员方法必须永实例成员调用

  2. 转发-》c++ stl multimap基本操作使用技巧详细介绍

    c++ stl multimap基本操作使用技巧详细介绍 C++ stl  Multimap 和C++ stl  map 很相似,但是MultiMap允许重复的元素. C++ stl  Multima ...

  3. vmware15 nat模式下虚拟机能够ping通宿主机，宿主机无法平通虚拟机，nat网卡地址为192.168.0.1，网关为192.168.0.2.

    如图所示 最后网上教程看到,最后是修改nat网卡的巨型帧好的,废话不多数上图. 具体知道什么原因,开启这个就好了.

  4. JS-变量存储

    1.存储(变量)JS中变量是存在栈内存中JS中的内存分两种:栈内存.堆内存 栈内存:存放变量 堆内存:存代码块(object和function) var fn=function()和function ...

  5. java方法的笔记

    方法 方法的概念 方法(method)是将具有独立功能的代码块组织成为一个整体,使其具有特殊功能的代码集 注意: 方法必须先创建才可以使用,该过程成为方法定义 方法创建后并不是直接可以运行的,需要手动 ...

  6. A - Yet Another Tetris Problem

    A - Yet Another Tetris Problem 思路:判读一堆数字是不是同奇数偶数,写一个函数,循环遍历,然后判断是否同为奇数偶数. 代码: #include<iostream&g ...

  7. 5_Java对象

    面向对象编程 对于描述复杂的事物,为了从宏观上把握,从整体上合理分析,我们需要使用面向对象的思路来分析整个系统.但是,具体到微观操作,仍然需要面向过程的思路去处理. 面向对象编程(Object-Ori ...

  8. 2.mysql存储过程、存储函数与触发器

    -- 创建一个存储过程DELIMITER $CREATE PROCEDURE 存储过程名称(返回类型 参数名1 参数类型1, ....) [ ...... ]BEGIN -- 具体组成存储过程的SQL ...

  9. C# 数据结构之嵌套加法、嵌套乘法

    复杂性度量问题 1.大O复杂度:嵌套加法 找出以下代码片段的 Big O 复杂度. using System; namespace Chapter_1 { class Challenge_1 { st ...

  10. Linux程序设计

    2.6 shell的语法 2.6.1  变量 参数变量 实验:使用参数和环境变量 #!/bin/sh salutation="Hello" echo $salutation ech ...