图片实现 提交/重置 按钮

图片实现 提交/重置 按钮

提交：

第一种方式（无图片的）： <input  type="submit" value="提交" />

第二种方式（有图片的）： <input type="image" src="image/login.jpg" />

第三种方式（有图片的），通过链接的方式： 

    <form name="form1" action="login">
        <input type="text" name="usename"/><br/>
        <input type="password" name="password" /><br/><br/>      

       

        <!-- 提交 -->

        <a href= "javascript:document.form1.submit(); " >  
           <img src= "image/login.jpg " border="0">
        </a>
        
    </form>

重置：

第一种方式（无图片的）： <input  type="reset" value="重置" />

第二种方式（有图片的）：

    <form name="form1" action="login">
        <input type="text" name="usename"/><br/>
        <input type="password" name="password" /><br/><br/>
       

        <input type="image" src="image/login.jpg" />  <!-- 提交 -->
       

       <!-- 重置 -->

        <a href= "javascript:document.form1.reset(); " >  
           <img src= "image/reset.jpg " border="0">
        </a>
        
    </form>

超链接的方式调用javascript函数：

functionTest() 是函数的名字,当然还可以携带参数

<a href= "javascript:functionTest(); " >单击</a>

图片提交方式

<form name="findForm" action="<%=request.getContextPath()%>/FindBookInfoByIndexServlet?nowPage=1" method="post"> 书名：<input type="text" size=10 name="bookName"><br> 作者：<input type="text" size=10 name="author"><br><br>     <img src="images/changxiao09.gif" onclick="findForm.submit()" width="45" height="18" alt="搜索"> <img src="images/reset.png" onclick="findForm.reset()" width="45" height="18" alt="重置"><br> </form>

<img src="images/changxiao09.gif"  onclick="findForm.submit()" width="45" height="18" alt="搜索">
<img src="images/reset.png"  onclick="findForm.reset()" width="45" height="18" alt="重置">

findForm 是Form标签的名字