当前位置： 首页 > news >正文

web（HTML之表单练习）

news 文章来源：https://blog.csdn.net/weixin_68256171/article/details/135038285 2025/1/6 8:50:45

使用HTML实现该界面：

要求如下：

  1. 用户名为文本框，名称为 UserName，长度为 15，最大字符数为 20。

  2. 密码为密码框，名称为 UserPass，长度为 15，最大字符数为 20。

  3. 性别为两个单选按钮，名称为 sex，值分别为男和女，男默认选中。

  4. 爱好是三个多选按钮，名称为 like，值分别为写作、听音乐、体育。

  5. 省份为下拉框，名称为 province，选项的键-值对为 Key:陕西省，value:shaanxi ；Key:山西省，value:shanx；陕西省默认选中。

  6. 自我介绍为多行文本框，名称为 intro，宽 25，高 5，默认值为“这个家伙什么也没留下”。

  7. 提交按钮，名称为“send”，标签为“提交”。

  8. 重置按钮，名称为“reset”，标签为“重置”。

  9. 参照图使用表格定位表单。

实现HTML代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户注册</title></head><style>table{background-color: #D3D3D3;}</style><body><table border="1" cellspacing="0" cellpadding="2"><tr><td colspan="2" align="center" bgcolor="grey">用户注册</td>				</tr><tr><td align="right">用户名</td><td><input type="text" name="UserName" value="" minlength="15" maxlength="20"/></td></tr><tr><td align="right">密码</td><td><input type="password" name="UserPass" minlength="15" maxlength="20"/></td></tr><tr><td align="right">性别</td><td><input type="radio" name="sex" value="男" checked/>男 <input type="radio" name="sex" value="女"/>女<br/></td></tr><tr><td align="right">爱好</td><td><input type="checkbox" name="like" value="写作"/>写作 <input type="checkbox" name="like" value="听音乐"/>听音乐 <input type="checkbox" name="like" value="体育"/>体育<br /></td></tr><tr><td align="right">省份</td><td><select name="province" ><option value="shaanxi" selected>陕西省</option><option value="shanx">山西省</option></select></td></tr><tr><td align="right">自我介绍</td><td><textarea name="intro" cols="25" rows="5">这个家伙什么也没留下</textarea></td></tr><tr><td colspan="2" align="center" bgcolor="grey"><input type="submit" name="send"/><input type="reset" name="reset"/></td></tr></table>

结果图：

涉及知识点

1、表格标签（<table>、<tr>、<td>）、表格对齐、表格背景、表格填充和边距、表格的合并（单元格跨行rowspan、跨列colspan）

2、表单标签（<input>、<select>、<textarea>）

input标签type属性

类型作用
text单行文本框
password密码框
radio单选按钮
checkbox多选按钮
submit提交按钮
reset复位按钮
button按钮
image图像按钮

hidden

file

隐藏域

文件域

input标签其他属性

属性名称属性值功能
name字符串元素名称
value字符串元素值
id字符串客户端唯一标识
size数字以字符个数设定的元素宽度
maxlength数字元素接受字符数的上限
checked元素是否被选中

select标签

属性名称属性值属性作用
option子项下拉框的选项
value字符串选项的值
name字符串下拉框的名称
selected默认被选中的选项
multiple”multiple“

以列表形式显示

当select标签设置 multiple属性时，select以列表形式显示，当select标签不设置 multiple属性时，以下拉框形式显示。列表框在选择时按住键盘的ctrl或shift键可以实现多选，而下拉框只能单选。

textarea标签

属性名称属性值属性作用
cols数字以字符个数设定的多行文本框的宽度
rows数字以行数设定的多行文本框的高度
name字符串多行文本框的名称

相关文章：

web（HTML之表单练习）

使用HTML实现该界面&#xff1a; 要求如下&#xff1a; 用户名为文本框&#xff0c;名称为 UserName&#xff0c;长度为 15&#xff0c;最大字符数为 20。 密码为密码框&#xff0c;名称为 UserPass&#xff0c;长度为 15&#xff0c;最大字符数为 20。 性别为两个单选按钮&a…...

编程日记 2023/12/18 21:11:30

通过对象轮换实现 LRU 缓存结构

文章目录 通过两个对象轮换&#xff0c;按照是否访问实现内容长久保存rollup 的缓存实现 export default function (max) { //max 缓存容量var num, curr, prev;var limit max || 1;function keep(key, value) {if (num > limit) {prev curr; // 超过容量时当前对象变成缓…...

编程日记 2023/12/18 21:07:26

【Unity动画】综合案例完结-控制角色动作播放+声音配套

这个案例实现的动作并不复杂&#xff0c;主要包含一个 跳跃动作、攻击动作、还有一个包含三个动画状态的动画混合树。然后设置三个参数来控制切换。 状态机结构如下&#xff1a; 完整代码 using System.Collections; using System.Collections.Generic; using UnityEngine;pu…...

编程日记 2023/12/18 21:06:25

【工作流Activiti】任务组

1、Candidate-users候选人 1.1、需求 在流程定义中在任务结点的assignee固定设置任务负责人&#xff0c;在流程定义时将参与者固定设置在.bpmn文件中&#xff0c;如果要临时变更任务负责人则需要修改流程定义&#xff0c;系统扩展性很差&#xff0c;针对这种情况&#xff0c;我…...

编程日记 2023/12/18 21:05:24

桌面概率长按键盘无法连续输入问题

问题描述&#xff1a;概率性长按键盘无法连续输入文本 问题定位&#xff1a; 系统按键流程分析 图一 系统按键流程 按键是由X Server接收的&#xff0c;这一点只要明白了X Window的工作机制就不难理解了。X Server在接收到按键后&#xff0c;会转发到相应程序的窗口中。在窗…...

编程日记 2023/12/18 21:03:23

用23种设计模式打造一个cocos creator的游戏框架----(十九)备忘录模式

1、模式标准 模式名称&#xff1a;备忘录模式 模式分类&#xff1a;行为型 模式意图&#xff1a;在不破坏封装性的前提下捕获一个对象的内部状态&#xff0c;并在对象之外保存这个状态。这样以后就可以将对象恢复到原先保存的状态 结构图&#xff1a; 适用于&#xff1a; …...

编程日记 2023/12/18 20:58:16

动手学深度学习-自然语言处理-预训练

词嵌入模型 将单词映射到实向量的技术称为词嵌入。 为什么独热向量不能表达词之间的相似性&#xff1f; 自监督的word2vec。 word2vec将每个词映射到一个固定长度的向量&#xff0c;这些向量能更好的表达不同词之间的相似性和类比关系。 word2vec分为两类&#xff0c;两类…...

编程日记 2023/12/18 20:57:15

力扣200. 岛屿数量（java DFS解法）

Problem: 200. 岛屿数量 文章目录 题目描述思路解题方法复杂度Code 题目描述 思路 该问题可以归纳为一类遍历二维矩阵的题目&#xff0c;此类中的一部分题目可以利用DFS来解决&#xff0c;具体到本题目&#xff1a; 1.我们首先要针对于二维数组上的每一个点&#xff0c;尝试展…...

编程日记 2023/12/18 20:53:10

解决el-table组件中，分页后数据的勾选、回显问题？

问题描述&#xff1a; 1、记录一个弹窗点击确定按钮后&#xff0c;table列表所有勾选的数据信息2、再次打开弹窗&#xff0c;回显勾选所有保存的数据信息3、遇到的bug&#xff1a;切换分页&#xff0c;其他页面勾选的数据丢失&#xff1b;点击确认只保存当前页的数据&#xff1…...

编程日记 2023/12/18 20:52:10

web网络安全

web安全 一&#xff0c;xss 跨站脚本攻击(全称Cross Site Scripting,为和CSS&#xff08;层叠样式表&#xff09;区分&#xff0c;简称为XSS)是指恶意攻击者在Web页面中插入恶意javascript代码&#xff08;也可能包含html代码&#xff09;&#xff0c;当用户浏览网页之时&…...

编程日记 2023/12/18 20:49:06

若依 ruoyi-vue3 集成aj-captcha实现滑块、文字点选验证码

目录 0. 前言0.1 说明 1. 后端部分1.1 添加依赖1.2. 修改 application.yml1.3. 新增 CaptchaRedisService 类1.4. 添加必须文件1.5. 移除不需要的类1.6. 修改登录方法1.7. 新增验证码开关获取接口1.8. 允许匿名访问 2. 前端部分&#xff08;Vue3&#xff09;2.1. 新增依赖 cryp…...

编程日记 2023/12/18 20:46:04

安卓10 flutter webview 回退会闪退

现象 在安卓10设备上&#xff0c;访问了webview页面后&#xff0c;回退到其他页面后&#xff0c;大概率会闪退&#xff0c;请查看issuses https://github.com/flutter/flutter/issues/78405 解决思路&#xff1a;在回退前&#xff0c;先把webview销毁掉&#xff0c;重新生成一个…...

编程日记 2023/12/18 20:45:03

【Unity入门】物体5种移动方法

目录 一、通过修改位置来实现移动二、通过物理系统实现位移三、通过CharacterController组件四、通过输入控制物体移动 一、通过修改位置来实现移动 利用修改Transform组件的position的两种常用方法。 使用Translate&#xff08;&#xff09;函数 /*物体将向x方向移动1.5单位…...

编程日记 2023/12/18 20:42:59

Elasticsearch的 8.x常用api汇总

ES的查询语法比较复杂，对于初学者需要在不断练习中才会逐渐掌握，本文汇总了ES各种查询语法以及常用api，可以作为新手的实用笔记 首先，安装 Kibana！ 下载Elasticsearch，官方下载页面;Elasticsearch 参考，官方文档;<...

编程日记 2023/12/18 20:41:57

k8syaml提供的几个有意思的功能，Kubernetes在线工具网站

k8syaml.cn 提供的几个有意思的功能。 一、yaml资源快速生成 之前编写operator的helm的时候就需要自己写deployment、service、configmap这些资源&#xff0c;那么多字段也记不清&#xff0c;都是先找个模版&#xff0c;然后copy改改&#xff0c;再看官方文档&#xff0c;添加…...

编程日记 2023/12/18 20:40:56

【图像分类】【深度学习】【Pytorch版本】 ResNeXt模型算法详解

【图像分类】【深度学习】【Pytorch版本】 ResNeXt模型算法详解 文章目录 【图像分类】【深度学习】【Pytorch版本】 ResNeXt模型算法详解前言ResNeXt讲解分组卷积(Group Converlution)分割-变换-合并策略(split-transform-merge)ResNeXt模型结构 ResNeXt Pytorch代码完整代码总…...

编程日记 2023/12/18 20:38:55

Android 14 应用适配指南

Android 14 应用适配指南&#xff1a;https://dev.mi.com/distribute/doc/details?pId1718 Android 14 功能和变更列表 | Android 开发者 | Android Developers 1.获取Android 14 1.1 谷歌发布时间表 https://developer.android.com/about/versions/14/overview#timeli…...

编程日记 2023/12/18 20:36:53

【AI美图提示词】第07期效果图，AI人工智能自动绘画，精选绝美版美图欣赏

AI诗配画 山水画中景如画&#xff0c;云雾缭绕峰峦间。桥畔流水潺潺响&#xff0c;诗意盎然山水间。上面的诗句和图片全部来自AI自动化完成&#xff0c;这就是技术的力量&#xff0c;接下来我们进行模型生成学习&#xff1a; 先上原始底图&#xff1a; 下面是模型生成效果图&a…...

编程日记 2023/12/18 20:34:50

前端知识（十三）——JavaScript监听按键，禁止F12，禁止右键，禁止保存网页【Ctrl+s】等操作

禁止右键 document.oncontextmenu new Function("event.returnValuefalse;") //禁用右键禁止按键 // 监听按键 document.onkeydown function () {// f12if (window.event && window.event.keyCode 123) {alert("F12被禁用");event.keyCode 0…...

编程日记 2023/12/18 20:31:47

面向对象设计与分析（28）单例模式的奇异递归模板CRTP实现

前面我们介绍了单例模式的两种实现&#xff1a;懒汉模式和饿汉模式&#xff0c;今天我们以新的方式来实现可复用的单例模式。 奇异递归模板是指父类是个模板类&#xff0c;模板类型是子类类型&#xff0c;即父类通过模板参数可以知道子类的类型。 // brief: a singleton base…...

编程日记 2023/12/18 20:29:45

微信小程序 - 龙骨图集拆分

微信小程序 - 龙骨图集拆分 注意目录结构演示动画废话一下业务逻辑注意点龙骨JSON图集结构 源码分享dragonbones-split.jsdragonbones-split.jsondragonbones-split.wxmldragonbones-split.wxssimgUtil.js 参考资料 注意 只支持了JSON版本 目录结构 演示动画 Spine播放器1.5.…...

编程日记 2023/12/18 20:28:44

使用React 18和WebSocket构建实时通信功能

1. 引言 WebSocket是一种在Web应用中实现双向通信的协议。它允许服务器主动向客户端推送数据&#xff0c;而不需要客户端发起请求。在现代的实时应用中&#xff0c;WebSocket经常用于实时数据传输、聊天功能、实时通知和多人协作等场景。在本篇博客中&#xff0c;我们将探索如…...

编程日记 2023/12/18 20:26:42

vue3使用vue-router嵌套路由(多级路由)

文章目录 1、Vue3 嵌套路由2、项目结构3、编写相关页面代码3.1、编写route文件下 index.ts文件3.2、main.ts文件代码&#xff1a;3.3、App.vue文件代码&#xff1a;3.4、views文件夹下的Home文件夹下的index.vue文件代码&#xff1a;3.5、views文件夹下的Home文件夹下的Tigerhh…...

编程日记 2023/12/18 20:23:40

openGauss学习笔记-164 openGauss 数据库运维-备份与恢复-导入数据-使用COPY FROM STDIN导入数据-处理错误表

文章目录 openGauss学习笔记-164 openGauss 数据库运维-备份与恢复-导入数据-使用COPY FROM STDIN导入数据-处理错误表164.1 操作场景164.2 查询错误信息164.3 处理数据导入错误 openGauss学习笔记-164 openGauss 数据库运维-备份与恢复-导入数据-使用COPY FROM STDIN导入数据-…...

编程日记 2023/12/18 20:22:39

QT Widget - 随便画个圆

简介 实现在界面中画一个圆, 其实目的是想画一个LED效果的圆。代码 #include <QApplication> #include <QWidget> #include <QPainter> #include <QColor> #include <QPen>class LEDWidget : public QWidget { public:LEDWidget(QWidget *pare…...

编程日记 2023/12/18 20:18:35

js输入框部分内容不可编辑，其余正常输入，el-input和el-select输入框和多个下拉框联动后的内容不可修改

<tr>//格式// required自定义指令<e-td :required"!read" label><span>地区&#xff1a;</span></e-td><td>//v-if"!read && this.data.nationCode 148"显示逻辑<divclass"table-cell-flex"sty…...

编程日记 2023/12/18 20:17:34

分布式文件存储系统minio了解下

什么是minio minio 是一个基于 Apache License v2.0 开源协议的对象存储服务。非常适合于存储大容量非结构化的数据&#xff0c;例如图片、视频、日志文件、备份数据和容器/虚拟机镜像等&#xff0c;而一个对象文件可以是任意大小。 是一种海量、安全、低成本、高可靠的云存储…...

编程日记 2023/12/18 20:16:31

迅为RK3568开发板使用OpenCV处理图像-ROI区域-位置提取ROI

在图像处理过程中&#xff0c;我们可能会对图像的某一个特定区域感兴趣&#xff0c;该区域被称为感兴趣区域&#xff08;Region of Interest, ROI&#xff09;。在设定感兴趣区域 ROI 后&#xff0c;就可以对该区域进行整体操作。 位置提取 ROI 本小节代码在配套资料“iTOP-3…...

编程日记 2023/12/18 20:12:28

重新认识Word——尾注

重新认识Word——尾注 参考文献格式文献自动生成器插入尾注将数字带上方括号将参考文献中的标号改为非上标 多处引用一篇文献多篇文献被一处引用插入尾注有横线怎么删除&#xff1f;删除尾注 前面我们学习了如何给图片&#xff0c;公式自动添加编号&#xff0c;今天我们来看看毕…...

编程日记 2023/12/18 20:11:27

所有学前教育专业，一定要刷到这篇啊

我是真的希望所有学前教育的宝子都能刷到这篇啊啊&#xff0c;只要输入需求&#xff0c;几秒它就给你写出来了&#xff0c;而且不满意还可以重新写多&#xff0c;每次都是不一样的内容。重复率真的不高&#xff0c;需求越多&#xff0c;生成的文字内容越精准&#xff01;&#…...

编程日记 2023/12/18 20:08:24

西宁做网站君博领衔/营销网站的建造步骤

通过前面对例如&#xff0c;图 1 采用先序遍历的方法得到的结点序列为&#xff1a;1 2 4 5 3 6 7&#xff0c;在这个序列中&#xff0c;结点 2 的直接前趋结点为 1&#xff0c;直接后继结点为 4。什么是线索二叉树如果算法中多次涉及到对二叉树的遍历&#xff0c;普通的二叉树就…...

编程日记 2025/1/6 8:34:23

专业建站公司的业务内容/搜索引擎推广的关键词

Nim游戏292.Nim游戏题目描述思路&#xff1a;博弈论292.Nim游戏 题目描述 Nim游戏 思路&#xff1a;博弈论 由于每个人每次都只能取1~3个石头&#xff0c;&#xff0c;那么第二个人总能通过取第一个人取法跟4的补数的2石头&#xff0c;而达到稳定取得4或其他4的倍数的目的。…...

编程日记 2025/1/6 8:24:46

公司网站设计规划/培训网站推荐

目录: 数据类型介绍整形在内存中的存储&#xff1a;原码、反码、补码大小端字节序介绍及判断浮点型在内存中的存储解析 1.数据类型介绍 char //字符数据类型 short //短整型 int //整形 long //长整型 long long //更长的整形 float //单精度浮点数 double //双精度浮点数 1.1…...

编程日记 2025/1/6 6:59:21

网站自动下注程序应该怎么做/程序员培训机构哪家好

创建工程 创建工程目录 vue-city-picker 使用vue-cli初始化webpack工程 如果没有安装vue-cli的同学请走 传送门 在vue-city-picker同级目录录下执行 vue init webpack vue-city-picker接下来出现的提示可以参考下图 npm安装amaze-vue cd vue-city-picker npm npm install ama…...

编程日记 2025/1/6 5:23:27

金华免费模板建站/重庆人力资源和社会保障网

新闻营销是企业营销方式中最重要的一种&#xff0c;新闻营销成功的关键除了稿件撰写之外&#xff0c;新闻稿件发布也至关重要&#xff0c;有时候企业辛辛苦苦写了新闻稿&#xff0c;发布效果却不明显&#xff0c;究其原因是什么呢&#xff1f; 一、网络媒体关系构建建立网络媒…...

编程日记 2025/1/6 2:03:29

怎样做投资与理财网站/手机百度2020最新版

本文内容均为转载&#xff0c;转载地址&#xff1a;https://www.jianshu.com/p/fad9afefec0e 文章目录第一步、下载Gitblit第二步、解压缩下载的压缩包即可&#xff0c;无需安装第三步、创建用于存储资料的文件夹第四步、配置 gitblit.properties 文件第五步、运行 gitblit.cmd…...

编程日记 2025/1/5 22:10:01