如何获取HTML中input标签的value的值?关于input value的用法详解


本文摘自PHP中文网,作者寻∝梦,侵删。

本篇文章主要为大家讲述的是关于HTML input标签的value属性的用法和value属性的值,还有关于input标签的value属性的相关联的值。下面就让我们一起来看看这篇文章吧

首先让我们看看HTML中的input标签的用法:

value属性是input元素规定值。

对于不同类型的input元素,value属性的用法也不同:

对于"button","reset","submit"类型-定义按钮上的文本

对于"text","password","hidden"类型-定义输入字段的初始(默认)值

对于"checkbox", "radio", "image" 类型-定义与input元素相关的值。该值会发送到表单的action URL。

注释:value属性对于<input type="checkbox">和<input type="radio">是必需的。

注释:value属性不适用于<input type="file">。

说了这么多,来看看实例:

带有value属性预定义值的表单:

1

2

3

4

5

<form action="demo_form.asp" method="get">

  请输入用户名: <input type="text" name="fname" value="Bill" /><br />

  第二次用户名: <input type="text" name="lname" value="Gates" /><br />

  <input type="submit" value="提交" />

</form>

效果如图所示:

tuyi.png

上图就是代码的结果,是定义的表单形式。

现在让我们来看看相关联的value值:

以输入框为例,每个框是不是可以输入内容?这个内容就是输入框关联的值,你给它设置个value属性,那么你设置的value就是它的值,会显示在输入框中。同样的,单选按钮也可以设置一个值,但是这个值不像输入框那样你设置了会显示出来,但是设置了就代表它就有了这么一个值,就好比标注它是男是女一样,是男是女未必看的出来,但是可以标注出来。

有时需要把一个input标签从一个位置调整到另一个位置,调整后input的值就是input标签中value属性的值,如果你修改值的方式并没有修改到value属性,那么调整后你设置的值就会丢失。

1

2

3

<form>

<input id="input" type="input" value='2'></input>

</form>

所以假如你有上述的操作,请一定确保你修改值的方式修改到了input的value属性,或者使用其他方式实现上述的操作,如jQuery的clone方法。

再来一个关于input标签的复选框做法:

1

2

3

4

5

6

<form action="demo-form.php">

  <input type="checkbox" name="vehicle[]" value="Bike">我会PHP<br>

  <input type="checkbox" name="vehicle[]" value="Car">我会html<br>

  <input type="checkbox" name="vehicle[]" value="Boat">我会python<br>

  <input type="submit" value="提交">

</form>

上代码效果如图:

tuer.png

好了,现在这篇文章结束了,有问题的小伙伴就在下方留言吧

【小编推荐】

HTML中的base标签如何写相对路径?(内附使用介绍)

HTML img标签的src属性的用法是什么?具体使用方法解析(内附实例)

以上就是如何获取HTML中input标签的value的值?关于input value的用法详解的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

html编辑软件有哪些

如何将axure文件导出为html

html的meta标签常见用法介绍

表格标签以什么开始以什么结束

html指什么

浅谈input中的name,Value以及label中的for

html什么是注释

html怎么让超链接没有下划线

html中字体如何实现加粗(方法介绍)

如何将json转换为html格式并显示

更多相关阅读请进入《Value》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...