【Web前端】表单

1.表单简介

  • 表单主要是让用户输入信息,用来收集用户信息,并且提交给后台做处理。
  • 表单包含了一些表单域元素,包括文本框、密码框、单选按钮、复选按钮、下拉列表等等例
  • 如:百度、邮箱登录

2.表单标签

2.1 form表签

  • 与用户进行交互,收集用户信息,form表单最外层的元素属性
  • action:表单提交的服务器处理的URL地址
  • method:表单提交到服务器的方法,主要用到getpost方法

2.2 GET和POST方法

  • GET请求和POST请求都是HTTP的请求方法
  • HTTP底层是TCP/IP。所以GET和POST的底层也是TCP/IP,都是TCP链接。
  • HTTP设定了不同的服务类别,有GET、POST、PUT、DELETE等等。HTTP要求当使用GET请求时,贴上GET标签,并且把传输的数据放在车顶部(URL中),以请求头方式传递。如果是POST请求,贴上POST标签,并且把传输的数据放在车厢里。
  • 区别1:URL可见性不同:get请求的参数url可见,而post请求的参数在url不可见。
  • get请求通过urI直接请求数据,因此数据信息可以在url地址中直接看到。post请求是将请求放在请求体中,用户无法直接看到。
  • 不同的浏览器和服务器不同。数据量太大对于浏览器端和服务器端处理比较麻烦,带来很大负担。
  • 大多数浏览器,通常都会对url长度有一个2k个字节的限制。大多数服务器会限制最多处理64k大小的url。
  • 区别2:get传送的数据比较小,有限制,通常是2KB,post传送的数据量比较大,一般被默认为不受限制。
  • 区别3:get请求因为参数和数据都是暴露在URL地址中,所以安全性比较低,post请求中,安全性较高,对于敏感数据,可以使用post
  • 区别4:get限制form表单的数据集是ASCII字符,而post支持较多字符集
  • 区别5:get请求产生一个TCP数据包,而post请求产生两个TCP数据包。
  • 区别6:在应用上,通常使用get从服务器上获取数据(查询),post通过是向服务器传送数据

2.3 元素标签

2.3.1 input标签

  • text 单行文本域
  • password 密码框,以密文显示
  • radio 单选按钮,一组单选按钮名字相同
  • checkbox 复选框
  • file 文件选择,用来实现上传的控件
  • button 普通按钮
  • submit 提交按钮
  • reset 重置按钮
  • hidden 隐藏表单域
  • image 用图片代替submit按钮
  • search 产生一个搜索意义的文本框
  • email 电子邮箱,要求格式必须是邮箱格式
  • url 网址url,要求格式必须是url地址格式
  • number 数字类型
  • tel 电话号码
  • color 颜色选择
  • range 滑动条
  • date 日期控件
  • time 时间控件
  • datetime 日期和时间控件,chrome和firefox不支持
  • datetime-local 日期和时间控件
  • month 月份选择控件
  • week 星期控件

2.3.2 input属性

  • name 为控件取名,方便后台程序进行值的读取
  • id 每个html控件,都可以有一个唯一的id
  • value:对于text、password、hidden等有文本输入的表单域对象,设置默认值;对于radio、checkbox用来向后台传递给定的值;对于reset、submit、button按钮,用来定义按钮上的文字
  • checked 用于设置单选或复选按钮初始时选中状态(radio、checkbox)
  • size 用于输入类型,设置显示的字符数(一般不使用)
  • maxlength 设置输入类型最大值
  • min 定义number类型最小值
  • max 定义number类型最大值
  • step 定义number类型的步长
  • placeholder 为输入类型生成一个文字提示,当内容为空时出现
  • readonly 设置输入类型为只读
  • disabled 禁止选择控件
  • required 要求控件必须有值,输入型必须要有值,选择型必须选中值
  • autocomplete 是否使用自动完成功能,默认是使用,关闭选择off
  • tabindex 定义按tab键的顺序
  • autofocus 定义光标自动聚集到指定控件
  • novalidate 取消表单验证效果
  • pattern 正则验证

2.3.3 其他标签

2.3.3.1 label标签

  • input元素有id,使用label标签的for属性,绑定对应的id,就可能实现,点击label,获取相应的控件点击。

2.3.3.2 下拉列表

  • 使用select标签,其中选项,使用option
  • 属性:
  • select标签属性:multiple:设置可以多选;size:列表每次展示选项个数
  • option标签属性:value:真正传入后台服务器的值;selected: 被标识的选项是默认选中项
  • optgroup:将option进行分组;label:分组名称

2.3.3.3 datalist标签

  • html5标签
  • 使用datalist,可以实现下拉选项,并能根据用户的输入,进行过滤选择,并且,如果在选择中没有用户需要的,用户可以自行输入值

2.3.3.4 文本区域标签

  • 使用textarea标签,cols属性设置列,rows属性设置行,通常使用css来控制宽度和高度。
  • 默认值写在起始标签和结束标签中间

2.3.3.5 域容器标签

  • fieldset:将一组控件组织在一起,使用一个方框套起来
  • 可以使用样式表进行整体设置
  • legend:域容器的标题

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

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

相关文章

Elasticsearch中对文章进行索引和查重

解决思路 要在Elasticsearch中对文章进行索引和查重,可以按照以下步骤操作: 安装Elasticsearch并启动服务。 安装Python的Elasticsearch客户端库,可以使用pip install elasticsearch命令进行安装。 编写Python代码,使用Elastic…

WebDAV之π-Disk派盘 + 溯记

“溯记”是一款提供丰富功能的时间轴日记应用,旨在帮助用户记录生活中的碎片化想法和事件,并提供便捷的回顾和管理功能。根据您提供的描述,这款应用具有丰富的特性,包括时间轴浏览、多媒体支持、实时存储、模糊搜索、日历视图、故事关联和随机回溯。这些功能将帮助用户记录…

【如何在本地安装Llama 3,坐好30秒!稳的很!!】

如何在本地安装Llama 3,30秒闪速教程 点击 Ollama官网 点击对应系统内容进行下载 解压后打开文件: 双击后打开 复制 打开CMD 窗口终端 复制黏贴 ollama run llama3 等下载完成 OK,安装完成! 输入问题,愉快玩耍! …

阿里一面——struct和class的区别|基类指针与派生类指针的强转

阿里一面——struct和class的区别|基类指针与派生类指针的强转 1.struct和class的区别1.1. 成员1.2. 函数 2. 基类指针与派生类指针的强转 1.struct和class的区别 1.1. 成员 struct的默认访问权限为public, 而class的默认访问权限为private成员的权限设置:可以使用…

俄罗斯副总理暗示欧佩克+或增加原油产量,亚洲早盘油价小幅下跌

在俄罗斯副总理亚历山大诺瓦克暗示欧佩克可能采取行动增加原油产量后,亚洲早盘的油价出现小幅下跌。这一消息引起了市场对原油供给增加的担忧,导致油价走低。 City Index和FOREX.com的市场分析师Fawad Razaqzada表示,虽然原油价格在技术上尚…

IDEA远程连接docker服务,windows版docker desktop

1.windows上安装docker desktop docker desktop下载地址:Docker Desktop: The #1 Containerization Tool for Developers | Docker 有的windows系统不支持安装docker desktop 安装完之后我们可以直接打开,可以选择不登录使用 我们用IDEA连接到docker …

SystemVerilog/Verilog中的仿真延时建模之模块路径延时

一 概要 模块路径延迟,描述的是模块中信号从源端到目的端传输的延迟。 路径以及对应的延迟是在模块中的specify块中指定的,其中信号源端一般为input或者inout,而目的端则只能为output或者inout.在specify中指定的模块路径,常见的形式主要三种,分别是: 简单路径(Simple Path…

Pikachu 靶场 CSRF 通关解析

前言 Pikachu靶场是一种常见的网络安全训练平台,用于模拟真实世界中的网络攻击和防御场景。它提供了一系列的实验室环境,供安全专业人士、学生和爱好者练习和测试他们的技能。 Pikachu靶场的目的是帮助用户了解和掌握网络攻击的原理和技术,…

Day64|代码随想录二刷总结

大体感受 去年暑假跟着,回想起来半年多的时间内经历了不少变故, 更多的是心态上的变化。之前的一刷更多的是缓解没啥事做的焦虑,而二刷是在实习期间抽时间刷的,能做出来的题更多了,刷题的效果也更好。 刷题变化 最明…

如何通过二手机店ERP软件实现店铺经营效率最大化?

2024年,在科技高速发展的今天,手机批发和零售行业正在经历前所未有的改革。为了抓住这次机遇,提高竞争力,二手手机店需要找到一种全面、高效、智能的管理工具。鉴于此,超机商城为众多二手手机店的商家量身定制了一款专…

嵌入式C语言高级教程:实现基于STM32的面部识别系统

面部识别技术在安全和自动化领域越来越受到重视。本教程将指导您如何在STM32微控制器上使用OpenMV实现基本的面部识别功能。 一、开发环境准备 硬件要求 微控制器:STM32H743II,具备高性能处理能力和充足的存储资源。开发板:STM32H7 Discov…

恢复数据,电脑数据恢复详细操作指南(4个方法)

“我经常会把很多重要的文件都保存在电脑上,但今天在清理电脑时好像误删了一些数据,有没有比较好用的数据恢复方法可以分享一下呢?请大家给我推荐几个吧!” 随着电脑的普及,我们越来越多地将重要数据存储在电脑中。然而…

Window安装OpenSSH客户端及服务

文章目录 引言I 给windows安装一个ssh服务1.1 下载对应的OpenSSH1.2 安装sshd服务1.3 开放22端口1.4 配置sshd服务自动启动1.5 验证ssh是否可用II 服务部署III 公钥登录 Windows OpenSSH Server3.1 生成公钥-私钥对,把公钥复制到目标机器的3.2 授予对AuthorizedKeysFile权限3.…

pdf2htmlEX:pdf 转 html,医学指南精细化处理

pdf2htmlEX:pdf 转 html,医学指南精细化处理 单文件转换多文件转换 代码:https://github.com/coolwanglu/pdf2htmlEX 拉取pdf2htmlEX 的 Docker: docker pull bwits/pdf2htmlex # 拉取 bwits/pdf2htmlex不用进入容器&#xff0c…

富格林:学习辨别虚假预防欺诈亏空

富格林悉知,对于市场发布的虚假欺诈案例,投资者可注意了解其中受骗原因,总结因对的策略应对避免受害亏损。市场是多变复杂的,如果只是学习刻板的套路方法,只能应对正常交易,对于一些诱导虚假便可能无法避免…

认识设计模式SOLID原则

SOLID 是一个缩写词,代表面向对象编程 (OOP) 的五个设计原则,旨在促进更简单、更健壮和可更新的代码。 SOLID 缩写中的每个字母都代表了开发易于维护和随时间扩展的软件的原则。 SOLID原则是面向对象编程和设计的五项基本指导原则,由罗伯特C…

VIM命令常用

一、启动vim 以:和/开头的命令都有历史纪录,可以首先键入:或/然后按上下箭头来选择某个历史命令。 在命令行窗口中输入以下命令即可 vim 直接启动vim vim filename 打开vim并创建名为filename的文件 二、文件命令 打开单个文件vim file同时打开多个文件vim file1 …

用HAL库改写江科大的stm32入门例子_9-1 串口发送

设置串口: 选项说明: 写一个串口发送函数: // serial send string function void serial_send_string(char *str) {HAL_UART_Transmit(&huart1, (uint8_t *)str, strlen(str), 1000); } main函数中调用发送信息: uint8_t dat…

React 第二十五章 React.memo

React.memo 是 React 提供的一个高阶组件&#xff0c;用于对函数组件进行性能优化。 React.memo 的源码实际上就是返回一个 PureComponent 组件&#xff1a; function memo(FuncComp){return class Memo extends PureComponent{render(){return <>{FuncComp(this.props…

极致设计!详解专业网页设计的全套步骤和流程

在当今的数字时代&#xff0c;拥有一个专业、易于使用和有吸引力的网页对任何企业或个人都至关重要。专业的网页设计是实现这一目标的关键步骤之一。本文将详细介绍专业的网页设计步骤和过程&#xff0c;以帮助您了解如何设计一个优秀的网页。 在介绍专业网页设计步骤和流程之…