上课案例
form表单的属性action与method
属性 值 描述
action URL 规定当提交表单时向何处发送表单数据
method get/post 规定用于发送form-data的HTTP方法(提交表单)
<form action="/Form00/getData" method="post"></form>
URL可能的值:
绝对 URL -指向其他站点(比如src=”www.baidu.com”)
相对 URL -指向站点内的文件(比如 src=”/Form00/getData”)
method的值 get/post
get提交时参数直接暴露在URL上,
(w3School上给出的区别:)
与POST相比,GET更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用POST请求:
- 无法使用缓存文档(更新服务器上的文件或数据库)
- 向服务器发送大量数据(POST没有数据量限制)
- 发送包含未知字符的用户输入时,POST比GET更稳定也更可靠
get/post区别:
1.GET方法是用来向服务器上获取数据,而POST是用来向服务器上传递修改数据
2.GET将表单里的数据添加到action所指向的URL后面,并且两
者之间使用”?”连接
而各个变量之间使用”&”连接;POST是将表单中的数据放在form的数据体(FormData)中
按照键值对的方式,传到所指向的action
3GET是不安全的,因为在传输过程中,数据被放在请求的url中这样用户可以直接在浏览器上看到提交的数据,
POST的所有操作对用户来说都不是不可见的,数据都在数据体(FormData)中
- GET方法向URL添加数据,URL的长度是受限制的(URL的最大长度是2048个字符),POST提交无限制
https://www.w3school.com.cn/tags/html_ref_httpmethod s.asp
5.GET为form表单的默认提交方式
6.GET方式获取数据后,刷新不会有负面的影响,因为它只是获取数据, POST数据会被重新提交可能会产生不良的后果(浏览器应该告知用户数据会被重新提交)
7.数据类型的限制:GET只允许ASCII字符,POST则无限制(如果提交二进制数据(例如:图片),需要使用POST方法)
οnsubmit="return false;":禁用表单的自动提交方式
autocomplete="off" :关闭提示框
点击姓名框不会再出现提示,需要自己输入姓名
手动提交表单数据
表单控制
文本控件(如 <input>
、<select>
、 <textarea>
)统一采用 .form-control
样式进行处理优化,包括常规外观、focus选(点)中状态、尺寸大小等。
使用 .form-control-lg
和 .form-control-sm
属性定控件大小高度。
只读属性
在input控件上增加 readonly
(布尔值)标签定义,以防止修改input中的值。仅能阅读的input控件显示较谈(就象禁用的输入框),但保留鼠标效果。
只读纯文本
如果你希望将 <input readonly>
属性进一步处理,显示为纯文本(没有控件框),你只要引用 .form-control-plaintext
class样式,就能移除预设的表单样式,并保留适当的边距和填充间隙。
可以在里面输入值