HTML <from>表单

定义<form>元素定义了一个表单,用户可以在表单中输入数据,这些数据可以被提交到服务器。

属性

  • action:指定表单提交时的目标URL(服务器端脚本的地址)。

  • method:定义提交表单时使用的HTTP方法(通常是GETPOST)。

    • GET 方法

      • 数据传输:表单数据附加在URL后面,形成查询字符串(如?name=value&age=30)。由于URL长度限制,GET请求不适合传输大量数据。

      • 缓存:GET请求可以被缓存,这意味着浏览器可以存储请求的结果,加快后续请求的速度。

      • 历史:GET请求保留在浏览器历史记录中,用户可以回退到之前的GET请求。

      • 安全性:由于数据暴露在URL中,GET不适用于传输敏感信息,如密码或个人信息。

      • 数据大小:由于URL长度限制,GET请求的数据大小有限制。

      POST 方法

      • 数据传输:表单数据不会显示在URL中,而是在HTTP请求的主体中。POST可以传输大量数据,没有大小限制。

      • 缓存:POST请求不会被缓存,每次提交都会向服务器发送新请求。

      • 历史:POST请求不会保留在浏览器历史记录中。

      • 安全性:由于数据不在URL中显示,POSTGET更安全,适合传输敏感信息。

      • 数据大小:POST请求可以传输大量数据,没有大小限制(尽管实际大小可能受到服务器配置的限制)。

  • name:表单的名称,可用于在文档中引用表单。

  • enctype:定义表单提交时使用的编码类型(如application/x-www-form-urlencoded, multipart/form-data等)。

输入字段<form>元素内部可以包含多种类型的<input>元素,以及其他表单控件,如<select>, <textarea>, <button>等。

输入类型<input>元素可以有多种类型,每种类型对应不同的输入控件,例如:

  • text:单行文本框。

  • password:密码输入框,输入内容会被隐藏。

  • submit:提交按钮,用于发送表单数据到服务器。

  • radio:单选按钮。

  • checkbox:复选框。

  • file:文件上传控件。

  • hidden:隐藏输入字段,对用户不可见。

  • image:图像作为提交按钮。

  • reset:重置按钮,用于重置表单中的所有字段到默认值。

表单控件 :除了<input>元素,表单还可以包含以下控件:

  • <select>:下拉选择框。

  • <textarea>:多行文本输入区域。

  • <fieldset>:将表单中的相关元素分组。

  • <legend>:为<fieldset>元素提供标题。

表单验证 :HTML5引入了表单验证功能,通过属性如required, pattern, min, max等,可以在客户端进行输入验证。

提交表单:用户填写完表单后,可以通过点击提交按钮或使用快捷键(通常是Ctrl+Enter)来提交表单。

服务器处理:表单提交后,数据会被发送到服务器,服务器端脚本(如PHP, Python, Node.js等)可以处理这些数据。

响应:服务器处理完表单数据后,可以向客户端返回响应,这可能是一个确认消息、重定向到另一个页面,或者显示处理结果。

安全性:表单数据在传输过程中应确保安全,可以通过HTTPS协议来加密数据

相关推荐
l1x1n03 小时前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
神之王楠6 小时前
如何通过js加载css和html
javascript·css·html
茶卡盐佑星_7 小时前
meta标签作用/SEO优化
前端·javascript·html
金灰7 小时前
HTML5--裸体回顾
java·开发语言·前端·javascript·html·html5
Zheng1139 小时前
【可视化大屏】将柱状图引入到html页面中
javascript·ajax·html
酷酷-1 天前
彩虹易支付最新版源码及安装教程(修复BUG+新增加订单投诉功能)
html·php·bug
gopher95111 天前
HTML详解
前端·html
等什么君!1 天前
复习HTML(进阶)
前端·html
谢尔登1 天前
【移动端】事件基础
前端·javascript·html
谢尔登1 天前
【移动端】Viewport 视口
前端·javascript·html