Skip to content

Commit 19db1a2

Browse files
committed
docs(elements): add input
1 parent 0164d38 commit 19db1a2

2 files changed

Lines changed: 79 additions & 1 deletion

File tree

chapters.yml

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,8 @@
6969
- bom/cookie.md: Cookie
7070
- bom/same-origin.md: 同源限制
7171
- bom/location.md: Location 对象,URL 对象,URLSearchParams 对象
72-
- elements/: 网页元素接口
72+
- elements/: 附录:网页元素接口
7373
- elements/a.md: <a>
7474
- elements/image.md: <img>
75+
- elements/input.md: <input>
7576
- elements/button.md: <button>

docs/elements/input.md

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
# <input> 元素
2+
3+
`<input>`元素主要用于表单组件,它继承了 HTMLInputElement 接口。
4+
5+
## HTMLInputElement 的实例属性
6+
7+
### 特征属性
8+
9+
- `name`:字符串,表示`<input>`节点的名称。该属性可读写。
10+
- `type`:字符串,表示`<input>`节点的类型。该属性可读写。
11+
- `disabled`:布尔值,表示`<input>`节点是否禁止使用。一旦被禁止使用,表单提交时不会包含该`<input>`节点。该属性可读写。
12+
- `autofocus`:布尔值,表示页面加载时,该元素是否会自动获得焦点。该属性可读写。
13+
- `required`:布尔值,表示表单提交时,该`<input>`元素是否必填。该属性可读写。
14+
- `value`:字符串,表示该`<input>`节点的值。该属性可读写。
15+
- `validity`:返回一个`ValidityState`对象,表示`<input>`节点的校验状态。该属性只读。
16+
- `validationMessage`:字符串,表示该`<input>`节点的校验失败时,用户看到的报错信息。如果该节点不需要校验,或者通过校验,该属性为空字符串。该属性只读。
17+
- `willValidate`:布尔值,表示表单提交时,该`<input>`元素是否会被校验。该属性只读。
18+
19+
### 表单相关属性
20+
21+
- `form`:返回`<input>`元素所在的表单(`<form>`)节点。该属性只读。
22+
- `formAction`:字符串,表示表单提交时的服务器目标。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`action`属性。
23+
- `formEncType`:字符串,表示表单提交时数据的编码方式。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`enctype`的属性。
24+
- `formMethod`:字符串,表示表单提交时的 HTTP 方法。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`method`属性。
25+
- `formNoValidate`:布尔值,表示表单提交时,是否要跳过校验。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`formNoValidate`属性。
26+
- `formTarget`:字符串,表示表单提交后,服务器返回数据的打开位置。该属性可读写,一旦设置了这个属性,会覆盖表单元素的`target`属性。
27+
28+
### 文本输入框的特有属性
29+
30+
以下属性只有在`<input>`元素可以输入文本时才有效。
31+
32+
- `autocomplete`:字符串`on``off`,表示该`<input>`节点的输入内容可以被浏览器自动补全。该属性可读写。
33+
- `maxLength`:整数,表示可以输入的字符串最大长度。如果设为负整数,会报错。该属性可读写。
34+
- `size`:整数,表示`<input>`节点的显示长度。如果类型是`text``password`,该属性的单位是字符个数,否则单位是像素。该属性可读写。
35+
- `pattern`:字符串,表示`<input>`节点的值应该满足的正则表达式。该属性可读写。
36+
- `placeholder`:字符串,表示该`<input>`节点的占位符,作为对元素的提示。该字符串不能包含回车或换行。该属性可读写。
37+
- `readOnly`:布尔值,表示用户是否可以修改该节点的值。该属性可读写。
38+
- `min`:字符串,表示该节点的最小数值或日期,且不能大于`max`属性。该属性可读写。
39+
- `max`:字符串,表示该节点的最大数值或日期,且不能小于`min`属性。该属性可读写。
40+
- `selectionStart`:整数,表示选中文本的起始位置。如果没有选中文本,返回光标在`<input>`元素内部的位置。该属性可读写。
41+
- `selectionEnd`:整数,表示选中文本的结束位置。如果没有选中文本,返回光标在`<input>`元素内部的位置。该属性可读写。- `selectionDirection`:字符串,表示选中文本的方向。可能的值包括`forward`(与文字书写方向一致)、`backward`(与文字书写方向相反)和`none`(文字方向未知)。该属性可读写。
42+
43+
### 复选框和单选框的特有属性
44+
45+
如果`<input>`元素的类型是复选框(checkbox)或单选框(radio),会有下面的特有属性。
46+
47+
- `checked`:布尔值,表示该`<input>`元素是否选中。该属性可读写。
48+
- `defaultChecked`:布尔值,表示该`<input>`元素默认是否选中。该属性可读写。
49+
- `indeterminate`:布尔值,表示该`<input>`元素是否还没有确定的状态。一旦用户点击过一次,该属性就会变成`false`,表示用户已经给出确定的状态了。该属性可读写。
50+
51+
### 图像按钮的特有属性
52+
53+
如果`<input>`元素的类型是`image`,就会变成一个图像按钮,会有下面的特有属性。
54+
55+
- `alt`:字符串,图像无法显示时的替代文本。该属性可读写。
56+
- `height`:字符串,表示该元素的高度(单位像素)。该属性可读写。
57+
- `src`:字符串,表示该元素的图片来源。该属性可读写。
58+
- `width`:字符串,表示该元素的宽度(单位像素)。该属性可读写。
59+
60+
### 文件上传按钮的特有属性
61+
62+
如果`<input>`元素的类型是`file`,就会变成一个文件上传按钮,会有下面的特有属性。
63+
64+
- `accept`:字符串,表示该元素可以接受的文件类型,类型之间使用逗号分隔。该属性可读写。
65+
- `files`:返回一个`FileList`实例对象,包含了选中上传的一组`File`实例对象。
66+
67+
### 其他属性
68+
69+
- `defaultValue`:字符串,表示该`<input>`节点的原始值。
70+
- `dirName`:字符串,表示文字方向。
71+
- `accessKey`:字符串,表示让该`<input>`节点获得焦点的某个字母键。
72+
- `list`:返回一个`<datalist>`节点,该节点必须绑定`<input>`元素,且`<input>`元素的类型必须可以输入文本,否则无效。该属性只读。
73+
- `multiple`:布尔值,表示是否可以选择多个值。
74+
- `labels`:返回一个`NodeList`实例,代表绑定当前`<input>`节点的`<label>`元素。该属性只读。
75+
- `step`:字符串,表示在`min`属性到`max`属性之间,每次递增或递减时的数值或时间。
76+
- `valueAsDate``Date`实例,一旦设置,该`<input>`元素的值会被解释为指定的日期。如果无法解析该属性的值,`<input>`节点的值将是`null`
77+
- `valueAsNumber`:浮点数,当前`<input>`元素的值会被解析为这个数值。

0 commit comments

Comments
 (0)