HTML | DOM 输入文本值属性

在 HTML 中，输入文本值属性用于设置输入框的默认值或者获取输入框中的实际值。在 DOM 中，可以使用属性或方法来获取或修改输入文本值。

HTML 输入文本值属性

HTML 中的输入文本值属性包括 value、defaultValue 和 placeholder。

value 属性

value 属性用来设置或获取输入框的实际值。当用户输入数据或者通过 JavaScript 修改数据时，value 属性将被更新。

<input type="text" id="inputBox" value="Hello World!">

上面的示例中，value 属性指定了输入框的默认值为 "Hello World!"。如果用户修改了输入框中的值，value 属性将被更新为用户输入的实际值。

defaultValue 属性

defaultValue 属性用来设置或获取输入框的默认值。与 value 属性不同，defaultValue 属性只在输入框中没有任何实际输入时生效。

<input type="text" id="inputBox" value="Hello World!" defaultValue="Default Value">

上面的示例中，当用户进入页面时，输入框中显示的值为 "Hello World!"。但是如果用户删掉了输入框中的内容，输入框中将显示 "Default Value"。

placeholder 属性

placeholder 属性用来设置输入框的占位符。占位符是一段灰色的文本，通常用于提示用户输入数据的格式、内容或者示例。

<input type="text" id="inputBox" placeholder="Enter Your Name">

上面的示例中，输入框中将显示 "Enter Your Name"，直到用户输入了实际的姓名。

DOM 输入文本值属性

在 DOM 中，可以使用属性或方法来获取或修改输入文本值。例如，使用 value 属性获取输入框的实际值：

var inputBox = document.getElementById("inputBox");
var value = inputBox.value;

使用 value 属性设置输入框的值：

var inputBox = document.getElementById("inputBox");
inputBox.value = "New Value";

如果输入框的类型是密码输入框，则可以使用 type 属性获取或设置输入框的类型：

var passwordBox = document.getElementById("passwordBox");
var type = passwordBox.type; // "password"
passwordBox.type = "text";

总体来说，HTML 的输入文本值属性与 DOM 输入文本值属性提供了非常便捷的操作方式，使得程序员可以方便地获取或者修改输入框中的值。