html 表格中加按钮,HTML 表单按钮

(本次随笔仅作为学习用途)

表单按钮

1. 表单按钮一般分为三类,分别是提交按钮、重置按钮和普通按钮。提交按钮、重置按钮只能在表单中使用,普通按钮则可以在网页的任何地方使用。

2. 从本质上讲,表单按钮也是表单控件,之所以把它分离出来,单独介绍,是因为它的功能比较特别。提交按钮用于把表单数据发送到服务器,重置按钮用于重置整个表单的数据,普通按钮则需要开发者赋予它功能。

3. 当用户点击提交按钮和重置按钮时,就有动作发生,一般不需要添加动作;而普通按钮,必须加上指定的动作,并通过相应的事件来触发,才会在事件发生时激发动作,否则点击普通按钮,什么也不发生。

提交按钮

1.  用户在表单中填写信息后,只有点击提交按钮,这些信息才会被发送到服务器。把 input 元素的 type 属性设置为“submit”,来创建提交按钮。

2.  在创建提交按钮时,input 元素的 value 属性值,为按钮上显示的文本。如果没有提供 value 属性,则按钮上默认显示“提交”。

3.  如果不提供 name 属性,则提交按钮的名/值对就不会发送给服务器。

4. 由于通常不需要这些信息,因此,这种做法是有益的。但是,如果表单上有多个提交按钮,就需要为每个按钮提供 name 属性,以便能够知道哪个按钮被点击。

5. 由于默认的按钮非常丑陋,并且不同浏览器下的外观又不尽相同。因此,可以创建一幅漂亮的图像,再把 input 元素的 type 属性设置为“image”,把 src 属性设置为图像的URL,就可以使用该图像作为提交按钮。使用图像按钮时,input 元素没有value属性。

15f20e62f55d05cb057dc7ac3ab1260e.png

689ca70ef4b6afa54a532a826b250c1a.png

当用户将鼠标悬停在图像按钮上时,浏览器会将箭头替换为手形图标。

切换注册图片:

322cb37e9739673923220485633f6da6.png

在功能上,图像按钮跟 type=submit 的按钮没任何区别,只是用图像取代 input 元素的 value 属性而已。当然,完全可以通过CSS 来美化提交按钮的外观,达到图像一样的效果。这样,在实现了相同效果的同时,又不必向服务器请求图像,可以减少服务器的负担。

标签:图像,表单,HTML,提交,按钮,input,属性

来源: https://www.cnblogs.com/sjslove/p/12862482.html

  • 1
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值