web(HTML之表单练习)

使用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字符串多行文本框的名称

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

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

相关文章

Web安全漏洞分析—文件包含

在当今数字化时代&#xff0c;随着Web应用程序的广泛应用&#xff0c;网络安全问题愈加凸显。其中&#xff0c;文件包含漏洞作为一种常见但危险的安全隐患&#xff0c;为恶意攻击者提供了可乘之机。在这篇博客中&#xff0c;我们将深入探讨文件包含漏洞的本质、攻击手法以及应对…

PMP项目管理 - 沟通管理

系列文章目录 PMP项目管理 - 质量管理 PMP项目管理 - 采购管理 PMP项目管理 - 资源管理 PMP项目管理 - 风险管理 现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everything is for the future of dream weaving wings, let the dream fly in…

LVS-DR部署

目录 LVS的工作模式及其工作过程 NAT模式&#xff08;VS-NAT&#xff09; 直接路由模式&#xff08;VS-DR&#xff09; IP隧道模式&#xff08;VS-TUN&#xff09; DR模式 LVS负载均衡群集的分析及特点 数据包流向分析 DR 模式的特点 LVS-DR部署实例 LVS-DR模式部署流…

2023最新最全【PostMan】安装教程

为了验证接口能否被正常访问&#xff0c;我们常常需要使用测试工具&#xff0c;来对数据接口进行检测。 好处&#xff1a;接口测试工具能让我们在不写任何代码的情况下&#xff0c;对接口进行调用和调试。 下载并安装PostMan 首先&#xff0c;下载并安装PostMan&#xff0c;请…

吊炸天,腾讯开源的一站式微服务解决方案

项目介绍 Spring Cloud Tencent 是腾讯开源的一站式微服务解决方案。 Spring Cloud Tencent 实现了Spring Cloud 标准微服务 SPI&#xff0c;开发者可以基于 Spring Cloud Tencent 快速开发 Spring Cloud 云原生分布式应用。 Spring Cloud Tencent 的核心依托腾讯开源的一站式…

Git-瑞吉外卖

什么是GIt? 分布式版本控制工具&#xff0c;用来管理源代码文件。分布式主要体现在两种仓库&#xff08;本地仓库、远程仓库&#xff09;。 git的作用&#xff1f; 代码回溯、版本切换&#xff08;切换不同框架&#xff09;、多人协作、远程备份 基本命令&…

SpringBoot零基础入门到项目实战——学习路线规划与目录结构

文章目录 第一部分&#xff1a;Spring Boot基础第二部分&#xff1a;Web开发与RESTful API第三部分&#xff1a;数据访问与持久化第四部分&#xff1a;安全与身份验证第五部分&#xff1a;高级主题第六部分&#xff1a;测试总结与扩展实战项目练习 &#x1f389;欢迎来到Spring…

Base64编码解码(文本与文件)

目录 1.什么是base64 2.在java中使用base64 3.在js中使用base64 1.什么是base64 base64编码就是将字符串以每3个比特&#xff08;bit&#xff09;的字节子序列拆分为4个6比特&#xff08;bit&#xff09;的字节子序列&#xff08;这个6比特是有效字节&#xff0c;最左边两个…

xilinx原语介绍及仿真——ODELAYE2

7系列IO模块相关的结构如图1所示&#xff0c;前文对IOB、IDELAYE2、ILOGIC、OLOGIC进行了讲解&#xff0c;还剩下ISERDESE2、OSERDESE2、ODELAYE2原语&#xff0c;本文对ODELAYE2进行讲解&#xff0c;该原语只有HP bank才有&#xff0c;即7系列FPGA的A7系列没有ODELAYE2结构&am…

探索太空深渊:计算机技术在航天领域的无限可能

探索太空深渊&#xff1a;计算机技术在航天领域的无限可能 一、引言 在21世纪的科技浪潮中&#xff0c;太空探索和计算机技术无疑是两个最为璀璨夺目的领域。它们各自的发展都足以改变人类社会的未来&#xff0c;而当这两者交汇时&#xff0c;所激发出的创新和变革更是超乎我…

git-lfs基本知识讲解

目录 1. 基本知识2. 安装 1. 基本知识 git-lfs 是 Git Large File Storage 的缩写&#xff0c;是 Git 的一个扩展&#xff0c;用于处理大文件的版本控制。 它允许你有效地管理和存储大型二进制文件&#xff0c;而不会使 Git 仓库变得过大和不稳定。以下是一些与 git-lfs 相关…

IIS如何本地部署网站,作为局域网内的服务器

文章目录 IIS本地部署WebService1.使用IIS及WebService的原因:2.相关文件说明及网络条件说明&#xff1a;&#xff08;1&#xff09;文件说明&#xff1a;&#xff08;2&#xff09;网络条件说明&#xff1a; 3.IIS安装与配置&#xff1a;第一步&#xff1a;安装第二步&#xf…

01--二分查找

一. 初识算法 1.1 什么是算法&#xff1f; 在数学和计算机科学领域&#xff0c;算法是一系列有限的严谨指令&#xff0c;通常用于解决一类特定问题或执行计算 不正式的说&#xff0c;算法就是任何定义优良的计算过程&#xff1a;接收一些值作为输入&#xff0c;在有限的时间…

介绍一款上传漏洞fuzz字典生成工具

介绍一款上传漏洞fuzz字典生成工具 1.工具概述2.安装3.参数解析4.使用案例1.工具概述 upload-fuzz-dic-builder是一个上传漏洞fuzz字典生成脚本,生成时给的上传点相关信息越详细,生成的字典越精确 upload-fuzz-dic-builder 2.安装 克隆项目: git clone git@github.com:c…

CTF-文件包含(1)

南邮杯CTF 文件包含 题目地址&#xff1a;asdf 点击后利用file函数对show.php进行文件利用 使用伪协议php://filter/readconvert.base64-encode/resourceindex.php访问index.php文件 base64解码后得到flag [极客大挑战 2019]Secret File 题目地址&#xff1a;BUUCTF在线评测 …

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

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

我的网站服务器被入侵了该怎么办?

最近有用户咨询到德迅云安全&#xff0c;说自己再用的网站服务器遇到了入侵情况&#xff0c;询问该怎么处理入侵问题&#xff0c;有什么安全方案可以解决服务器被入侵的问题。下面&#xff0c;我们就来简单讲下服务器遇到入侵了&#xff0c;该从哪方面入手处理&#xff0c;在预…

Stable-Diffusion|文生图 完蛋我被美女包围了人物Lora(四)

前面几篇&#xff1a; Stable-Diffusion|window10安装GPU版本的 Stable-Diffusion-WebUI遇到的一些问题&#xff08;一&#xff09; 【Stable-Diffusion|入门怎么下载与使用civitai网站的模型&#xff08;二&#xff09;】 Stable-Diffusion|文生图 拍立得纪实风格的Lora 图例&…

线性代数(一)

1.标量&#xff1a;标量由只有⼀个元素的张量表⽰。 x np.array(3.0) y np.array(2.0) x y, x * y, x / y, x ** y (array(5.), array(6.), array(1.5), array(9.))2.向量&#xff1a;向量可以被视为标量值组成的列表&#xff0c;列向量是向量的默认⽅向。 x np.arange(4…

Vue3-09-条件渲染-v-show 的基本使用

v-show 的作用 v-show 可以根据条件表达式的值【展示】或【隐藏】html 元素。v-show 的特点 v-show 的实现方式是 控制 dom 元素的 css的 display的属性&#xff0c; 因此&#xff0c;无论该元素是否展示&#xff0c;该元素都会正常渲染在页面上&#xff0c; 当v-show 的 条件…