HTML5注册页面

分析

注册界面实际上是一个表格(对齐),一行有两个单元格。

代码

<!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>
    <h4>青春不常在,抓紧谈恋爱</h4>
    <table width="500" >
      <!-- 第一行 -->
      <tr>
        <td>性别</td>
        <td>
          <input type="radio" name="sex" id="men" />
          <label for="men"><img src="man.jpg" /> 男</label
          ><input type="radio" name="sex" id="woman" />
          <label for="woman"><img src="women.jpg" /> 女</label>
        </td>
      </tr>
      <!-- 第二行 -->
      <tr>
        <td>生日</td>
        <td>
          <select>
            <option>请选择年份</option>
            <option>2001</option>
            <option>2002</option>
            <option>2003</option>
            <option>2004</option>
            <option>2005</option>
            <option>2006</option>
          </select>
          <select>
            <option>请选择月份</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
          </select>
          <select>
            <option>请选择日</option>
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
            <option>6</option>
          </select>
        </td>
      </tr>
      <!-- 第三行 -->
      <tr>
        <td>所在地区</td>
        <td>
          <input type="text" value="请输入地区" />
        </td>
      </tr>
      <!-- 第四行 -->
      <tr>
        <td>婚姻状况</td>
        <td>
          <input
            type="radio"
            id="weihun"
            name="marry"
            checked="checked"
          /><label for="weihun"> 未婚</label>
          <input type="radio" id="yihun" name="marry" />
          <label for="y">已婚</label>
          <input type="radio" id="lihun" name="marry" />
          <label for="l">离婚</label>
        </td>
      </tr>
      <!-- 第五行 -->
      <tr>
        <td>学历</td>
        <td>
          <input type="text" value="请输入学历" />
        </td>
      </tr>
      <!-- 第六行 -->
      <tr>
        <td>喜欢的类型</td>
        <td>
          <input type="checkbox" name="love" /> 妩媚的<input
            type="checkbox"
            name="love"
          />
          可爱的<input type="checkbox" /> 小鲜肉<input
            type="checkbox"
            name="love"
          />老腊肉<input type="checkbox" name="love" checked="checked" /> 都喜欢
        </td>
      </tr>
      <!-- 第七行 -->
      <tr>
        <td>自我介绍</td>
        <td>
          <textarea cols="50" rows="4">
                自我介绍
            </textarea
          >
        </td>
      </tr>
      <!-- 第八行 -->
      <tr>
        <td></td>
        <td>
          <input type="submit" value="免费注册" />
        </td>
      </tr>
      <!-- 第九行 -->
      <tr>
        <td></td>
        <td colspan="2">
          <input
            type="checkbox"
            checked="checked"
          />我同意注册条款和会员加入标准
        </td>
      </tr>
      <!-- 第十行 -->
      <tr>
        <td></td>
        <td>
          <a href="#">我是会员,立即登录</a>
        </td>
      </tr>
      <!-- 第十一行 -->
      <tr>
        <td></td>
        <td>
          <h5>我承诺</h5>
          <ul>
            <li>年满十八岁 单身</li>
            <li>抱着严肃的态度</li>
            <li>真诚寻找另一半</li>
          </ul>
        </td>
      </tr>
    </table>
  </body>
</html>

效果

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/64149.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

致远OA协同管理软件无需登录getshell

一个男子汉&#xff0c;老守在咱村那个土圪崂里&#xff0c;又有什么意思&#xff1f;人就得闯世事&#xff01;安安稳稳活一辈子&#xff0c;还不如痛痛快快甩打几下就死了&#xff01;即使受点磨难&#xff0c;只要能多经一些世事&#xff0c;死了也不后悔&#xff01; 漏洞…

NodeJS原型链污染ctfshow_nodejs

文章目录 NodeJS原型链污染&ctfshow_nodejs前言0x01.原型与原型链0x02.prototype和__proto__分别是什么&#xff1f;0x03.原型链继承不同对象的原型链* 0x04.原型链污染原理0x05.merge()导致原型链污染0x06.ejs模板引擎RCEejs模板引擎另一处rce 0x07.jade模板引擎RCE【ctfs…

使用RecyclerView构建灵活的列表界面

使用RecyclerView构建灵活的列表界面 1. 引言 在现代移动应用中&#xff0c;列表界面是最常见的用户界面之一&#xff0c;它能够展示大量的数据&#xff0c;让用户可以浏览和操作。无论是社交媒体的动态流、商品展示、新闻列表还是任务清单&#xff0c;列表界面都扮演着不可或…

Vue2 第二十节 vue-router (四)

1.全局前置路由和后置路由 2.独享路由守卫 3.组件内路由守卫 4.路由器的两种工作模式 路由 作用&#xff1a;对路由进行权限控制 分类&#xff1a;全局守卫&#xff0c;独享守卫&#xff0c;组件内守卫 一.全局前置路由和后置路由 ① 前置路由守卫&#xff1a;每次路由…

开箱报告,Simulink Toolbox库模块使用指南(二)——MATLAB Fuction模块

文章目录 前言 MATLAB Fuction模块 采样点设置 FFT 求解 分析和应用 总结 前言 见《开箱报告&#xff0c;Simulink Toolbox库模块使用指南&#xff08;一&#xff09;——powergui模块》 MATLAB Fuction模块 MATLAB Fuction模块是在Simulink建模仿真或生成代码时&#x…

Vue中监听路由参数变化的几种方式

目录 一. 路由监听方式&#xff1a; 通过 watch 进行监听 1. 监听路由从哪儿来到哪儿去 2. 监听路由变化获取新老路由信息 3. 监听路由变化触发方法 4. 监听路由的 path 变化 5. 监听路由的 path 变化, 使用handler函数 6. 监听路由的 path 变化&#xff0c;触发method…

无锚框原理 TOOD:Task-aligned One-stage Object Detection

无锚框原理 TOOD&#xff1a;Task-aligned One-stage Object Detection 一 摘要二 引言TOOD设计 三 具体设计Task-aligned Head任务对齐的预测器 TAP预测对齐 TAL 任务对齐学习Task-aligned Sample Assignment多任务损失 一 摘要 一阶段目标检测通常通过优化两个子任务来实现&…

CSS中所有选择器详解

文章目录 一、教学视频二、基础选择器1.标签选择器2.类选择器3.id选择器4.通配符选择器 三、复合选择器1.交集选择器2.并集选择器 四、属性选择器1.[属性]2.[属性属性值]3.[属性^属性值]4.[属性$属性值]5.[属性*属性值] 五、关系选择器1.父亲>儿子2.祖先 后代3.兄弟4.兄~弟 …

Mermaid系列之FlowChart流程图

一.欢迎来到我的酒馆 介绍mermaid下&#xff0c;Flowchat流程图语法。 目录 一.欢迎来到我的酒馆二.什么是mermiad工具三.在vs code中使用mermaid四.基本语法 二.什么是mermiad工具 2.1 mermaid可以让你使用代码来创建图表和可视化效果。mermaid是一款基于javascript语言的图表…

Vue2 第二十一节 Vue UI组件库

移动端常用UI组件 1. Vant https://youzan.github.io/vant 2. Cube UI https://didi.github.io/cube-ui 3. Mint UI http://mint-ui.github.io PC端常用UI组件 1. Element UI https://element.eleme.cn 2. IView UI https://www.iviewui.com 一. Element UI 的引入和使…

我国洪涝灾害分布图

声明&#xff1a;来源网络&#xff0c;仅供学习&#xff01;

Apache Paimon 学习笔记

本博客对应于 B 站尚硅谷教学视频 尚硅谷大数据Apache Paimon教程&#xff08;流式数据湖平台&#xff09;&#xff0c;为视频对应笔记的相关整理。 1 概述 1.1 简介 Flink 社区希望能够将 Flink 的 Streaming 实时计算能力和 Lakehouse 新架构优势进一步结合&#xff0c;推…

C++QT教程1——QT概述(下载与安装)

文章目录 1 Qt概述1.1 什么是Qt1.2 Qt的发展史1.3 Qt版本1.4 Qt的下载与安装下载地址&#xff1a;其实我是有点懵逼的&#xff0c;因为还有个qtcreator&#xff0c;我差点不知道下哪个。。。&#xff08;qt框架比qtcreator功能更多更强大&#xff09; 安装 1.5 Qt的优点1.6 QT成…

了解IL汇编异常处理语法

从网上拷过来一个IL汇编程序&#xff0c;编译时先报如下错&#xff0c; 看它是把空格识别为了下注红线的字符&#xff0c;这是字符编码的问题&#xff0c;用记事本替换功能替换了&#xff1b; 然后又报如下的错&#xff0c; 看不出来问题&#xff0c;拷一句正确的来&#xff0…

[考研机试] KY20 完数VS盈数 清华大学复试上机题 C++实现

描述 一个数如果恰好等于它的各因子(该数本身除外)子和&#xff0c;如&#xff1a;6321。则称其为“完数”&#xff1b;若因子之和大于该数&#xff0c;则称其为“盈数”。 求出2到60之间所有“完数”和“盈数”。 输入描述&#xff1a; 题目没有任何输入。 输出描述&#…

STM32 4G学习(二)

特性参数 ATK-IDM750C是正点原子开发的一款高性能4G Cat1 DTU产品&#xff0c;支持移动4G、联通4G和电信4G手机卡。 它以高速率、低延迟和无线数传作为核心功能&#xff0c;可快速解决应用场景下的无线数传方案。 它支持TCP/UDP/HTTP/MQTT/DNS/RNDIS/NTP协议&#xff0c;支持…

DevOps在项目管理中的魔法:简化与深化

什么是DevOps&#xff1f; 定义与核心思想 DevOps, 这个名词&#xff0c;在技术领域中饱受瞩目。但它到底是什么&#xff1f;首先&#xff0c;DevOps并不仅仅是一个技术或者工具&#xff0c;它首先是一种文化&#xff0c;一种思想。DevOps是Development&#xff08;开发&#…

Mac 安装不在 Apple 商店授权的应用程序

文章目录 一、场景介绍二、实操说明 一、场景介绍 在日常的工作生活中&#xff0c;发现一些好用的应用程序&#xff0c;但是出于某些原因&#xff0c;应用程序的开发者并没有将安装包上架到苹果商店。 那么这些优秀的应用程序下载安装以后就会出现如下弹框被拒之门外 二、实操…

【redis】能ping通虚拟机但是端口无法访问

问题 虚拟机上有redis&#xff0c;能ping通虚拟机的ip&#xff0c;但是idea连不上虚拟机里的redis&#xff0c;telnet已启动的redis6379端口失败 基本情况 虚拟机网络模式是NAT模式&#xff0c;linux防火墙firewalld已关闭&#xff0c;没有iptables&#xff0c;主机和虚拟机…

100% 手写代码的十九年老程序员就要被淘汰吗?

&#x1f449;导读 近日&#xff0c;推上用户分享的一则事件引发热议。一名拥有 19 年编码经验、会 100% 手写代码的程序员 Alex 在面试中败给一位仅有 4 年经验却善用 Copilot、GPT-4 的新人 Hamid。前者因不愿拒绝使用辅助代码工具&#xff0c;过于追求代码可控&#xff0c;惨…
最新文章