关于前端:零基础教你学前端36表单按钮下

27次阅读

共计 700 个字符,预计需要花费 2 分钟才能阅读完成。

表单 input 控件中的按钮。
接着学习第四类按钮:图像按钮。它的性能和提交按钮一样,只是用图片代替了提交按钮的外观。

定义图像按钮的语法为:input 输出控件的 type 值定义为 image,意为图像。
既然是图像按钮,那就须要引入一张图片,所以还须要定义 src 属性,属性值,为图片的门路。
回到编辑器,持续在 input_button.html 页面中操作,在一般按钮前面增加一个新的 input,并将 type 属性赋值为 image,再定义一个 src 属性,图片的门路为 logo.png。
回到浏览器,一个冰墩墩的图像按钮就做好了。
当鼠标滑到图片上时,指针变成了小手。填写一些数据,单击图像按钮,表单提交了。

如果你嫌图片太大,能够给这个图像按钮的 input 增加 width 和 height 属性,设置成你想要的大小,能够本人入手试试。

持续学习第五类按钮:双标签 button 按钮。
双标签 button 也能实现表单的提交性能。
定义它的语法为:尖角号 button 尖角号 /button,按钮的名字在标签里定义。(<button></button>) 回到编辑器,在图像按钮前面定义定义 button 标签,在标签里定义按钮的名字 “button 按钮 ”。保留。

回到浏览器,刷新,双标签 button 按钮制作实现了。
输出一点测试数据,点击 button 按钮,表单提交了。提醒一下,双标签 button 按钮在 form 里,默认具备点击提交表单的能力。
如果为它增加 type 属性,赋值为 button,它就变成了一般的按钮。回到编辑器,在 button 标签上定义 type 属性,值为 button。
保留。回到浏览器,刷新。单击 “button 按钮 ”,提交表单的性能隐没了。

正文完
 0