生成一个带文本提示信息的图片提交按钮

来源:互联网 发布:当红网络主播前十 编辑:程序博客网 时间:2024/06/05 06:48

如下,表单中有一个搜索按钮,不过是灰色背景的文本按钮

<form method="post" action="/index.php?r=Statistics/admin/report/list" enctype="multipart/form-data" name="SearchForm" id="SearchForm"><fieldset><input type="number" onkeyup="value=value.replace(/[^\d\-]/g,'')" name="mp" id="mp" value="13515124174" maxlength="100"><input type="submit" value="搜索" name="Search"></fieldset></form>

通过下面的方法可以换成图片按钮并且带提示信息:

<form method="post" action="/index.php?r=Statistics/admin/report/list" enctype="multipart/form-data" name="SearchForm" id="SearchForm"><fieldset><input type="number" onkeyup="value=value.replace(/[^\d\-]/g,'')" name="mp" id="mp" value="13515124174" maxlength="100"><input type="image" title="搜索" src="images/ico-csv.png" alt="搜索"></fieldset></form>

注意上面的
<input type="image" title="搜索" src="images/ico-csv.png" alt="搜索">
中的alt和title属性,alt属性代表的是图片无法显示时出现的替代文本,在ie9之前,会把其中的文本做为提示信息,但这个行为是不规范的,正确的行为是设置title属性,

当鼠标移动按钮上时,会显示一个黄色背景的浮动提示。


by iefreer

原创粉丝点击