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

web表单标签与练习（3.18）

news 2026/4/6 16:22:45

一、表单域

表单域是一个包含表单元素的区域。
在HTML标签中，< form >标签用于定义表单域，以实现用户信息和传递。
< form >会把它范围内的表单元素信息提交给服务器。

表单属性

action	url地址用于指定接收并处理表单数据的服务器程序的url地址
method	get/post 用于设置表单数据的提交方式，其取值为get或post
name	名称用于指定表单的名称，以区分同一个页面中的多个表单域。

表单元素

输入框	<input=text> readonly表示只读
单选框	<input=radio> required设置为必选项
密码框	<input=password>
多选框	<input=checkbox>
邮箱框	<input=email>
上传文件	<input=file>
按钮	<button></button>

name属性，表明是一组单选；checked，默认选中

下拉框：

<form action=""><select name="city" multiple><option value="上海">上海</option><option value="北京">北京</option><option value="广州" selected>广州</option></select><button>提交</button></form>

文本域：

 <form action=""><textarea name="liuyan" cols="300" rows="10" maxlength="200" placeholder="请写下你的留言"></textarea></form>

二、css

基本选择器：

标签选择器	标签名
类选择器	.类名
id选择器	#
通配符选择器	*

包含选择器：

子代选择器	.a>li
后代选择器	a li
逗号选择器	同时选择多个标签，用，隔开*/

引入方式

外链：<link rel="stylesheet" href="./08-index.css">

内部：

<style>

/* 选择器{

属性名:属性值;

} */

div {

width: 300px;

height: 300px;

background-color: green;

}

</style> -->

三、练习

html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册界面</title><link rel="stylesheet" href="../新建文件夹/css.css">
</head>
<body ><div class="zc"><div class="yhzc">用户注册</div><div style="width: 300px;margin: auto"><div class="small">用户名:</div><div class="kuang"><input type="text"style="width: 220px"></div><div class="small">密码:</div><div class="kuang"><input type="password" style="width: 220px"></div><div class="small">性别:</div><div class="duoxuan"><input type="radio" checked> 男 <input type="radio"> 女</div><div class="small">爱好:</div><div class="duoxuan"><input type="checkbox">写作 <input type="checkbox">听音乐 <input type="checkbox">体育</div><div class="small">省份:</div><div class="xiala"><select style="width: 100px"><option>陕西省</option><option>北京市</option></select></div><div class="small">自我介绍:</div><div class="xiala"><select multiple style="width: 250px"><option>&nbsp;</option></select></div><div style="height: 70px;line-height: 70px"><div style="width: 150px;float: left"><input type="submit" name="提交"style="width: 70px"></div><div style="width: 150px;float: left"><input type="reset" name="重置" style="width: 70px"></div></div></div></div></body>
</html>

css:

*{background-color: rgb(196, 196, 202);
}
.zc{width: 400px;height: 460px;border: 1px solid black;margin: auto;margin-top: 70px;text-align: center;
}
.yhzc{font-size: 32px;line-height: 50px;font-weight: bold;background-color: grey;
}
.kuang{width: 220px;float: left;height: 50px;line-height: 50px;
}
.small{width: 80px;height: 50px;line-height:50px;float: left;text-align: left;
}
.duoxuan{width: 220px;float: left;height: 50px;line-height: 50px;text-align: left;
}
.xiala{width: 220px;float: left;height: 50px;line-height: 50px;margin: auto;
}

web表单标签与练习（3.18）

一、表单域表单域是一个包含表单元素的区域。在HTML标签中，< form >标签用于定义表单域，以实现用户信息和传递。 < form >会把它范围内的表单元素信息提交给服务器。表单属性 action url地址用于指定接收并处理表单数据的服务器程序的…...

编程日记 2024/3/25 5:24:07

【协议-HTTP】

HTTP协议 HTTP协议(超文本传输协议HyperText Transfer Protocol)，它是基于TCP协议的应用层传输协议。http协议定义web客户端如何才能够web服务器请求web页面，以及服务器如何把web页面传送给客户端。 HTTP 是一种无状态 (stateless) 协议, HTTP协议本身…...

编程日记 2024/3/25 5:22:05

VUE3v-text、v-html、:style的理解

在Vue 3中，v-text、v-html和:style是三个常用的指令，它们各自具有不同的功能和用途。 v-text： v-text用于操作元素中的纯文本内容。它接受一个表达式，并将该表达式的值设置为元素的文本内容。如果元素原本有文本内容&#xff0c…...

编程日记 2024/3/25 5:21:04

Dataset之UCI_autos_cars：UCI_autos_imports-85(汽车进口数据集)的简介、安装、案例应用之详细攻略

Dataset之UCI_autos_cars：UCI_autos_imports-85(汽车进口数据集)的简介、安装、案例应用之详细攻略目录 UCI_autos_imports-85的简介 UCI_autos_imports-85的安装 UCI_autos_imports-85的案例应用 1、训练一个简单的线性回归模型来预测汽车的价格 UCI_autos_i…...

编程日记 2024/3/25 5:20:03

结构体类型详细讲解（附带枚举，联合）

前言： 如果你还对结构体不是很了解，那么本篇文章将会从为什么存在结构体，结构体的优点，结构体的定义，结构体的使用与结构体的大小依次介绍，同样会附带枚举与联合体目录为什么存在结构体： 结构…...

编程日记 2024/3/25 5:17:00

编程生活day1--个位数统计、考试座位号、A-B、计算阶乘和

个位数统计题目描述： 定一个 k 位整数 Ndk−110k−1⋯d1101d0 (0≤di≤9, i0,⋯,k−1, dk−1>0)，请编写程序统计每种不同的个位数字出现的次数。例如：给定 N100311，则有 2 个 0，3 个 1，和 …...

编程日记 2024/3/25 5:07:52

mysql体系结构及主要文件

目录 1.mysql体系结构 2.数据库与数据库实例 3.物理存储结构编辑 4.mysql主要文件 4.1数据库配置文件 4.2错误日志 4.3表结构定义文件 4.4慢查询日志 4.4.1慢查询相关参数 4.4.2慢查询参数默认值 4.4.3my.cnf中设置慢查询参数 4.4.4slow_query_log参数 4.4.…...

编程日记 2024/3/25 5:06:50

PwnLab靶场PHP伪协议OSCP推荐代码审计命令劫持命令注入

下载链接：PwnLab: init ~ VulnHub 安装： 打开vxbox直接选择导入虚拟电脑即可正文： 先用nmap扫描靶机ip nmap -sn 192.168.1.1/24 获取到靶机ip后，对靶机的端口进行扫描，并把结果输出到PwnLab文件夹下，命名…...

编程日记 2024/3/25 4:55:39

涉密信息系统集成资质八大类别办理条件是什么？

涉密资质分为八个不同类别，那每个类别的申报条件有哪些？让我们一起来看看吧： 涉密资质申报条件依据《涉密信息系统集成资质管理办法》的有关规定，申请涉密信息系统集成资质的企事业单位，除符合《涉密信息系统集成资…...

编程日记 2024/3/25 4:50:35

Shell脚本总结-反引号-${}-$()

反引号反引号的作用就是将输出结果显示出来。 [rootldpbzhaonan bash]$ echo $a ldpbzhaonan${} ${}引用变量，包含自定义的和环境变量。 [rootldpbzhaonan bash]$ a1 [rootldpbzhaonan bash]$ echo ${a} 1$() $()和反引号，返回的是一个指令或者程序…...

编程日记 2024/3/25 4:48:33

请求获取Cookie/Session 获取Cookie 传统方式: RequestMapping("/m11")public String method11(HttpServletRequest request, HttpServletResponse response) {//获取所有Cookie信息Cookie[] cookies request.getCookies();//打印Cookie信息StringBuilder build…...

编程日记 2024/3/25 4:47:32

RuoYi-Vue-Plus（基础知识点jackson、mybatisplus、redis）

一、JacksonConfig 全局序列化反序列化配置 1.1yml中配置 #时区 spring.jackson.time-zoneGMT8 #日期格式 spring.jackson.date-formatyyyy-MM-dd HH:mm:ss #默认转json的属性，这里设置为非空才转json spring.jackson.default-property-inclusionnon_null #设置属性…...

编程日记 2024/3/25 4:45:28

使用verillog编写KMP字符串匹配算法

设计思路如下：定义模块的输入输出信号：包括时钟信号clk、复位信号rst、模式串pattern、文本串text以及输出信号match。定义所需寄存器和变量：使用寄存器来存储状态机的状态以及其他控制变量，如模式串数组P、失配函数数组F、模式串位置p_index、文本串位置t_index等。在时钟…...

编程日记 2024/3/25 4:44:27

《每天十分钟》-红宝书第4版-对象、类与面向对象编程（五）

对象迭代在 JavaScript 有史以来的大部分时间内，迭代对象属性都是一个难题。ECMAScript 2017 新增了两个静态方法，用于将对象内容转换为序列化的——更重要的是可迭代的——格式。这两个静态方法Object.values()和 Object.entries()接收一个对象&#…...

编程日记 2024/3/25 4:40:23

华为ensp中rip动态路由协议原理及配置命令（详解）

CSDN 成就一亿技术人！ 作者主页：点击！ ENSP专栏：点击！ CSDN 成就一亿技术人！ ————前言————— RIP（Routing Information Protocol，路由信息协议）是一种距离矢…...

编程日记 2024/3/25 4:39:21

学习要不畏难

我突然发现，畏难心是阻碍我成长的最大敌人。事未难，心先难，心比事都难，是我最大的毛病。然而一念由心生，心不难时，则真难事也不再难。很多那些自认为很难的事，硬着头皮做下来的时候，…...

编程日记 2024/3/25 4:37:20

mysql迁移达梦数据库 Java踩坑合集

达梦数据库踩坑合集文章目录安装达梦设置大小写不敏感Spring boot引入达梦驱动（两种方式）将jar包打入本地maven仓库使用国内maven仓库（阿里云镜像） 达梦驱动yml配置springboot mybatis-plus整合达梦,如何避免指定数据库名&…...

编程日记 2024/3/25 4:35:17

arm 解决Rk1126 画框颜色变色问题（RGB转NV12）

在Rv1126上直接对Nv12图像进行绘制时，颜色是灰色。故将Nv12转BGR后绘制图像，绘制完成后转成Nv12，BGR的图像颜色是正常的，但是NV12的图像颜色未画全，如图： 1.排查发现是RGB转NV12的函数出现问题&#xff0c…...

编程日记 2024/3/25 4:33:15

113 链接集10--ctrl+左键单击多选

1.ctrl左键单击多选，单击单选精简代码 <div class"model-list"><divmousedown.prevent"handleClick(item, $event)"class"model-list-item"v-for"item in modelList":key"item.id":class"{ model…...

编程日记 2024/3/25 4:32:14

详解JavaScript中this指向

this 原理 this 是一个指针型变量，它指向当前函数的运行环境。 1.内存的数据结构 var obj { foo: 5 };2.函数 var obj { foo: function () {} };引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。由于函数是一个单独的…...

编程日记 2024/3/25 4:30:13