HTML——form表单
表单主要是用来收集客户端提供的相关信息,提供了用户数据录入的方式,有多选、单选、单行文本、下拉列表等输入框,便于网站管理员收集用户的数据,是Web浏览器和Web服务器之间实现信息交流和数据传递的桥梁.
表单被form标签包含,内部使用不同的表单元素来呈现不同的方式来供用户输入或选择。当用户输入好数据后,就可以把表单数据提交到服务器端。
一个表单元素有三个基本组成部分:
-
表单标签,包含了表单处理程序所在的URL以及数据提交到服务器的方法等表单信息。
-
表单域,包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等表单控件。
-
表单按钮,包括提交按钮、复位按钮和一般按钮,用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。
在HTML中创建表单用form标签。每个表单都可以包含一到多个表单域或按钮。form标签常用的属性如下:
属性 | 值 | 描述 |
---|---|---|
action | 访问服务器地址 | 服务器端表单处理程序的URL地址 |
method | post、get[默认值] | 表单数据的提交方法 |
target | 参考超链接的target属性 | 表单数据提交时URL的打开方式 |
enctype | application/x-www-form-urlencoded[默认值] multipart/form-data [用于文件上传] text/plain [用于纯文本数据发送] | 表单提交数据时的编码方式 |
例子:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | < h3 >用户注册</ h3 > < form action="http://127.0.0.1:8800" method="get"> < p >< label for="user">姓名</ label >: < input type="text" name="user" id="user"></ p > < p >密码: < input type="password" name="pwd"></ p > < p >爱好: < input type="checkbox" name="hobby" value="basketball">篮球 < input type="checkbox" name="hobby" value="football">足球 < input type="checkbox" name="hobby" value="shuangseqiu" checked>双色球 </ p > < p >性别: < input type="radio" name="gender" value="men">男 < input type="radio" name="gender" value="female">女 < input type="radio" name="gender" value="qita">其他 </ p > < p >生日:< input type="date" name="birth"></ p > < p >籍贯: < select name="province" id="" multiple size="2"> < option value="">广东省</ option > < option value="" selected>山东省</ option > < option value="">河北省</ option > </ select > </ p > < p > < textarea name="" id="" cols="30" rows="10" placeholder="个人简介"></ textarea > </ p > < div > < p >< input type="reset" value="重置"></ p > < p >< input type="button" value="普通按钮"></ p > < p >< button >普通按钮</ button ></ p > < p >< input type="submit" value="提交"></ p > </ div > </ form > |
———— form标签的所有属性:
所有属性 | 描述 |
---|---|
action | 规定用户点击提交按钮时,表单被提交到的位置。 |
method | 规定表单提交时所使用的 http 请求方法,只能是 get 或 post 中的任意一种。 |
name | 定义表单的名称,不能包含特殊字符和空格。 |
accept-charset | 规定在被提交表单中使用的字符集(默认:页面字符集)。 |
autocomplete | 规定浏览器应该自动完成表单(默认:开启)。 |
enctype | 规定被提交数据的编码(默认:url-encoded)。 |
novalidate | 规定浏览器不验证表单。 |
target | 规定 action 属性中地址的目标(默认:_self)。 |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现