2021-05-18

上课案例

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请求：

1. 无法使用缓存文档(更新服务器上的文件或数据库)
2. 向服务器发送大量数据(POST没有数据量限制)
3. 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

 

   get/post区别：

     1.GET方法是用来向服务器上获取数据，而POST是用来向服务器上传递修改数据

     2.GET将表单里的数据添加到action所指向的URL后面，并且两

者之间使用”?”连接

       而各个变量之间使用”&”连接；POST是将表单中的数据放在form的数据体(FormData)中

       按照键值对的方式，传到所指向的action

3GET是不安全的，因为在传输过程中，数据被放在请求的url中这样用户可以直接在浏览器上看到提交的数据，

       POST的所有操作对用户来说都不是不可见的，数据都在数据体(FormData)中

1. 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样式，就能移除预设的表单样式，并保留适当的边距和填充间隙。

 

可以在里面输入值