HTML表单常用的两大属性,action和method

HTML的表单form标签有诸多的属性,这里先介绍两种跟HTML表单的主要功能息息相关的属性,分别是action和method,即鄙人认为,通过HTML表单的这两个属性便能完成表单的基本功能的编程。


HTML表单的action属性

表单form的action属性十分重要,通常用来定义表单中的数据提交之后要执行什么样的操作请求,一般情况下是个url值,即通过url地址(url会包含用户在表单中输入的数值)向服务器发送请求,服务器响应之后会将响应的内容打包重新发送会客户端进行渲染,即浏览器端。使用过搜索的可以看看搜索关键词之后url地址的变化情况。所以说,HTML表单的action属性是至关重要的。

HTML表单action使用方法实例,及在线编辑器

<form action='https://www.x1y1z1.com/search' method='GET' target='_blank'>
  <input type='text'name='qsearchword'>
  <input type='submit' value='笨鸟搜索'>
</form>

代码解析

如上代码完成了一个简单的站内搜索的功能,其中的action中的url利用的是绝对路径,指向本站的搜索请求,当用户在搜索框当中输入关键词,并点击笨鸟搜索按钮之后,就可以完成像服务器发送的搜索请求。注意,该路径与实际开发中的相对路径还是有些区别的。如果要替换成其它的搜索工具,应当注意该工具的所搜路径,例如本站的是https://www.x1y1z1.com/search,同时应当注意文本输入框中的name属性,本例中的name值为qserachword。


HTML表单的method属性

表单form的method属性定义了表单向服务器发送请求的方式,一般分为POST和GET值两种。二者有较大的区别,GET的方式一般不用于修改服务器的数据库数据,提交的数据受到大小的限制(一般为2048个字符),而POST则一般用于修改数据库,而且可提交的数据量可以较大,所以,如果只是一般的表单功能,比如搜索,用GET请求就可以了,但是GET会将提交的数据展现在url中,可能导致安全性的问题,所以一般涉及到重要的信息一般不用GET请求,而改用POST。

method属性的用法

如上面中的实例,method='GET'。如果是使用POST方法,会产生什么效果呢?大家可以通过上面的实例进行试一试,也可以将action的url地址改成当下的各大搜索的url测试一下,测试的时候注意各大搜索的搜索url和关键词(Input输入框)name的值。



全栈前端 / HTML教程 :


















Copyright © 2022-2024 笨鸟工具 x1y1z1.com All Rights Reserved.