当前位置: 首页 > Web前端 > HTML

零基础教你学前端——36.表单按钮(下)

时间:2023-03-28 14:37:46 HTML

表单输入控件中的按钮。接着学习第四类按钮:图片按钮。它的功能与提交按钮相同,但将提交按钮的外观替换为图像。定义一个图片按钮的语法是:input输入控件的type值定义为image,即图像。由于是图片按钮,需要引入图片,所以还需要定义src属性,属性值,图片的路径。回到编辑器,继续对input_button.html页面进行操作,在普通按钮后面添加一个新的input,将type属性赋值给image,并定义一个src属性,image的路径为logo.png。回到浏览器,一个冰冷的图片按钮就做好了。当鼠标滑过图片时,指针会变成一只小手。填写一些数据,点击图像按钮,提交表单。如果觉得图片太大,可以在图片按钮的input中添加width和height属性,设置成自己想要的大小。你可以自己试试。继续学习第五种按钮:双标按钮按钮。双标签按钮还可以实现表单的提交功能。定义它的语法是:cuspbuttoncusp/button,按钮的名称定义在标签中。()回到编辑器,定义图片按钮后面的button标签,在标签中定义按钮名称“buttonbutton”。节省。回到浏览器,刷新,双标按钮完成。输入一点测试数据,点击button按钮,表单提交。提醒一下,双标签按钮按钮在表单中,默认具有点击提交表单的能力。如果给它添加一个type属性,并赋值为button,它就变成了一个普通的按钮。返回编辑器,在按钮标签上定义类型属性,值为按钮。节省。返回浏览器并刷新。单击“按钮”后,提交表单的功能消失。