HTML中value、name、id属性区别

最新推荐文章于 2022-10-18 21:50:32 发布

风起回廊

最新推荐文章于 2022-10-18 21:50:32 发布

阅读量5.4k

点赞数 10

分类专栏：前端

前端专栏收录该内容

2 篇文章 1 订阅

订阅专栏

1.＜input＞ value 属性

<form action="demo_form.php">
First name: <input type="text" name="fname" value="John"><br>
Last name: <input type="text" name="lname" value="Doe"><br>
<input type="submit" value="提交表单">

value 属性规定＜input＞元素的值。

value 属性对于不同 input 类型，用法也不同：

对于 “button”、“reset”、“submit” 类型 - 定义按钮上的文本
对于 “text”、“password”、“hidden” 类型 - 定义输入字段的初始（默认）值
对于 “checkbox”、“radio”、“image” 类型 - 定义与 input 元素相关的值，当提交表单时该值会发送到表单的 action URL。

注意：value 属性对于＜input type="checkbox"＞和＜input type="radio"＞是必需的。
注意：value 属性不适用于＜input type="file"＞。

＜input＞name 属性

<form action="demo_form.php">
Name: <input type="text" name="fullname"><br>
Email: <input type="text" name="email"><br>
<input type="submit" value="提交">
</form>

name 属性规定＜input＞元素的名称。
name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。

注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。

HTML id 属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
function displayResult()
{
    document.getElementById("myHeader").innerHTML="Have a nice day!";
}
</script>
</head>
 
<body>
 
<h1 id="myHeader">Hello World!</h1>
<button onclick="displayResult()">编辑文本</button>
 
</body>
</html>