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

web表单标签与练习（3.18）

news 2025/11/14 1:41:09

一、表单域

表单域是一个包含表单元素的区域。
在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

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

编程新知 2025/10/31 17:25:40

华为OD机试-食堂供餐-二分法

import java.util.Arrays; import java.util.Scanner;public class DemoTest3 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseint a in.nextIn…...

编程新知 2025/11/8 5:57:07

Map相关知识

数据结构 二叉树 二叉树&#xff0c;顾名思义&#xff0c;每个节点最多有两个“叉”&#xff0c;也就是两个子节点&#xff0c;分别是左子 节点和右子节点。不过&#xff0c;二叉树并不要求每个节点都有两个子节点&#xff0c;有的节点只 有左子节点&#xff0c;有的节点只有…...

编程新知 2025/11/12 5:18:57

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2025/11/13 8:14:48

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

编程新知 2025/11/12 9:56:33

JS设计模式(4)：观察者模式

JS设计模式(4):观察者模式 一、引入 在开发中&#xff0c;我们经常会遇到这样的场景&#xff1a;一个对象的状态变化需要自动通知其他对象&#xff0c;比如&#xff1a; 电商平台中&#xff0c;商品库存变化时需要通知所有订阅该商品的用户&#xff1b;新闻网站中&#xff0…...

编程新知 2025/9/1 6:48:07

20个超级好用的 CSS 动画库

分享 20 个最佳 CSS 动画库。 它们中的大多数将生成纯 CSS 代码&#xff0c;而不需要任何外部库。 1.Animate.css 一个开箱即用型的跨浏览器动画库&#xff0c;可供你在项目中使用。 2.Magic Animations CSS3 一组简单的动画&#xff0c;可以包含在你的网页或应用项目中。 3.An…...

编程新知 2025/11/12 15:18:31

Go语言多线程问题

打印零与奇偶数&#xff08;leetcode 1116&#xff09; 方法1&#xff1a;使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...

编程新知 2025/9/23 8:19:28

免费数学几何作图web平台

光锐软件免费数学工具&#xff0c;maths,数学制图&#xff0c;数学作图&#xff0c;几何作图&#xff0c;几何&#xff0c;AR开发,AR教育,增强现实,软件公司,XR,MR,VR,虚拟仿真,虚拟现实,混合现实,教育科技产品,职业模拟培训,高保真VR场景,结构互动课件,元宇宙http://xaglare.c…...

编程新知 2025/11/12 20:31:25

论文阅读：LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

编程新知 2025/11/10 2:48:46