HTML5注册页面

news2024/9/27 7:26:15

分析

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

代码

<!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.coloradmin.cn/o/838479.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Opencv-C++笔记 (16) : 几何变换 (图像的翻转(镜像),平移,旋转,仿射,透视变换)

文章目录 一、图像平移二、图像旋转2.1 求旋转矩阵2.2 求旋转后图像的尺寸2.3手工实现图像旋转2.4 opencv函数实现图像旋转 三、图像翻转3.1左右翻转3.2、上下翻转3.3 上下颠倒&#xff0c;左右相反 4、错切变换4.1 实现错切变换 5、仿射变换5.1 求解仿射变换5.2 OpenCV实现仿射…

【单片机】51单片机,TLC2543,驱动程序,读取adc

TLC2543 是一款 12 位精密模数转换器 (ADC)。 1~9、11、12——AIN0&#xff5e;AIN10为模拟输入端&#xff1b; 15——CS 为片选端&#xff1b; 17——DIN 为串行数据输入端&#xff1b;&#xff08;控制字输入端&#xff0c;用于选择转换及输出数据格式&#xff09; 16——…

完全背包问题

题目链接 题意&#xff1a;在01背包的基础上多了每个物品都可以无限取的条件 思路&#xff1a;首先考虑在01背包的基础上的暴力枚举&#xff0c;我们可以在枚举前i件物品最多拿j的容量时再遍历当前物品拿的数量 贴一个暴力tle代码&#xff1a; #include<bits/stdc.h> #d…

线程间的同步、如何解决线程冲突与死锁

一、线程同步概念&#xff1a; 线程同步是指在多线程编程中&#xff0c;为了保证多个线程之间的数据访问和操作的有序性以及正确性&#xff0c;需要采取一些机制来协调它们的执行。在多线程环境下&#xff0c;由于线程之间是并发执行的&#xff0c;可能会出现竞争条件&#xf…

VUE框架:vue2转vue3全面细节总结(2)导航守卫

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 这是我的个人博客主页&#xff1a; lqj_本人_python人工智能视觉&#xff08;opencv&#xff09;从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了&#xff1a; https://blog.csdn.net/lbcy…

学习源码,模仿编程

一.观察者模式: 1.创建事件 2.发布事件 3.监听事件 4.效果: 二.模板方法模式

【云原生】使用kubeadm搭建K8S

目录 一、Kubeadm搭建K8S1.1环境准备1.2所有节点安装docker1.3所有节点安装kubeadm&#xff0c;kubelet和kubectl1.4部署K8S集群1.5所有节点部署网络插件flannel 二、部署 Dashboard 一、Kubeadm搭建K8S 1.1环境准备 服务器IP配置master&#xff08;2C/4G&#xff0c;cpu核心…

如何下载和编译 Android 源码?

本文为洛奇看世界(guyongqiangx)原创&#xff0c;转载请注明出处。 文章链接&#xff1a;https://blog.csdn.net/guyongqiangx/article/details/132125431 网上关于如何下载 Android 源码和编译的文章很多&#xff0c;其中最常见的就是 Android 官方文档&#xff1a; 下载源代码…

前端js--扩展卡片

效果图 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><link rel"stylesheet" href"…

谈一谈Python中的装饰器

1、装饰器基础介绍 1.1 何为Python中的装饰器&#xff1f; Python中装饰器的定义以及用途&#xff1a; 装饰器是一种特殊的函数&#xff0c;它可以接受一个函数作为参数&#xff0c;并返回一个新的函数。装饰器可以用来修改或增强函数的行为&#xff0c;而不需要修改函数本身…

使用JProfiler进入JVM分析

要评测JVM&#xff0c;必须将JProfiler的评测代理加载到JVM中。这可以通过两种不同的方式发生&#xff1a;在启动脚本中指定-agentpath VM参数&#xff0c;或者使用attach API将代理加载到已经运行的JVM中。 JProfiler支持这两种模式。添加VM参数是评测的首选方式&#xff0c;集…

拥抱创新:用Kotlin开发高效Android应用

拥抱创新&#xff1a;用Kotlin开发高效Android应用 引言 在当今数字时代&#xff0c;移动应用已经成为人们生活中不可或缺的一部分。无论是社交媒体、电子商务还是健康管理&#xff0c;移动应用已经深刻地影响了我们的生活方式。随着移动设备的普及和功能的增强&#xff0c;A…

【JAVA】类和对象

作者主页&#xff1a;paper jie的博客 本文作者&#xff1a;大家好&#xff0c;我是paper jie&#xff0c;感谢你阅读本文&#xff0c;欢迎一建三连哦。 本文录入于《JAVASE语法系列》专栏&#xff0c;本专栏是针对于大学生&#xff0c;编程小白精心打造的。笔者用重金(时间和精…

高项V4.高级PM.项目集set+项目组合portfolio+组织级OPM+量化项目管理+实践模型

PMI &#xff0c; ITSS 、CMMI 和PRINCE2 等为各类信息系统项目管理提供了最佳实践&#xff0c;井提供了对组织的项目管理能力进行持续改进和评估的方法。 第一部分 项目集--《项目集管理标准>> (第4 版) ---实现项目11>2的更大效益 由项目管理协会(PMI) 出版的《…

OpenCV之信用卡识别实战

文章目录 代码视频讲解模板匹配文件主程序(ocr_template_match.py)myutils.py 代码 链接: https://pan.baidu.com/s/1KjdiqkyYGfHk97wwgF-j3g?pwdhhkf 提取码: hhkf 视频讲解 模板匹配文件 主程序(ocr_template_match.py) # 导入工具包 from imutils import contours # 从…

算术逻辑单元(ALU)(数电、加法器)

优先级&#xff1a;与>或 异或电路 依旧需要一级级的传递&#xff0c;后算完才能前传

[oeasy]python0079_控制序列_光标位置设置_ESC_逃逸字符_CSI

光标位置 回忆上次内容 上次我们研究的比较杂 类型转化进制转化捕获异常版本控制生成帮助文档变量的常用类型变量的生命周期控制 数据类型主要研究了两个 字符串 str 整型数字 int 字符串型 和 整型数字型变量 是可以相互转化的 加法运算逻辑 会根据操作变量的不同 而不同…

针对java程序员的了解细节操作系统与进程

一、&#x1f49b; 操作系统&#xff08;浅浅概念&#xff09;&#xff1a;是用来搞管理软件的 1.对下,要管理各种硬件设备 2.对上,要给应用程序提供一个稳定的运行环境 二、&#x1f499; 进程&#xff1a;正在运行的程序&#xff0c;假如程序没有运行就不叫程序&#xff0c;…

如何在终端设置代理(设置jupyter notebook同理)

设置代理 在终端(我用的gitbash)下执行 set HTTP_PROXYhttp://<user>:<password><proxy server>:<proxy port> set HTTPS_PROXYhttp://<user>:<password><proxy server>:<proxy port>其中&#xff1a; user、password&#…

LabVIEW开发3D颈动脉图像边缘检测

LabVIEW开发3D颈动脉图像边缘检测 近年来&#xff0c;超声图像在医学领域对疾病诊断具有重要意义。边缘检测是图像处理技术的重要组成部分。边缘包含图像信息。边缘检测的主要目的是根据强度和纹理等属性识别图像中均匀区域的边界。超声&#xff08;US&#xff09;图像存在视觉…