html 表单一定要用submit提交吗

html 表单一定要用submit提交吗,第1张

不一定需要用submit提交

1. HTML提交表单

HTML提交表单简单易 *** 作,依靠在<form>标签对中的<input type='submit'>提交按钮进行请求发送和参数提交。其中form标签的post属性决定提交方式是get还是post。

servlet或者action根据name属性获取提交的参数

2. HTML超链接请求

只使用html发送超链接请求的话,方式比较单一。传递参数值是被写死的,并且只能使用get方式去发送请求。如果不用javascript的话,超链接还是作为一个页面跳转按钮比较合适。

jsp代码

3. Javascript提交表单

使用js和html提交表单的话就可以灵活很多,因为js不仅有针对页面很多的触发事件,而且可以获取到html页面元素的信息。

3.1 form表单提交前触发事件

这里主要是介绍下在提交form表单之前的onsubmit事件,在很早以前学习的时候,这个事件会被作为用户输入数据校验的入口。不过仍然因为js使html页面的灵活性变高,这种前端校验用户输入的方式也不是那么唯一。

jsp代码

javascript代码

form 将表单元素包裹起来,受form包裹的表单元素才会提交给服务器。

<form action=”地址” method=””>

表单元素

</form>

form标签是表单的外壳,主要有四个属性:

action:表单提交的地址(后台服务器地址)

method:提交表单的方法,两种请求方式,post、get

target:在何处打开action

enctype:(编码方式)

applocation/x-www-form-erlencoded 在发送前编码所有字符(默认)

text/plain:空格转换为”+”号,但不对特殊字符编码

multipart/form-data:使用包含文件上传控件的表单时,必须使用该值。例如:上传音频、视频。

1、区别:(体现在方式、安全、数据量三个方面)

- 方式,点击提交(发请求时),get将请求数据变成”k=value”的形式,然后组装到URL上。post方式提交请求时,数据通过浏览器传输给后台,但是URL没发生变化。

- 安全,get将信息组装到URL上,信息泄露,不安全;post方式的URL没发生变化更加安全。

- 数据量,浏览器地址栏能存放的字符有限的(容量有限),get方式的URL过于冗长,当超出限制时,浏览器自动截断URL,则传给后台的数据不完整,所以对数据大小有限制。而post方式的URL更干净、轻便,能完整地将数据传递给后台,无数据大小限制。

2、什么时候用get,什么时候用post(使用场景)

get:向后台查询东西,如查询论文;即向后台索要数据,用关键词来获取大量数据。安全性要求低,简单。

post:向后台传数据,例论文查重(数据很大,提交给后台)。安全性要求高。

是表单收集信息的元素,主要有以下属性:

<label for="input_username">姓名:</label><input type="text" name="username" id="input_username" placeholder="用户名"/>

效果:

<label for="input_password">密码:</label><input type="password" name="password" id="input_password" placeholder="密码"/>

效果:

效果:

效果:

<label>我的car:</label><select name="transportation"><option value="bus">公交</option><option value="subway" selected>地铁</option><option value="taxi">出租车</option></select>

效果:

<label >评论:</label><textarea name="recomment" placeholder="ddd" cols="60" rows="10"></textarea>

效果:

<label for="zjz">证件照:</label><input type="file" name="photo" id="zjz" accept="image/jpg"/>

其中accept规定了文件格式。

效果:

<input type=”hidden” name=”abc” value=”123”>

点击提交时,hidden里隐藏的数据也提交给了后台;abc=’123’

作用:(1)暂存信息,(用户看不到),便于设计者随时调用程序。

(2)用于安全性校验,例如通过设置hidden隐藏域,服务器可以验证用户权限,避免伪造的假网站提交数据。

<input type="button" value="按钮"/>

效果:

<input type="submit" value="提交"/>

效果:

<input type="reset" value="复位"/>

效果:

1、打开Dreamweaver 编辑器,准备好一个空白的html文件,写入基本的html结构:

2、创建表单,演示中表单中设置年龄和姓名两个属性,然后创建提交按钮:

3、上方设置script标签,在里面创建js函数,函数内容为获取表单提交

3、接着打开浏览器预览效果,在表单内填入内容点击提交:

4、点击提交后,js就会把数据提交到指定位置了。以上就是HTML提交表单的 *** 作:


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/6273860.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-03-19
下一篇 2023-03-19

发表评论

登录后才能评论

评论列表(0条)

保存