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值,可能与能返回多少有关,先留着问题

四级标题
五级标题
六级标题

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringBoot知识03

1、多模块项目无法启动&#xff0c;报错Failed to execute goal on project*: Could not resolve dependencies for project

瑞_Java开发手册_(三)单元测试

&#x1f64a;前言&#xff1a;本文章为瑞_系列专栏之《Java开发手册》的单元测试篇。由于博主是从阿里的《Java开发手册》学习到Java的编程规约&#xff0c;所以本系列专栏主要以这本书进行讲解和拓展&#xff0c;有需要的小伙伴可以点击链接下载。本文仅供大家交流、学习及研…

SpringBoot读取配置文件中的内容

文章目录 1. 读取配置文件application.yml中内容的方法1.1 Environment1.2 Value注解1.3 ConfigurationProperties 注解1.4 PropertySources 注解&#xff0c;获取自定义配置文件中的内容&#xff0c;yml文件需要自行实现适配器1.5 YamlPropertiesFactoryBean 加载 YAML 文件1.…

【计算机组成原理】高速缓冲存储器 Cache 的常用替换算法(Replacement Algorithm)

替换算法 Replacement Algorithm 缓存替换算法用于确定在缓存满时需要替换哪些缓存块以便为新的数据腾出空间。 先进先出 First-In-First-Out FIFO算法将最早进入缓存的块替换出去。这种算法实现较为简单&#xff0c;但可能导致早被访问的数据被频繁替换&#xff0c;而近期使…

01循环算法

1.求小数点的某一位&#xff0c;且超出float和double的精度问题 【题目描述】 分数a/b化为小数后&#xff0c;小数点后第n位的数字是多少&#xff1f; 【输入】 三个正整数a&#xff0c;b&#xff0c;n&#xff0c;相邻两个数之间用单个空格隔开。0<a<b<100&#…

Leetcode with Golang 滑动窗口 Part1

滑动窗口的定义&#xff1a; 滑动窗口这一个技巧主要运用于处理数组问题上&#xff0c;一般用于“子串”问题。精髓是&#xff0c;维护一个里面装着元素的“窗口”&#xff0c;在将新元素装进“窗口”的同时&#xff0c;根据题意&#xff0c;把不符合题意的元素踢出“窗口”。…

远程开发之vacode插件Remote - SSH

远程开发之vacode插件Remote - SSH vscode插件(Remote - SSH)ssh config自定义配置跳板机ssh-agent配置(使ForwardAgent配置生效, 免密拉代码)拷贝公钥到服务器(实现免密登录服务器) 通过vscode的Remote - SSH插件, 实现远程服务器进行像本地操作一样使用远程服务器, 亦可进行像…

第 3 场 小白入门赛(1~6) + 第 3 场 强者挑战赛 (1 ~ 5)

第 3 场 小白入门赛 1、厉不厉害你坤哥&#xff08;暴力&#xff09; 2、思维 3、暴力&#xff0c;前缀和&#xff0c;贪心 4、二分 5、DP 6、容斥&#xff0c;双指针 第 3 场 强者挑战赛 2、BFS 5、树上倍增求第k祖先 1. 召唤神坤 题意&#xff1a; 可以发现,如果我…

Python Flask教程

Flask Doc: https://rest-apis-flask.teclado.com/docs/course_intro/what_is_rest_api/Github: https://github.com/tecladocode/rest-apis-flask-python 1. 最简单的应用 最小应用 from flask import Flaskapp Flask(__name__)app.route("/") def hello_world()…

“华为杯“第四届中国研究生数学建模竞赛-D题:邮路规划与邮车调度

目录 摘 要&#xff1a; 1.问题的重述 2.模型的假设与符号说明 2.1 针对本问题&#xff0c;本文做出如下假设 2.2 符号说明 3.问题的数学模型 4.问题的求解 4.1 问题一的求解 4.1.1 最少邮车数的求法 4.1.2 邮路规划及路径选择 4.1.3 问题的求解结果 4.2 问题二的求…

记录下载安装rabbitmq(Linux) 并整合springboot--详细版(全)

下载rabbitmq&#xff08;Linux&#xff09;&#xff1a; erlang压缩包&#xff1a; https://share.weiyun.com/TGhfV8eZ rabbitMq-server压缩包&#xff1a; https://share.weiyun.com/ZXbUwWHD &#xff08;因为RabbitMQ采用 Erlang 实现的工业级的消息队列(MQ)服务器&#…

推荐一款.NET开发的物联网开源项目

物联网&#xff08;IoT&#xff09;是一个正在快速发展的技术领域&#xff0c;它涉及到各种设备、物体和系统的互联。所以各种物联网平台和物联网网关项目层出不穷&#xff0c;在物联网&#xff08;IoT&#xff09;领域&#xff0c;.NET平台扮演着重要的角色。作为一款广泛使用…

备战抖音商城好物年货节,品牌焕发新商机

农历春节前的最后一个月&#xff0c;打工人们逐渐将置办年货提上日程。忙碌了一年的辛苦与疲惫&#xff0c;总能在喜气洋洋买年货的过程中&#xff0c;被一扫而空。这是“年味”的开始&#xff0c;也是公司高管郭广宇面临的一场关键战役。 郭广宇今年35岁&#xff0c;是三只松鼠…

强化学习应用(八):基于Q-learning的无人机物流路径规划研究(提供Python代码)

一、Q-learning简介 Q-learning是一种强化学习算法&#xff0c;用于解决基于马尔可夫决策过程&#xff08;MDP&#xff09;的问题。它通过学习一个价值函数来指导智能体在环境中做出决策&#xff0c;以最大化累积奖励。 Q-learning算法的核心思想是通过不断更新一个称为Q值的…

uni-app做A-Z排序通讯录、索引列表

上图是效果图&#xff0c;三个问题 访问电话通讯录&#xff0c;拿数据拿到用户的联系人数组对象&#xff0c;之后根据A-Z排序根据字母索引快速搜索 首先说数据怎么拿 - 社区有指导https://ask.dcloud.net.cn/question/64117 uniapp 调取通讯录 // #ifdef APP-PLUSplus.contac…

【深度学习目标检测】十六、基于深度学习的麦穗头系统-含GUI和源码(python,yolov8)

全球麦穗检测是植物表型分析领域的一个挑战&#xff0c;主要目标是检测图像中的小麦麦穗。这种检测在农业领域具有重要意义&#xff0c;可以帮助农民评估作物的健康状况和成熟度。然而&#xff0c;由于小麦麦穗在视觉上具有挑战性&#xff0c;准确检测它们是一项艰巨的任务。 全…

DP读书:《openEuler操作系统》(八)TCP、UDP与跨机器通讯

10min速通TCP与UDP 2024 DP读书计算机网络简介TCP/IP协议栈A. 物理层1.信号及信道传递2.信号调制与调解3.信道的复用 B. 数据链路层1.封装成帧2.透明传输3.差错控制 C. 网络层1.IP2.ARP3.路由选择协议 D. 传输层1.端口号2.3.UDP 2024 DP读书 第八章 跨机器通讯 在第六章之中&a…

翻译: Streamlit从入门到精通 基础控件 一

这个关于Streamlit的教程旨在帮助数据科学家或机器学习工程师&#xff0c;他们不是网络开发者&#xff0c;也不想花费数周时间学习使用这些框架来构建网络应用程序。 1. 什么是Streamlit&#xff1f; Streamlit是一个免费且开源的框架&#xff0c;用于快速构建和共享美观的机器…

(南京观海微电子)——色温介绍

色温是表示光线中包含颜色成分的一个计量单位。从理论上说&#xff0c;黑体温度指绝对黑体从绝对零度&#xff08;&#xff0d;273℃&#xff09;开始加温后所呈现的颜色。黑体在受热后&#xff0c;逐渐由黑变红&#xff0c;转黄&#xff0c;发白&#xff0c;最后发出蓝色光。当…

【MCAL】MCU模块详解

目录 前言 正文 1. MCU模块介绍 2. MCU依赖的模块 3. MCU模块提供服务 3.1 时钟的初始化 3.2 MCU模式的配置 3.3 MCU软件复位功能 3.4 RAM的初始化 4.MCU重要数据类型 4.1 Mcu_ResetType 4.2 Mcu_ModeType 5. MCU重要API 5.1 Mcu_Init 5.2 Mcu_InitClock 5.3 M…