前端笔记1（表单默认值）

最新推荐文章于 2024-06-01 17:55:41 发布

原创最新推荐文章于 2024-06-01 17:55:41 发布 · 3.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

新手练习专栏收录该内容

8 篇文章

订阅专栏

本文探讨了前端开发中表单默认值的设置，重点关注了隐藏域（HTML DOM Hidden 对象）作为隐式默认值的用法，以及disabled属性在显式设置默认值时的限制。由于disabled元素在提交时不包含其值，文章提出了两种解决方案：使用冗余隐藏域或通过onsubmit事件处理函数获取disabled元素的值。

默认值：

隐式：隐藏域(HTML DOM Hidden 对象)

如果想要提交并非用户直接输入的数据的话，就是用这种类型的元素。
http://www.runoob.com/jsref/dom-obj-hidden.html

这里写图片描述

<!DOCTYPE html>
<html>
<head>
<script>
function displayResult()
{
var x=document.getElementById("hidden1").value;
alert(x);
}
</script>
</head>
<body>

<form>
<input type="hidden" id="hidden1" value="W3Schools">
</form>

<button type="button" onclick="displayResult()">Display value of hidden field</button>

</body>
</html>

显式：disabled (HTML disabled 属性)

这里写图片描述

<!DOCTYPE html>
<html>
<body>

<form action="demo_form.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname" value="value" disabled><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>