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

web表单标签与练习（3.18）

news 2026/2/9 1:00:37

一、表单域

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

表单属性

action url地址 用于指定接收并处理表单数据的服务器程序的url地址
methodget/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标签中&#xff0c;< form >标签用于定义表单域&#xff0c;以实现用户信息和传递。 < form >会把它范围内的表单元素信息提交给服务器。 表单属性 action url地址 用于指定接收并处理表单数据的服务器程序的…...

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

【协议-HTTP】

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

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

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

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

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

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

Dataset之UCI_autos_cars&#xff1a;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

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

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

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

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

个位数统计 题目描述&#xff1a; 定一个 k 位整数 Ndk−1​10k−1⋯d1​101d0​ (0≤di​≤9, i0,⋯,k−1, dk−1​>0)&#xff0c;请编写程序统计每种不同的个位数字出现的次数。例如&#xff1a;给定 N100311&#xff0c;则有 2 个 0&#xff0c;3 个 1&#xff0c;和 …...

编程日记 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推荐代码审计命令劫持命令注入

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

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

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

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

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

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

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

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

Spring MVC入门(4)

请求 获取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的属性&#xff0c;这里设置为非空才转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 有史以来的大部分时间内&#xff0c;迭代对象属性都是一个难题。ECMAScript 2017 新增了两个静态方法&#xff0c;用于将对象内容转换为序列化的——更重要的是可迭代的——格式。这两个静态方法Object.values()和 Object.entries()接收一个对象&#…...

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

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

CSDN 成就一亿技术人&#xff01; 作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; CSDN 成就一亿技术人&#xff01; ————前言————— RIP&#xff08;Routing Information Protocol&#xff0c;路由信息协议&#xff09;是一种距离矢…...

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

学习要不畏难

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

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

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

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

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

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

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

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

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

1.ctrl左键单击多选&#xff0c;单击单选 精简代码 <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 是一个指针型变量&#xff0c;它指向当前函数的运行环境。 1.内存的数据结构 var obj { foo: 5 };2.函数 var obj { foo: function () {} };引擎会将函数单独保存在内存中&#xff0c;然后再将函数的地址赋值给foo属性的value属性。 由于函数是一个单独的…...

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

Python爬虫实战：研究MechanicalSoup库相关技术

一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库，专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力，提供了直观的 API，让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...

编程新知 2025/10/10 18:13:55

python打卡day49

知识点回顾&#xff1a; 通道注意力模块复习空间注意力模块CBAM的定义 作业&#xff1a;尝试对今天的模型检查参数数目&#xff0c;并用tensorboard查看训练过程 import torch import torch.nn as nn# 定义通道注意力 class ChannelAttention(nn.Module):def __init__(self,…...

编程新知 2026/2/7 5:37:17

练习（含atoi的模拟实现,自定义类型等练习）

一、结构体大小的计算及位段 &#xff08;结构体大小计算及位段 详解请看&#xff1a;自定义类型&#xff1a;结构体进阶-CSDN博客&#xff09; 1.在32位系统环境&#xff0c;编译选项为4字节对齐&#xff0c;那么sizeof(A)和sizeof(B)是多少&#xff1f; #pragma pack(4)st…...

编程新知 2026/1/30 15:16:30

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

Spring AI 入门：Java 开发者的生成式 AI 实践之路

一、Spring AI 简介 在人工智能技术快速迭代的今天&#xff0c;Spring AI 作为 Spring 生态系统的新生力量&#xff0c;正在成为 Java 开发者拥抱生成式 AI 的最佳选择。该框架通过模块化设计实现了与主流 AI 服务&#xff08;如 OpenAI、Anthropic&#xff09;的无缝对接&…...

编程新知 2025/12/25 18:03:56

C++ 求圆面积的程序（Program to find area of a circle）

给定半径r&#xff0c;求圆的面积。圆的面积应精确到小数点后5位。 例子&#xff1a; 输入&#xff1a;r 5 输出&#xff1a;78.53982 解释&#xff1a;由于面积 PI * r * r 3.14159265358979323846 * 5 * 5 78.53982&#xff0c;因为我们只保留小数点后 5 位数字。 输…...

编程新知 2026/1/31 12:52:15

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2026/1/31 14:55:53

第 86 场周赛：矩阵中的幻方、钥匙和房间、将数组拆分成斐波那契序列、猜猜这个单词

Q1、[中等] 矩阵中的幻方 1、题目描述 3 x 3 的幻方是一个填充有 从 1 到 9 的不同数字的 3 x 3 矩阵&#xff0c;其中每行&#xff0c;每列以及两条对角线上的各数之和都相等。 给定一个由整数组成的row x col 的 grid&#xff0c;其中有多少个 3 3 的 “幻方” 子矩阵&am…...

编程新知 2026/2/7 13:27:36

听写流程自动化实践，轻量级教育辅助

随着智能教育工具的发展&#xff0c;越来越多的传统学习方式正在被数字化、自动化所优化。听写作为语文、英语等学科中重要的基础训练形式&#xff0c;也迎来了更高效的解决方案。 这是一款轻量但功能强大的听写辅助工具。它是基于本地词库与可选在线语音引擎构建&#xff0c;…...

编程新知 2026/1/30 1:47:17

在鸿蒙HarmonyOS 5中使用DevEco Studio实现企业微信功能

1. 开发环境准备 ​​安装DevEco Studio 3.1​​&#xff1a; 从华为开发者官网下载最新版DevEco Studio安装HarmonyOS 5.0 SDK ​​项目配置​​&#xff1a; // module.json5 {"module": {"requestPermissions": [{"name": "ohos.permis…...

编程新知 2025/12/29 15:43:26