iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >解读input标签的value属性及name属性
  • 642
分享到

解读input标签的value属性及name属性

input标签属性input标签的value属性input value属性 2023-01-09 15:01:30 642人浏览 泡泡鱼
摘要

目录input标签的value属性input标签的name属性总结input标签的value属性 input 标签的 value 属性的作用是由 input 标签的 type 属性的

input标签的value属性

input 标签的 value 属性的作用是由 input 标签的 type 属性的值决定的

当 type 的取值为 button、reset、submit 中的其中一个时,此时 value 属性的值表示的是按钮上显示的文本

当 type 的取值为 text、passWord、hidden 中的其中一个时,此时 value 属性的值表示的是输入框中显示的初始值,此初始值可以更改,并且在提交表单时,value 属性的值会发送给服务器(既是初始值,也是提交给服务器的值)

当 type 的取值为 checkbox、radio 中的其中一个时,此时 value 属性的值表示的是提交给服务器的值

当 type 的取值为 image 时,点击它提交表单后,会将用户的点击位置相对于图像左上角的 x 坐标和 y 坐标提交给服务器

type="checkbox" 时,其 value 属性的值表示在复选框呈勾选状态时提交给服务器的数据值,默认为 on
type="image" 定义图像形式的提交按钮,此时必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用(alt 属性表示图片未正常显示时,用于替换图片的提示;如果不写这个属性,当图片未正常显示时,会默认显示提交这两个字)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>input标签的value属性</title>
</head>
<body>
    <fORM action="#">
        <fieldset>
            <legend>value的值是按钮上的文本</legend>
            <input type="button" value="按钮"> 

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

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

        </fieldset>
        


        <fieldset>
            <legend>value的值是输入框中的初始值</legend>
            <input type="text" value="我的type属性值是text"> 

            <input type="password" value="我的type属性值是password"> 

            <!--
                定义隐藏字段,隐藏字段对于用户是不可见的
                隐藏字段通常会存储一个默认值,它们的值也可以由 javascript 进行修改
            -->
            <input type="hidden" value="我的type属性值是hidden"> 

        </fieldset>
        


        <fieldset>
            <legend>value的值在提交表单时会发送给服务器</legend>
            <input type="checkbox" value="v1"> 

            <input type="radio" value="v2"> 

            <!--image型input标签生成的按钮显示为一幅图像,点击它可以提交表单-->
            <input type="image" src="xxx.png" alt="Submit"> 

            <input type="image" src="xxx.png"> 

        </fieldset>
    </form>
</body>
</html>

在谷歌浏览器中的呈现效果如下:

【注】:

checkbox 型的 input 标签的不足之处在于:提交表单时,只有处于勾选状态的复选框的数据值才会发送给服务器。也就是说,如果没有任何一个复选框被选中,那么服务器就不会收到与其相关的数据项

当设置 input 标签的 type 属性值为checkbox 或者 radio 时,必须同时设置 input 标签的 value 属性

type="file" 时,不能使用 value 属性

input标签的name属性

name 属性规定 input 元素的名称

name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据

只有设置了 name 属性的表单元素才能在提交表单时传递它们的值,因为服务端获取表单提交的数据是通过表单元素的 name 属性的值而得到的,没有 name 属性就无法得到表单元素提交给服务端的值

// getParameter("fullName") 中的 fullName 为表单中其中一个input标签的name属性的值
String fullName = request.getParameter("fullName");

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。

--结束END--

本文标题: 解读input标签的value属性及name属性

本文链接: https://www.lsjlt.com/news/177195.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 解读input标签的value属性及name属性
    目录input标签的value属性input标签的name属性总结input标签的value属性 input 标签的 value 属性的作用是由 input 标签的 type 属性的...
    99+
    2023-01-09
    input标签属性 input标签的value属性 input value属性
  • input标签的type属性汇总
    1. text:用于接受单行文本输入。2. password:用于接受密码输入,输入的文本会被隐藏。3. checkbox:用于选择...
    99+
    2023-09-14
    input
  • html input标签的属性有哪些
    HTML input标签的属性有很多,以下是一些常见的属性:- type:指定输入字段的类型,包括text(文本输入框)、passw...
    99+
    2023-09-14
    html
  • html中input标签有什么属性
    小编给大家分享一下html中input标签有什么属性,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!html中input标签的属性有:type、required、p...
    99+
    2023-06-15
  • HTML input标签的type属性有哪些
    HTML input标签的type属性有以下几种:1. text:用于接收文本输入。2. password:用于接收密码输入,输入字...
    99+
    2023-10-10
    HTML
  • input标签的type属性值有哪些
    input标签的type属性值有以下几种常用的取值:1. text:文本输入框,用于输入单行文本。2. password:密码输入框...
    99+
    2023-09-22
    input
  • HTML中input标签的属性是什么
    这篇文章主要介绍HTML中input标签的属性是什么,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!html是什么html的全称为超文本标记语言,它是一种标记语言,包含了一系列标签.通过这些标签可以将网络上的文档格式统...
    99+
    2023-06-15
  • 常见的 HTML<meta> 标签的 name 属性及其作用
    HTML中的 标签可以通过 name 属性提供元数据,这些元数据可以用于指定有关文档的信息,以及控制浏览器和搜索引擎的行为。name 属性通常与其他属性一起使用,如 content、charset、http-equiv 等,以提供更具体的...
    99+
    2023-08-30
    html 前端
  • jquery如何改变input的value属性
    今天小编给大家分享一下jquery如何改变input的value属性的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下...
    99+
    2022-10-19
  • Android|布局及标签属性
    六大布局:线性布局,相对布局,绝对布局,表格布局,帧布局,网格布局。 线性布局(LinearLayout):   作为根标签。线性布局内控件垂直或者水平排列。通过orientation属性来指定。取值:horizontal(水平)默...
    99+
    2022-06-06
    标签属性 布局 属性 标签 Android
  • HTML中input标签的readonly属性有什么用
    input标签的readonly属性用于指定输入框只读,即用户可以看到输入框中的内容,但不能进行任何编辑操作。这个属性的一个常见用途...
    99+
    2023-09-07
    HTML
  • javascript如何设置input value属性的值
    本篇内容主要讲解“javascript如何设置input value属性的值”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“javascript如何设置input...
    99+
    2022-10-19
  • meta标签name=“referrer“属性的写法和用法
    HTML标签name="referrer"属性主要用于控制网页发送给服务器的referrer信息,可以告诉服务器端用户是从哪个页面来到当前网页的。 什么是referrer? referrer有“引用页面”或“来源页面”的意思,用来指定当...
    99+
    2023-08-31
    服务器 html5 Powered by 金山文档
  • 基于@RequestParam name和value属性的区别
    目录基于name和value属性的区别RequestParam内部有4个参数@RequestParam,参数是否必须传的问题一、源码展示二、说明2.1 @RequestParam2....
    99+
    2022-11-12
  • 浅谈@FeignClient中name和value属性的区别
    目录name和value属性的区别name和url属性的作用定义场景解释name和value属性的区别 从源码可以得知,name是value的别名,value也是name的别名。 ...
    99+
    2022-11-13
  • iframe标签属性说明详解
    `iframe`标签是HTML中的内联框架元素,用于在当前HTML文档中嵌入另一个HTML文档。它具有以下属性:1. `src`:指...
    99+
    2023-09-21
    iframe
  • iframe标签属性说明 详解
    iframe标签是HTML中的一个标签,用于在当前HTML页面中嵌入另一个HTML页面。它有以下一些常用的属性:1. src:指定要...
    99+
    2023-09-20
    iframe
  • HTML中link标签属性详解
    在HTML中,link标签是一个自闭合元素,通常位于文档的head部分。它用于建立与外部资源的关联,如样式表、图标等。link标签具有多个属性,其中rel和href是最常用的。 re...
    99+
    2023-05-18
    HTML link标签属性 HTML中link标签 HTML link
  • html常用的标签及属性有哪些
    今天小编给大家分享一下html常用的标签及属性有哪些的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解...
    99+
    2022-10-19
  • 如何实现javascript操作input标签属性checkbox全选
    这篇文章主要为大家展示了“如何实现javascript操作input标签属性checkbox全选”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何实现javas...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作