表单元素使用

表单元素使用

    • 要完成的效果:
    • 代码实现:

要完成的效果:

在这里插入图片描述

代码实现:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>img{height: 20px;width: 20px;}.right{text-align: right;}table tr td input,select,textarea{margin-left: 20px;}#submit{margin-left: 10%;padding: 3px 10px;background-color: yellow;}#reset,#cancel{background-color: rgba(43, 43, 104, 0.6);padding: 3px 5px;}.box{border: 2px solid greenyellow;padding-left: 10px;margin-left: 30%;margin-right: 20%;}span{font-size: 10px;text-align: right;}#login{font-size: 10px;text-align: right;}</style>
</head>
<body><div class="box"><form action=""><table><tr><td class="right">用户名</td>    <td><input type="text" name="usename" size="15" maxlength="5" placeholder="请输入用户名"></td></tr><tr><td class="right">密码</td><td><input type="password" name="password " placeholder="请输入密码"></td></tr><tr><td class="right"> email</td><td><input type="text" name="emile"></td></tr><tr><td class="right">姓名</td><td><input type="text" name="name"></td></tr><tr><td class="right"> 手机号</td><td><input type="text" name="tel"></td></tr><tr> <td class="right">性别</td><td><input type="radio" name="sex" value="man" id="man"><label for="man"> <img src="men.png"></label><input type="radio" name="sex" value="woman" id="woman" checked><label for="woman"><img src="women.png" ></td></label></tr><tr><td class="right">爱好 </td><td><input type="checkbox" name="hobdy" value="0"><input type="checkbox" name="hobdy" value="1"><input type="checkbox" name="hobdy" value="2" checked><input type="checkbox" name="hobdy" value="3"></td></tr><tr><td class="right">出生日期 </td><td><input type="text" name="" id=""></td></tr><tr><td class="right">所在学院</td><td><select><option value="0">--请选择--</option><option value="1">机电工程学院</option><option value="2">材料科学与工程学院</option><option value="3" selected>计算机科学与工程学院</option><option value="4">化学与工程学院</option><option value="5">数学与统计学院</option><option value="6">电气与电子工程学院</option></select> </td></tr><tr><td><p>自我介绍</p> </td> <td><textarea name="自我介绍" cols="60" rows="5">计算机科学与工程学院前身电子工程系是吉林工学院1978年复校后最早的五个系之一,1989年成立计算机及电子工程系,1999年更名为计算机科学与工程学院。1978年开设电子计算机及其应用本科专业,1998年更名为计算机科学与技术专业.在研究生层面具有计算机科学与技术、信息与通信工程两个一级学科硕士点和计算机技术,电子与通信工程两个专业学位硕士点;在本科生层面具有计算机科学与技术、电子信息、网络工程、软件工程四个本科专业.</textarea></td></tr><tr><td class="right">验证码</td><td><input type="text"> <img src="../code.png" alt=""></td></tr></table><input type="submit"  name="register" value="注册" id="submit"> <input type="reset" name="reset" value="重填" id="reset"><input type="button" name="cancel" value="取消" id="cancel"><div id="login">已有账号<a href="#">立即注册?</a></div></form></div>
</body>
</html>

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

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

相关文章

完整部署一套k8s-v.1.28.0版本的集群

一、系统情况 虚拟机版本&#xff1a;esxi 6.7 系统版本&#xff1a;centos7.9_2009_x86 配置&#xff1a;4核8G&#xff08;官网最低要求2核2G&#xff09; 192.168.0.137 master节点 192.168.0.139 node2节点 192.168.0.138 node1节点&#xff08;节点扩容练习&#xf…

Linux:详解TCP报头类型

文章目录 温习序号的意义序号和确认序号报文的类型 TCP报头类型详解ACK: 确认号是否有效SYN: 请求建立连接; 我们把携带SYN标识的称为同步报文段FIN: 通知对方, 本端要关闭了PSH: 提示接收端应用程序立刻从TCP缓冲区把数据读走RST: 对方要求重新建立连接; 我们把携带RST标识的称…

python--os和os.path模块

>>> import os >>> #curdir #获取当前脚本的绝对路径 >>> os.curdir . >>> import os.path >>> #获取绝对路径 >>> os.path.abspath(os.curdir) C:\\Users\\GUOGUO>>> #chdir #修改当前目录 >&g…

创建一个vue3 + ts + vite 项目

vite 官网&#xff1a; https://cn.vitejs.dev/guide/ 兼容性注意 Vite 需要 Node.js 版本 18&#xff0c;20。然而&#xff0c;有些模板需要依赖更高的 Node 版本才能正常运行&#xff0c;当你的包管理器发出警告时&#xff0c;请注意升级你的 Node 版本。 安装项目 1. 使用n…

Linux:TCP协议的三次握手和四次挥手

文章目录 三次握手四次挥手为什么要进行三次握手&#xff1f;三次握手也不安全 本篇解析的主要是TCP的三次握手和四次挥手的过程 三次握手 如图所示&#xff0c;在TCP要进行链接的时候&#xff0c;其实是要进行三次握手的 第一次握手是指&#xff0c;此时客户端要给服务器发送…

【Qt】QMainWindow

目录 一、概念 二、菜单栏 2.1 创建菜单栏 2.2 在菜单栏中添加菜单 2.3 创建菜单项 2.4 在菜单项之间添加分割线 三、工具栏 3.1 创建工具栏 3.2 设置停靠位置 3.3 设置浮动属性 3.4 设置移动属性 四、状态栏 4.1 状态栏的创建 4.2 显示实时消息 4.3 显示永久消…

Vue性能优化--gZip

一、gZip简单介绍 1.1 什么是gzip gzip是GNUzip的缩写&#xff0c;最早用于UNIX系统的文件压缩。HTTP协议上的gzip编码是一种用来改进web应用程序性能的技术&#xff0c;web服务器和客户端&#xff08;浏览器&#xff09;必须共同支持gzip。目前主流的浏览器&#xff0c;Chro…

【并发】第二篇 ThreadLocal详解

导航 一. ThreadLocal 简介二. ThreadLocal 源码解析1. get2. set3 .remove4. initialValue三. ThreadLocalMap 源码分析1. 构造方法2. getEntry()3. set()4. resize()5. expungeStaleEntries()6. cleanSomeSlots()7. nextIndex()8. remove()9. 总结ThreadLocalMap四. 内存泄漏…

超文本传输协议HTTP

HTTP协议 在网络通信中&#xff0c;我们可以自己进行定制协议&#xff0c;但是也有许多已经十分成熟的应用层协议&#xff0c;比如我们下面说的HTTP协议。 HTTP协议简介 HTTP&#xff08;Hyper Text Transfer Protocol&#xff09;协议又叫做超文本传输协议&#xff0c;是一…

带你学习现代C++并发编程

通过对C并发编程的理解&#xff0c;我总结了相关的文档&#xff0c;有需要的可以关注我公众号&#xff0c;并给我留言&#xff01; 这是目录

Cookie/Session

1.Cookie HTTP 协议自身是属于 "无状态" 协议. "无状态" 的含义指的是: 默认情况下 HTTP 协议的客户端和服务器之间的这次通信, 和下次通信之间没有直接的联系. 但是实际开发中, 我们很多时候是需要知道请求之间的关联关系的. 例如登陆网站成功后, 第二…

创建数据库管理账户以及授权

一、创建数据酷管理账户命令 为了保障数据库系统的安全性&#xff0c;以及让 其他用户协同管理数据库&#xff0c;可以在MariaDB数据库管理系统中为他们创建多个专用的数据库管理账户&#xff0c;然后再分配合理的权限&#xff0c;以满足他们的工作需求. 使用root管理员 登录…

自定义类型(二)结构体位段,联合体,枚举

这周一时兴起&#xff0c;想写两篇文章来拿个卷吧&#xff0c;今天也是又来写一篇博客了&#xff0c;也是该结束自定义类型的学习与巩固了。 常常会回顾努力的自己&#xff0c;所以要给自己的努力留下足迹。 为今天努力的自己打个卡&#xff0c;留个痕迹吧 2024.03.30 小闭…

LInux|命令行参数|环境变量

LInux|命令行参数|环境变量 命令行参数main的参数之argc&#xff0c;argv几个小知识<font color#0099ff size 5 face"黑体">1.子进程默认能看到并访问父进程的数据<font color#4b0082 size 5 face"黑体">2.命令行创建的程序父进程都是bash 环…

微分方程错题本

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

【Qt】:信号与槽(二)

信号与槽 一.带参数的信号和槽二.信号与槽的多对多连接三.信号与槽的断开四.lamda表达式定义槽函数 一.带参数的信号和槽 Qt的信号和槽也⽀持带有参数,同时也可以⽀持重载.此处我们要求,信号函数的参数列表要和对应连接的槽函数参数列表⼀致.&#xff08;一致指的是类型一致&a…

mysql安装遇到的问题

最近mysql安装遇到了许多问题 这个界面是下载器界面&#xff0c;reconfigure是重新配置这个版本&#xff0c;要新安装要点add 进入这个界面选择对应的版本下载

MySQL 数据库基础操作详解

文章目录 MySQL 数据库基础操作详解1. 基本概念2. 库的操作3. 表的操作4. 数据操作5. 示例示例一&#xff1a;创建表和插入数据示例二&#xff1a;查询数据示例三&#xff1a;更新数据示例四&#xff1a;删除数据 MySQL 数据库基础操作详解 MySQL 是一种常用的关系型数据库管理…

【目录整理】(五)

​​​​​Git 基础 Git 详细安装教程文章浏览阅读10w次&#xff0c;点赞9.6k次&#xff0c;收藏1.7w次。Git 是个免费的开源分布式版本控制系统&#xff0c;下载地址为git-scm.com 或者 gitforwindows.org&#xff0c;本文介绍 Git-2.40.0-64-bit.exe 版本的安装方法&#x…