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

web前端第一次作业

以下为代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title></head><body><form action="java-api.super-yx.com/register" method="post" enctype="multipart/form-data"></form><table border="1"><tr><td align="center" colspan="2" bgcolor="grey" >用户注册</td></tr><br /><tr><td align="right"><label for="username">用户名</label></td><td><input type="text" name="username" id="username" maxlength="20"></td></tr><br /><tr><td align="right"><label for="edit">密码</label></td><td><input type="password" name="password" id="password" maxlength="20"></td></tr><br /><tr><td align="right"><label for="gender">性别</label></td><td><input type="radio" name="gender" value="男" checked/>男<input type="radio" name="gender" value="女"/>女</td></tr><br /><tr><td align="right"><label for="hob">爱好</label></td><td><input type="checkbox" name="hob" value="写作"/>写作    <input type="checkbox" name="hob" value="听音乐"/>听音乐<input type="checkbox" name="hob" value="体育"/>体育</td></tr><br /><tr><td align="right">省份</td><td><select name="province"><option value="shanxi" selected>陕西省</option><option value="shanx">山西省</option></select></td></tr><tr><td align="right">自我介绍</td><td><textarea name="intro" rows="5" cols="25" placeholder="这个家伙什么也没留下"></textarea></td></tr><br /><tr><td colspan="2" align="center" bgcolor="grey"><input type="submit" value="提交"/><input type="reset" value="重置"/></td></tr></table></body>
</html>
  1. 表单属性
    • action="java - api.super - yx.com/register":指定了表单提交数据的目标 URL。当用户点击提交按钮时,表单数据将被发送到这个 URL。
    • method="post":表示表单数据将以 POST 方法提交。POST 方法通常用于提交敏感数据,因为数据不会显示在 URL 中。
    • enctype="multipart/form - data":这种编码类型用于表单需要上传文件的情况。不过在当前表单中,并没有文件上传元素(如<input type="file">),如果不需要上传文件,一般可以使用enctype="application/x - www - form - urlencoded"
  2. 表单元素
    • 表格布局(<table>标签)
      • 整个表单使用表格进行布局。<table border="1">设置了表格边框为 1 像素。
    • 用户注册标题(<tr><td>标签)
      • <tr><td align="center" colspan="2" bgcolor="grey">用户注册</td></tr>:这一行创建了一个跨两列(colspan="2")、背景色为灰色(bgcolor="grey")、内容居中(align="center")的单元格,用于显示表单标题 “用户注册”。
    • 用户名输入(<input type="text">
      • <tr><td align="right"><label for="username">用户名</label></td><td><input type="text" name="username" id="username" maxlength="20"></td></tr>
        • <label for="username"><input type="text" id="username">相关联,当用户点击标签时,会聚焦到对应的输入框。
        • name="username"是表单数据中用户名对应的键,id="username"用于标识元素,maxlength="20"限制了用户名输入的最大长度为 20 个字符。
    • 密码输入(<input type="password">
      • <tr><td align="right"><label for="password">密码</label></td><td><input type="password" name="password" id="password" maxlength="20"></td></tr>
        • 与用户名输入类似,这里的<input type="password">用于输入密码,输入的内容会以黑点或星号显示,以保护隐私。name="password"是密码对应的键,maxlength="20"限制了密码长度。
    • 性别选择(<input type="radio">
      • <tr><td align="right"><label for="gender">性别</label></td><td><input type="radio" name="gender" value="男" checked/>男<input type="radio" name="gender" value="女"/>女</td></tr>
        • 使用单选按钮来选择性别。两个<input type="radio">name属性都为gender,这使得它们属于同一组,用户只能选择其中一个。value属性分别为 “男” 和 “女”,表示选择后提交的值。checked属性在 “男” 选项上,表示默认选中 “男”。
    • 爱好选择(<input type="checkbox">
      • <tr><td align="right"><label for="hob">爱好</label></td><td><input type="checkbox" name="hob" value="写作"/>写作<input type="checkbox" name="hob" value="听音乐"/>听音乐<input type="checkbox" name="hob" value="体育"/>体育</td></tr>
        • 使用复选框来选择爱好。每个<input type="checkbox">name属性都为hobvalue属性分别对应不同的爱好。用户可以选择多个爱好。
    • 省份选择(<select>
      • <tr><td align="right">省份</td><td><select name="province"><option value="shanxi" selected>陕西省</option><option value="shanx">山西省</option></select></td></tr>
        • 使用下拉菜单来选择省份。<select name="province">定义了下拉菜单,name属性为province<option>标签定义了菜单中的选项,value属性是提交的值,selected属性在 “陕西省” 选项上,表示默认选中陕西省。
    • 自我介绍(<textarea>
      • <tr><td align="right">自我介绍</td><td><textarea name="intro" rows="5" cols="25" placeholder="这个家伙什么也没留下"></textarea></td></tr>
        • <textarea>用于输入多行文本。name="intro"是提交数据时对应的键,rows="5"cols="25"分别设置了文本区域的行数和列数,placeholder属性提供了一个提示文本,当文本区域为空时显示。
    • 提交和重置按钮(<input type="submit"><input type="reset">
      • <tr><td colspan="2" align="center" bgcolor="grey"><input type="submit" value="提交"/><input type="reset" value="重置"/></td></tr>
        • <input type="submit">按钮用于提交表单数据,value="提交"设置了按钮上显示的文本。<input type="reset">按钮用于重置表单中的所有输入值,value="重置"设置了按钮上显示的文本。这一行的单元格跨两列(colspan="2"),背景色为灰色(bgcolor="grey"),内容居中(align="center")。

代码运行结果如下

 

相关文章:

web前端第一次作业

以下为代码 <!DOCTYPE html> <html><head><meta charset"utf-8"><title></title></head><body><form action"java-api.super-yx.com/register" method"post" enctype"multipart/form-…...

CMake 开发者手册

CMake 开发者手册 CMake 开发者手册一、介绍二、cmake 访问 Windows 注册表2.1 cmake 查询 Windows 注册表2.2 cmake 使用 Windows 注册表查找 3. find_package 查找模块3.1 cmake 查找模块的示例用法3.2 标准变量名称3.3 find_package 一个简单的查找模块示例 六、其他文章推荐…...

Redis入门:在Java程序中高效使用Redis

准备工作 下载windows版的Redis&#xff08;自行查找网络资源&#xff09; 解压到指定文件夹 如图所示&#xff1a;Redis的目录结构 redis本质上也是一个数据库&#xff0c;只不过经常被用作缓存 。redis分为服务端和客户端&#xff0c;先启动服务器redis-server&#xff0c;在…...

活着就好20241021

今日提醒&#xff1a;2024年10月21日&#xff0c;星期一&#xff0c;已是开工第247天。早安&#xff0c;摸鱼界的同仁们&#xff01; 健康警钟&#xff1a;即便工作繁忙&#xff0c;也别忘了关爱自己。起身走走&#xff0c;茶水间、厕所、廊道都是好去处&#xff0c;毕竟&…...

阿里字节技术管理岗位面试要求

在阿里巴巴等互联网公司&#xff0c;技术管理岗&#xff08;如技术团队负责人 TL 或 P8/P9 级别的职位&#xff09;面试具有较高的技术要求和管理能力的考核。面试的问题和侧重点通常包括技术深度、架构设计、团队管理、项目推动等多方面。以下是一些常见的面试问题类型、侧重点…...

MySQL !=NULL 与IS NOT NULL

1、! 与<>比较 在MySQL中 ! 和 <> 的功能一致&#xff0c;在sql92规范中建议是&#xff1a;!&#xff0c;新的规范中建议为: <> 2、!NULL 与IS NOT NULL 比较 先说结论&#xff1a;默认情况下做比较条件时使用关键字“IS NULL”和“IS NOT NULL”&#xff1…...

[Unity Demo]从零开始制作空洞骑士Hollow Knight第十六集(上篇):制作更多地图,更多敌人,更多可交互对象

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、第一个代表性场景 1.制作敌人僵尸跳跳虫更多敌人2.制作敌人阿斯匹德更多可交互对象3.制作敌人孵化虫和它的孩子二、第二个代表性场景 1.制作更多敌人2.制作…...

Soap-UI传参

<?xml version"1.0" encoding"UTF-8"?> <soapenv:Envelope xmlns:soapenv"http://schemas.xmlsoap.org/soap/envelope/" xmlns:web"http://webservice.ihosp.jxmns.thirdparty.his.gocent.com/"><soapenv:Header/>…...

Centos7搭建minio对象存储服务器

Centos7搭建minio对象存储服务器 安装二进制程序配置服务文件 安装二进制程序 参考&#xff1a;https://segmentfault.com/q/1010000042181876 minio中国版&#xff1a;https://www.minio.org.cn/download.shtml#/linux # 下载二进制程序 wget https://dl.min.io/server/min…...

递归算法之汉诺塔问题(Tower of Hanoi)详细解读

汉诺塔问题&#xff08;Tower of Hanoi&#xff09;是一个经典的递归问题&#xff0c;由法国数学家 douard Lucas 于1883年提出。问题描述了如何将不同大小的圆盘从一个柱子移到另一个柱子&#xff0c;同时遵循特定规则。它是计算机科学中用来展示递归思想和算法设计的经典案例…...

软件设计模式------工厂方法模式

工厂方法模式&#xff08;Factory Method Pattern&#xff09;&#xff0c;又称工厂模式&#xff0c;也叫虚拟构造器模式&#xff08;Virtual Constructor Pattern&#xff09;或多态工厂模式&#xff08;Polymorphic Pactory Pattern&#xff09;,属于类创建型模式。 我们知道…...

演示:基于WPF的DrawingVisual开发的高刷新率示波器

一、目的&#xff1a;分享一个基于WPF的DrawingVisual开发的高刷新率示波器 二、效果演示 特此说明&#xff1a;由于Gif录制工具帧率不够&#xff0c;渲染60帧用了4.6秒&#xff0c;平均帧率在12Hz左右&#xff0c;所以展示效果不好&#xff0c;想要看好些的效果可以看文章下面…...

git入门操作(2)

文章目录 git入门操作&#xff08;2&#xff09;git diff 查看差异git diff gitignore忽略文件1.在代码仓库创建这个文件2.添加对 log 文件过滤 连接远程仓库与ssh配置远程仓库和本地仓库关联步骤分支基本操作步骤命令&#xff1a; 合并冲突分支合并逻辑1.新建分支 dev&#xf…...

【AI学习】扩散模型学习总结PPT

#1024程序员节&#xff5c;征文# 看了一些文章&#xff0c;大概学习了扩散模型。 《李宏毅 2023 最新 Diffusion Model 原理讲解》&#xff08;文章链接&#xff1a;https://zhuanlan.zhihu.com/p/692430885&#xff09; 《What are Diffusion Models?》 https://lilianwen…...

【Python】相等性比较运算(==, is)的学习笔记

1. 相等性比较运算&#xff1a; & is Python中有两种比较运算符和is&#xff1b; 和 is 的主要区别在于它们比较的对象属性不同&#xff1a; 运算符&#xff1a; 比较对象的值或内容是否相等。调用对象的 __eq__() 方法来进行比较。可以被重载&#xff08;在自定义类中重…...

智慧公厕厂家:智慧公厕建设推动城市公厕智能化变革

随着科技的不断进步&#xff0c;智慧公厕厂家正以创新之力推动着城市公厕的智能化变革。 一、提升用户体验 智慧公厕为使用者带来了前所未有的便利。通过实时显示厕位使用情况&#xff0c;避免了旅客的无效排队&#xff0c;节省了时间。感应式设备如水龙头、洗手液等&#xff…...

大一计算机课程之线性代数

《大一计算机课程之线性代数》 在大一的计算机课程中&#xff0c;线性代数是一门极为重要的基础学科&#xff0c;它就像一把神奇的钥匙&#xff0c;为计算机科学领域的诸多方面开启了智慧之门。 线性代数主要研究线性方程组、向量空间、线性变换等内容。对于计算机专业的学生…...

什么是运动控制器?运动控制器的特点

运动控制器是一种专门用于控制机械系统中运动部件&#xff08;如电机、驱动器和其他运动元件&#xff09;的电子设备。它们在自动化、机器人、数控机床、工业自动化和精密控制系统等领域得到了广泛应用。 运动控制器的功能 运动控制器主要负责以下几个方面的功能&#xff1a;…...

[AWS]RDS数据库版本升级

背景&#xff1a;由于AWS上mysql5.7版本不再支持&#xff0c;需要进行版本升级。 吐槽&#xff1a;每年都要来那么几次&#xff0c;真的有病一样&#xff0c;很烦。 步骤一、升级检查 AWS提供了一个python的升级检测脚本&#xff0c;可以按照一下脚本下载测试&#xff1a; [r…...

(Golang)初识Go语言!!为什么选择Go?如何配置Go的开发环境?VS Code如何配置Go环境?

1. Go能做什么&#xff1f; go的优点&#xff1a;运行速度快、并发能力强 Go的应用领域&#xff1a; 区块链应用&#xff08;BT、分布式账本技术&#xff09; 后端服务应用 例如&#xff1a; 美团后台流量支撑程序 支撑主站的后台流量&#xff08;排序、推荐、搜索等&#xf…...

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

盘古信息PCB行业解决方案:以全域场景重构,激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

边缘计算医疗风险自查APP开发方案

核心目标:在便携设备(智能手表/家用检测仪)部署轻量化疾病预测模型,实现低延迟、隐私安全的实时健康风险评估。 一、技术架构设计 #mermaid-svg-iuNaeeLK2YoFKfao {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)

服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...

从零实现STL哈希容器:unordered_map/unordered_set封装详解

本篇文章是对C学习的STL哈希容器自主实现部分的学习分享 希望也能为你带来些帮助~ 那咱们废话不多说&#xff0c;直接开始吧&#xff01; 一、源码结构分析 1. SGISTL30实现剖析 // hash_set核心结构 template <class Value, class HashFcn, ...> class hash_set {ty…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

重启Eureka集群中的节点,对已经注册的服务有什么影响

先看答案&#xff0c;如果正确地操作&#xff0c;重启Eureka集群中的节点&#xff0c;对已经注册的服务影响非常小&#xff0c;甚至可以做到无感知。 但如果操作不当&#xff0c;可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...