HTML input的value属性值三类作用详解，实例在线编辑

HTML input的value属性值的三类作用

HTML表单中input的value属性值对于不同的input的type类型有着截然不同的作用。大致分为三类，如下：

对于用于字段输入类型的input，比如type类型为text、password、hidden等，则一般用于定义input的默认值；
对于按钮之类的，比如type类型为button、reset(重置)、submit等，则一般用来定义按钮上的文本内容；
对于type类型为checkbox、radio、image等类型的，则一般用来定义该inputDOM元素的值，会作为数据提交到form表单的action中的url，并作为客户端的请求发送给服务器。

value作为默认值的实例代码，及在线编辑器

<form method='GET' action='url' target='_blank'>
  <input type='text' value='html'>
  <br><br>
  <input type='password' value='123'><br><br>
  <input type='hidden' value='python'>
</form>

代码解析

如上代码，运行之后，input当中会自动填充value中设置的相应的值（hidden被隐藏起来），如果为了设计得更加有层次感，可以为input的输入添加样式，比如添加style='color:rgb(200,200,200)'。

value属性设置按钮文本的实例代码

<form method='GET' action='url' target='_blank'>
  <input type='button' value='按钮' >
  <br><br>
  <input type='submit' value='提交'><br><br>
  <input type='reset' value='重置'>
</form>

value属性设置DOM元素值的实例代码

<form method='GET' action='url' target='_blank'>
  <input type='checkbox' value='Yes' >
  <br><br>
  <input type='radio' value='Ok' name='e1'><br><br>
  <input type='image' value='bmi' src='../../static/img/bmi.jpg' style='width:50%'>
</form>
<button onclick='getValue()'>查看值</button>
<script>
  function getValue(){
    var y=$('input:radio[name="e1"]:checked').val();

  	alert(y)
  }
</script>

hot：热门