html改变button按钮位置

html-css09

html改变button按钮位置,第1张

1、name : 表示按钮的名称,通常作为按钮标识进行使用。 <button name="btn">按钮</button>。

2、type : 表示按钮类型,通常与表单一起联用。reset : 重置按钮sumit : 提交按钮button : 普通按钮<button type="button">按钮</button>。

3、value : 表示按钮初始值,通常在js脚本中进行使用和修改。<button value ="点击">按钮</button>。

4、disabled :表示禁用按钮,使按钮不能点击<button disabled ="disabled">按钮</button>。

HTML <input>标签的 type 属性 设置重置按钮

定义和用法

type 属性规定 input 元素的类型。

语法:<input type="value">

属性值

 button    

   定义可点击按钮(多数情况下,用于通过 JavaScript 启动脚本)。    

 checkbox    

   定义复选框。    

 file    

   定义输入字段和 "浏览"按钮,供文件上传。    

 hidden    

   定义隐藏的输入字段。    

 image    

   定义图像形式的提交按钮。    

 password    

   定义密码字段。该字段中的字符被掩码。    

 radio    

   定义单选按钮。    

 reset    

   定义重置按钮。重置按钮会清除表单中的所有数据。    

 submit    

   定义提交按钮。提交按钮会把表单数据发送到服务器。    

 text    

   定义单行的输入字段,用户可在其中输入文本。默认宽度为 20 个字符。 

实例

<!--定义重置按钮。重置按钮会清除表单中的所有数据。-->

<input type="reset" value="重置" />

1、加一个html标签就可以了 ,<input type="reset" style="background:url(背景图片路径)" name="reset" value="">这个就是了,复制可以了,value设置为空就可以了。

2、合理的运用图片,能够使站点更加丰富多彩,相信有许多喜欢用图片的设计师都遇到过一个问题:用图片实现表单(form)的重置(reset)按钮时,这个按钮并不能重置表单,相反却执行了提交表单的操作,本文说明了这个问题的原因,并给出了相应的解决方案。

3、出现上述问题的原因主要是:普通的按钮是通过类型来区分的,submit 为提交按钮,reset 为重置按钮,而类型为图片(type="image")的按钮,其默认操作是提交表单。因此,如果想用图片实现重置按钮,就需要一些额外的设置了。

4、如果想用图片代替重置按钮,可以用下面的方法:(1)给 type 为 image 的 input 添加onclick事件来实现重置,并通过添加 return false 来避免默认的提交操作:<form method="post" name="testForm_2" action="">,    <p><input type="text" name="keyword" /></p>,    <input type="image" src="send.gif" />,    <input type="image" src="reset.gif" ,nclick="javascript:document.forms['testForm_2'].reset()return false" /></form>document.forms['testForm_2'].reset() 是将名称为 testForm_2 的表单重置。return false 是防止提交表单。

5、直接用图片模拟的重置按钮

<form method="post" name="testForm_3" action="">

<p><input type="text" name="keyword" /></p>

<input type="image" src="send.gif" />

<imgsrc="reset.gif" alt="Reset" onclick="javascript:document.forms['testForm_3'].reset()" style="cursor:pointer" />

</form>

document.forms['testForm_2'].reset() 是将名称为 testForm_2 的表单重置。style="cursor:pointer" 设置图片悬停时,显示手型光标。两种方法大同小异,在javascript被禁止的情况下,第二种方法按钮不会执行任何操作,而第一种方法却会执行提交操作。