HTML--表单

睡不着就看书之------------------------

表单

作用:嗯~~动态页面需要借助表单实现

表单标签:

主要分五种:
form,input,textarea,select,option
从外观来看,表单就包含以下几种:

单行文本框
密码文本框
单选框
复选框
按钮
文件上传
多行文本框
下拉列表

form标签

form标签内放其他四种标签
范例:

<!DOCTYPE html>
<html>
<head> <title>表单</title><meta charset="utf-8"/>
</head>
<body><form><input type="text" value="这是一个单行文本框"/><br/><textarea>这是一个多行文本框,可以回车换行</textarea><br/><select><option>选项一</option><option>选项二</option></select></form></body>
</html>

效果:
文本框value内是默认值,多行文本内的字符串也是默认值
在这里插入图片描述

form标签的属性

name属性 标记表单名称以在有多个表单时做出区分,不会显示在网页中

<form name="第一表单">....
<form>

method属性 指定网页使用哪种http提交方法,有两种 getpost, post安全性更好,比较常用

<form method="post">....
<form>

action属性 用于指定表单数据提交到哪一个地址进行处理

<!--/upload是python flask里定义的一个路由-->
<form action="/upload">...
<form>

target属性 指定窗口的打开方式

<!--在当前页面打开表单-->
<form target="_self"></form>
<!--在新页面打开表单-->
<form target="_blank"></form>
<!--在父页面打开表单-->
<form target="_parent"></form>
<!--在顶层页面打开表单-->
<form target="_top"></form>

enctype属性 指定表单数据提交的编码方式,上传文件时需要用到

<form enctype="multipart/form-data"><p>不对字符编码,用于发送二进制的文件</p></form>
<form enctype="text/plain"><p>用于发送纯文本内容,空格转换为 "+" 加号,不对特殊字符进行编码,一般用于email之类的</p></form>
<form enctype="application/x-www-form-urlencoded"><p>默认值:在发送前会编码所有字符,即在发送到服务器之前,所有字符都会进行编码(空格转换为 "+" 加号,"+"加号转换为空格,特殊符号转换为 ASCII HEX 值)</p></form>

input标签

input标签是自闭合标签,没有结束符号

<input type="表单类型" />

text / password / radio / checkbox / button / submit / reset / file

单行文本框 text

value 设置单行文本框的默认值
size 设置单行文本框的长度
maxlength 设置单行文本框的最大字符数

<form>
<input type="text" value="这是一个单行文本框" size="10" maxlength="10"/>
</form>
密码文本框 password

它也一样能用value等属性,不同的是,密码文本框中字符是用黑色点代替的,被隐藏了

<form>
<input type="password" value="1" size="10" maxlength="10"/>
</form>
单选框 radio

name属性代表这个单选框属于哪个组
value属性代表按下这个按钮后代表的值
checked属性代表按钮默认选这项

<!DOCTYPE html>
<html>
<head> <title>表单</title><meta charset="utf-8"/>
</head>
<body><form method="post"><p>你喜欢我吗?</p><input type="radio" name="case1" value="no"/>不喜欢<br/><input type="radio" name="case1" value="yes" checked="checked"/>还是不喜欢</form>
</body>
</html>

在这里插入图片描述

复选框 checkbox

复选框可以选多个选项
同时,它的属性也是和单选框一致的
他的checked可以在多项设定,能正确勾选,二单选框只能显示每个组最后一个设定的选项

<!DOCTYPE html>
<html>
<head> <title>表单</title><meta charset="utf-8"/>
</head>
<body><form method="post"><p>你喜欢我吗?</p><input type="checkbox" name="case1" value="no"/>不喜欢<br/><input type="checkbox" name="case1" value="yes" checked="checked"/>还是不喜欢</form>
</body>
</html>

效果:
在这里插入图片描述

按钮

普通按钮 button

value 这个就是按钮上显示的文字

    <form method="post"><input type="button" value="你好" /></form>
提交按钮 submit

value 这个就是按钮上显示的文字

    <form method="post"><input type="submit" value="你好" /></form>
重置按钮 reset

value 这个就是按钮上显示的文字
作用是充值输入的内容,比如文本框内输入的字符串,不想要了按一下能重置掉

    <form method="post"><input type="reset" value="你好" /></form>

文件上传 file

应该说是选择加载文件,上传还需要加上submit,然后进过后端处理才能上传,这个可以参考之前做的JRP项目,咱们在这里系统学习,就先不详细写如何做

    <form method="post"><input type="file"></form>

在这里插入图片描述

多行文本框 textarea

rows属性 定义文本框有几行
cols属性 定义文本框有几列
value属性 文本框内输入的内容
直接给的字符串是文本框内默认显示的内容

<!DOCTYPE html>
<html>
<head> <title>表单</title><meta charset="utf-8"/>
</head>
<body><form method="post"><textarea rows="3" cols="4" value="结果">你喜欢我吗?</textarea></form>
</body>
</html>

在这里插入图片描述

下拉列表 select 和 选项 option

multiple属性设置下拉列表可以选择多项
size属性设置下拉列表显示几个列表项,为整数

<!DOCTYPE html>
<html>
<head> <title>表单</title><meta charset="utf-8"/>
</head>
<body><form method="post"><select multiple="3" size="6"><option>选项一</option><option>选项二</option><option>选项三</option><option>选项四</option><option>选项五</option><option>选项六</option><option>选项七</option></select></form>
</body>
</html>

不过貌似我试验下来multiple没成功,讲的是设定以后,Ctrl+鼠标左键可以选中多项,不过我发现设定了能超过…没啥用,有可能需要搭配后面的用法生效,就是返回value值,可能与能返回多少有关,先留着问题

框架 iframe

在当前页面中嵌入其他的页面
用法:

<iframe src="链接地址" width="数值" height="数值"> </iframe>

两个属性:
width 和 height控制这个嵌入页面的大小

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

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

相关文章

设计Twitter时间线和搜索功能

设计Twitter时间线和搜索功能 设计 facebook feed 和 设计 facebook search是相同的问题 第一步&#xff1a;定义用例和约束 定义问题的需求和范围&#xff0c;询问问题去声明用例和约束&#xff0c;讨论假设 ps: 没有一个面试官会展示详细的问题&#xff0c;我们需要定义一些用…

服务器推送数据你还在用 WebSocket么?

当涉及到推送数据时,人们首先会想到 WebSocket。 的确,WebSocket 允许双向通信,可以自然地用于服务器到浏览器的消息推送。 然而,如果只需要单向的消息推送,HTTP 通过服务器发送的事件也有这种功能。 WebSocket 的通信过程如下: 首先,通过 HTTP 切换协议。服务器返回 101 状…

U-Boot学习(4):u-boot.lds链接脚本分析

在之前的文章中有介绍U-Boot的编译流程&#xff0c;但我们知道&#xff0c;不同的存储介质可能会接在不同的接口上&#xff0c;如NOR Flash、EMMC和SDRAM等内存的接口是不同的&#xff0c;而不同的接口对应CPU就会映射到不同的内存中。所以如果我们需要运行U-Boot的话&#xff…

介绍下Redis?Redis有哪些数据类型?

一、Redis介绍 Redis全称&#xff08;Remote Dictionary Server&#xff09;本质上是一个Key-Value类型的内存数据库&#xff0c;整个数据库统统加载在内存当中进行操作&#xff0c;定期通过异步操作把数据库数据flush到硬盘上进行保存。因为是纯内存操作&#xff0c;Redis的性…

Matlab深度学习进行波形分割(二)

&#x1f517; 运行环境&#xff1a;Matlab &#x1f6a9; 撰写作者&#xff1a;左手の明天 &#x1f947; 精选专栏&#xff1a;《python》 &#x1f525; 推荐专栏&#xff1a;《算法研究》 &#x1f510;#### 防伪水印——左手の明天 ####&#x1f510; &#x1f497; 大家…

02.部署LVS-DR群集

技能展示&#xff1a; 了解LVS-DR群集的工作原理 会构建LVS-DR负载均衡群集 2.1 LVS-DR 集群 LVS-DR&#xff08; Linux Virtual Server Director Server &#xff09;工作模式&#xff0c;是生产环境中最常用的一种工作模式。 2.1.1&#xff0e;LVS-DR 工作原理 LVS-DR 模式&…

react、Vue打包直接运行index.html不空白方法

react vue 在根目录下创建 vue.config.js 文件&#xff0c;写入 module.exports {publicPath: ./, }

【SpringBoot框架篇】35.kafka环境搭建和收发消息

kafka环境搭建 kafka依赖java环境,如果没有则需要安装jdk yum install java-1.8.0-openjdk* -y1.下载安装kafka kafka3.0版本后默认自带了zookeeper&#xff0c;3.0之前的版本需要单独再安装zookeeper,我使用的最新的3.6.1版本。 cd /usr/local wget https://dlcdn.apache.…

C语言——编译和链接

&#xff08;图片由AI生成&#xff09; 0.前言 C语言是最受欢迎的编程语言之一&#xff0c;以其接近硬件的能力和高效性而闻名。理解C语言的编译和链接过程对于深入了解其运行原理至关重要。本文将详细介绍C语言的翻译环境和运行环境&#xff0c;重点关注编译和链接的各个阶段…

蓝桥杯AcWing学习笔记 8-2数论的学习(下)

蓝桥杯 我的AcWing 题目及图片来自蓝桥杯C AB组辅导课 数论&#xff08;下&#xff09; 蓝桥杯省赛中考的数论不是很多&#xff0c;这里讲几个蓝桥杯常考的知识点。 约数个数定理 我们如何去求一个数的约数个数呢&#xff1f; N N N分解质因数的结果&#xff1a; N P 1 α…

kubeSphere DevOps部署vue项目

devops部署vue项目 &#x1f314;环境说明&#x1f30f;创建DevOps工程&#x1f30f;填写流水线信息&#x1f30f;创建流水线 &#x1f314;部署应用所需脚本JenkinsfileDockerfile &#x1f314;脚本一些参数如何设置说明&#x1f30f;deploy.yaml中的:imagePullSecrets:name属…

部署 LVS-DR 群集

本章内容&#xff1a; -了解LVS-DR群集的工作原理 -会构建LVS-DR负载均衡群集 2.1 LVS-DR 集群 LVS-DR &#xff08; Linux Virtual Server Director Server &#xff09;工作模式&#xff0c;是生产环境中最常用的一 种工作模式。 2.1.1 &#xff0e; LVS-DR 工作原理 …

JVM运行时数据区(下篇)

紧接上篇&#xff1a;JVM运行时数据区&#xff08;上篇&#xff09;-CSDN博客 堆 一般Java程序中堆内存是空间最大的一块内存区域。创建出来的对象都存在于堆上。 栈上的局部变量表中&#xff0c;可以存放堆上对象的引用。静态变量也可以存放堆对象的引用&#xff0c;通过静态…

记录Qt和opencv 新环境配置过程

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、Qt是什么&#xff1f;二、Qt的版本三、安装步骤1.下载Qt2.双击安装包.exe开始安装3. 需要登陆才能继续安装&#xff0c;没有的就用邮箱注册账号4.注意安装路…

linux创建文件

创建文件夹&#xff1a; mkdir folder_name其中&#xff0c;folder_name是想要创建的文件夹的名称。 例如&#xff0c;如果想在当前目录下创建一个名为 "my_folder" 的文件夹&#xff0c;可以运行以下命令&#xff1a; mkdir my_folder如果想在特定路径下创建文件…

element-ui el-table表格勾选框条件禁用,及全勾选按钮禁用, 记录

项目场景&#xff1a; 表格的部分内容是可以被勾选的&#xff0c;部分内容是不可以被勾选的 使用的是 “element-plus”: “^2.2.22”, 以上应该都是兼容的 问题描述 要求el-table表格中&#xff0c;部分内容不可以被勾选&#xff0c;全选框在没有可选内容时&#xff0c;是禁…

RK3566RK3568安卓11隐藏状态栏带接口

文章目录 前言一、创建全局变量二、设置应用添加隐藏导航栏按钮三、添加按钮功能四、动态隐藏还有显示功能五、创建系统导航栏广播接口总结 前言 关于Android系统的状态栏&#xff0c;不同的客户有不同的需求: 有些客户需要永久隐藏状态栏&#xff0c;有些客户需要在设置显示中…

Flask框架小程序后端分离开发学习笔记《1》网络知识

Flask框架小程序后端分离开发学习笔记《1》网络知识 Flask是使用python的后端&#xff0c;由于小程序需要后端开发&#xff0c;遂学习一下后端开发。 一、网址组成介绍 协议&#xff1a;http&#xff0c;https (https是加密的http)主机&#xff1a;g.cn zhihu.com之类的网址…

通义灵码 - 免费的阿里云 VS code Jetbrains AI 编码辅助工具

系列文章目录 前言 通义灵码&#xff0c;是阿里云出品的一款基于通义大模型的智能编码辅助工具&#xff0c;提供行级/函数级实时续写、自然语言生成代码、单元测试生成、代码注释生成、代码解释、研发智能问答、异常报错排查等能力&#xff0c;并针对阿里云 SDK/OpenAPI 的使用…

【Java 设计模式】创建型之建造者模式

文章目录 1. 定义2. 应用场景3. 代码实现4. 应用示例结语 在软件开发中&#xff0c;建造者模式是一种创建型设计模式&#xff0c;它将一个复杂对象的构建与其表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。建造者模式通常包括一个指导者&#xff08;Director&…