html input[text],HTML DOM Input Text用法及代码示例

HTML DOM中的Input Text Object用于表示具有type =“ text”属性的HTML 元素。可以使用getElementById()方法访问类型=“ text”的元素。

用法:

它用于访问输入文本对象。document.getElementById("id");

它用于创建输入元素。document.createElement("input");

输入文本对象属性：

属性

描述

type

它用于将表单元素的类型返回到文本字段。

value

此属性用于设置或返回文本字段的value属性的值。

autocomplete

此属性用于设置或返回文本字段的自动完成属性的值。

autofocus

此属性用于设置或返回在页面加载时文本字段是否应自动获得焦点。

defaultValue

此属性用于设置或返回文本字段的默认值。

disabled

此属性用于设置或返回是否禁用文本字段。

form

此属性用于返回对包含文本字段的表单的引用。

list

此属性用于返回对包含文本字段的数据列表的引用。

maxLength

此属性用于设置或返回文本字段的maxlength属性值。

name

此属性用于设置或返回文本字段的name属性的值。

pattern

此属性用于设置或返回文本字段的pattern属性的值。

placeholder

此属性用于设置或返回文本字段的占位符属性的值。

readOnly

此属性用于设置或返回文本字段是否为只读。

required

此属性用于设置或返回在提交表单之前是否必须填写文本字段。

size

此属性用于设置或返回文本字段的size属性的值。

范例1：本示例使用getElementById()方法访问具有type =“ text”属性的元素。

HTML DOM Input Text Object

GeeksForGeeks

DOM Input Text Object

Click on button to display the text field

Click Here!

function myGeeks() {

var txt = document.getElementById("text_id").value;

document.getElementById("GFG").innerHTML = txt;

}

输出：

在单击按钮之前：

单击按钮后：

范例2：本示例使用document.createElement()方法创建具有type =“ text”属性的元素。

HTML DOM Input Text Object

GeeksForGeeks

DOM Input Text Object

Click the button to create Text Field

Click Here!

function myGeeks() {

/* Create an input element */

var x = document.createElement("INPUT");

/* Set the type attribute */

x.setAttribute("type", "text");

/* Set the value to the attribute */

x.setAttribute("value", "Hello Geeks!");

/* Append node to the body */

document.body.appendChild(x);

}

输出：

在单击按钮之前：

单击按钮后：