Skip to content

Commit ca754c4

Browse files
jaywcjlovejaywcjlove
committed
doc: add button_formenctype,button_formmethod,button_formtarget,button_name,button_type,button_value documemnt.
1 parent d11d26f commit ca754c4

File tree

8 files changed

+360
-14
lines changed

8 files changed

+360
-14
lines changed

‎docs/tags/button_form.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ HTML \<button> form 属性
2828
| 属性 | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
2929
| ---- | ---- | ---- | ---- | ---- | ---- |
3030
| form | 10.0 | 16.0 | 4.0 | 5.1 | 9.5 |
31+
<!--rehype:style=width: 100%; display: inline-table;-->
3132

3233
## 语法
3334

@@ -40,3 +41,10 @@ HTML \<button> form 属性
4041
| 值 Value | 描述 Description |
4142
| ----- | ----- |
4243
| *form\_id* | 指定 \<button> 元素所属的表单元素。 此属性的值必须是同一文档中 \<form> 元素的 id 属性。 |
44+
<!--rehype:style=width: 100%; display: inline-table;-->
45+
46+
[1]: ../assets/chrome.svg
47+
[2]: ../assets/edge.svg
48+
[3]: ../assets/firefox.svg
49+
[4]: ../assets/safari.svg
50+
[5]: ../assets/opera.svg

‎docs/tags/button_formenctype.md‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,51 @@
1-
button_formenctype.md
1+
HTML \<button> formenctype 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/button_formenctype.md">docs/tags/button_formenctype.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
带有两个提交按钮的表单。 第一个提交按钮使用默认字符编码提交表单数据，第二个提交不使用字符编码的表单数据：
7+
8+
```html idoc:preview:iframe
9+
<form action="/action_page_binary.asp" method="post">
10+
<label for="fname">First name:</label>
11+
<input type="text" id="fname" name="fname" value="Ståle"><br><br>
12+
<button type="submit">Submit with character encoding</button>
13+
<button type="submit" formenctype="text/plain">Submit without character encoding</button>
14+
</form>
15+
```
16+
17+
## 定义和用法
18+
19+
`formenctype` 属性指定表单数据在发送到服务器之前应如何编码。 此属性覆盖表单的 `enctype` 属性。
20+
21+
`formenctype` 属性仅用于具有 `type="submit"` 的按钮。
22+
23+
## 浏览器支持
24+
25+
表中的数字指定了完全支持该属性的第一个浏览器版本。
26+
27+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
28+
| ---- | ---- | ---- | ---- | ---- | ---- |
29+
| formenctype | 9.0 | 10.0 | 4.0 | 5.1 | 11.5 |
30+
<!--rehype:style=width: 100%; display: inline-table;-->
31+
32+
## 语法
33+
34+
```html
35+
<button type="submit" formenctype="value">
36+
```
37+
38+
## 属性值
39+
40+
| 值 Value | 描述 Description |
41+
| ----- | ----- |
42+
| application/x-www-form-urlencoded | 默认。 所有字符在发送前都会被编码 |
43+
| multipart/form-data | 如果用户将通过表单上传文件，则此值是必需的 |
44+
| text/plain | 发送完全没有任何编码的数据。 不建议 |
45+
<!--rehype:style=width: 100%; display: inline-table;-->
46+
47+
[1]: ../assets/chrome.svg
48+
[2]: ../assets/edge.svg
49+
[3]: ../assets/firefox.svg
50+
[4]: ../assets/safari.svg
51+
[5]: ../assets/opera.svg

‎docs/tags/button_formmethod.md‎

Lines changed: 66 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,68 @@
1-
button_formmethod.md
1+
HTML \<button> formmethod 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/button_formmethod.md">docs/tags/button_formmethod.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
带有两个提交按钮的表单。 第一个提交按钮用 `method="get"` 提交表单数据，第二个用 `method="post"` 提交表单数据：
7+
8+
```html idoc:preview:iframe
9+
<form action="/action_page.php" method="get">
10+
<label for="fname">First name:</label>
11+
<input type="text" id="fname" name="fname"><br><br>
12+
<label for="lname">Last name:</label>
13+
<input type="text" id="lname" name="lname"><br><br>
14+
<button type="submit">Submit</button>
15+
<button type="submit" formmethod="post">Submit using POST</button>
16+
</form>
17+
```
18+
19+
## 定义和用法
20+
21+
`formmethod` 属性指定发送表单数据时使用的 HTTP 方法。此属性覆盖表单的“方法”属性。
22+
23+
`formmethod` 属性仅用于具有 `type="submit"` 的按钮。
24+
25+
表单数据可以作为 URL 变量（使用 `method="get"`）或作为 HTTP post（使用 `method="post"`）发送。
26+
27+
`get` 方法的注意事项：
28+
29+
* 它以名称/值对的形式将表单数据附加到 URL
30+
* 这对于用户想要为结果添加书签的表单提交很有用
31+
* 您可以在 `URL` 中放置多少数据是有限制的（因浏览器而异），因此，您无法确定所有表单数据都会正确传输
32+
* 切勿使用 `get` 方法传递敏感信息！ （密码或其他敏感信息将显示在浏览器的地址栏中）
33+
34+
关于 `post` 方法的注意事项：
35+
36+
* 它将表单数据作为 HTTP 发布事务发送
37+
* 使用 `post` 方式提交的表单无法添加书签
38+
* 它比 `get` 更健壮和安全
39+
* 它没有尺寸限制
40+
41+
## 浏览器支持
42+
43+
表中的数字指定了完全支持该属性的第一个浏览器版本。
44+
45+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
46+
| ---- | ---- | ---- | ---- | ---- | ---- |
47+
| formmethod | 9.0 | 10.0 | 4.0 | 5.1 | 15.0 |
48+
<!--rehype:style=width: 100%; display: inline-table;-->
49+
50+
## 语法
51+
52+
```html
53+
<button type="submit" formmethod="get|post">
54+
```
55+
56+
## 属性值
57+
58+
| 值 Value | 描述 Description |
59+
| ----- | ----- |
60+
| get | 将表单数据附加到 URL： `URL?name=value\&name=value` |
61+
| post | 将表单数据作为 HTTP 发布事务发送 |
62+
<!--rehype:style=width: 100%; display: inline-table;-->
63+
64+
[1]: ../assets/chrome.svg
65+
[2]: ../assets/edge.svg
66+
[3]: ../assets/firefox.svg
67+
[4]: ../assets/safari.svg
68+
[5]: ../assets/opera.svg

‎docs/tags/button_formnovalidate.md‎

Lines changed: 42 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,44 @@
1-
button_formnovalidate.md
1+
HTML \<button> formnovalidate 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/button_formnovalidate.md">docs/tags/button_formnovalidate.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
带有两个提交按钮的表单。 第一个提交按钮提交表单数据默认验证，第二个提交表单数据不验证：
7+
8+
```html idoc:preview:iframe
9+
<form action="/action_page.php" method="get">
10+
<label for="email">Enter your email:</label>
11+
<input type="email" id="email" name="email"><br><br>
12+
<button type="submit">提交</button>
13+
<button type="submit" formnovalidate>未经验证提交</button>
14+
</form>
15+
```
16+
17+
## 定义和用法
18+
19+
`formnovalidate` 属性是一个布尔属性。
20+
21+
如果存在，它指定不应在提交时验证表单数据。 此属性覆盖表单的 `novalidate` 属性。
22+
23+
`formnovalidate` 属性仅用于具有 `type="submit"` 的按钮。
24+
25+
## 浏览器支持
26+
27+
表中的数字指定了完全支持该属性的第一个浏览器版本。
28+
29+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
30+
| ---- | ---- | ---- | ---- | ---- | ---- |
31+
| formnovalidate | 6.0 | 11.0 | 4.0 | Yes | Yes |
32+
<!--rehype:style=width: 100%; display: inline-table;-->
33+
34+
## 语法
35+
36+
```html
37+
<button type="submit" formnovalidate>
38+
```
39+
40+
[1]: ../assets/chrome.svg
41+
[2]: ../assets/edge.svg
42+
[3]: ../assets/firefox.svg
43+
[4]: ../assets/safari.svg
44+
[5]: ../assets/opera.svg

‎docs/tags/button_formtarget.md‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,55 @@
1-
button_formtarget.md
1+
HTML \<button> formtarget 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/button_formtarget.md">docs/tags/button_formtarget.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
带有两个提交按钮的表单。 第一个提交按钮使用默认目标（“\_self”）提交表单数据，第二个提交表单数据到新窗口（目标=“\_blank”）：
7+
8+
```html idoc:preview:iframe
9+
<form action="/action_page.php" method="get">
10+
<label for="fname">First name:</label>
11+
<input type="text" id="fname" name="fname"><br><br>
12+
<label for="lname">Last name:</label>
13+
<input type="text" id="lname" name="lname"><br><br>
14+
<button type="submit" >提交</button>
15+
<button type="submit" formtarget="_blank">提交到新窗口</button>
16+
</form>
17+
```
18+
19+
## 定义和用法
20+
21+
`formtarget` 属性指定提交表单后在哪里显示响应。 此属性覆盖表单的 `target` 属性。
22+
23+
`formtarget` 属性仅用于具有 `type="submit"` 的按钮。
24+
25+
## 浏览器支持
26+
27+
表中的数字指定了完全支持该属性的第一个浏览器版本。
28+
29+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
30+
| ---- | ---- | ---- | ---- | ---- | ---- |
31+
| formtarget | 9.0 | 10.0 | 4.0 | 5.1 | 10.6 |
32+
<!--rehype:style=width: 100%; display: inline-table;-->
33+
34+
## 语法
35+
36+
```html
37+
<button type="submit" formtarget="_blank|_self|_parent|_top|framename">
38+
```
39+
40+
## 属性值
41+
42+
| 值 Value | 描述 Description |
43+
| ----- | ----- |
44+
| _blank | 在新窗口/选项卡中加载响应 |
45+
| \_self | 在同一帧中加载响应（这是默认设置） |
46+
| \_parent | 在父框架中加载响应 |
47+
| \_top | 在整个窗口中加载响应 |
48+
| *framename* | 在命名的 iframe 中加载响应 |
49+
<!--rehype:style=width: 100%; display: inline-table;-->
50+
51+
[1]: ../assets/chrome.svg
52+
[2]: ../assets/edge.svg
53+
[3]: ../assets/firefox.svg
54+
[4]: ../assets/safari.svg
55+
[5]: ../assets/opera.svg

‎docs/tags/button_name.md‎

Lines changed: 46 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,48 @@
1-
button_name.md
1+
HTML \<button> name 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/button_name.md">docs/tags/button_name.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
两个具有相同 `name` 的按钮，在单击时提交不同的值：
7+
8+
```html idoc:preview:iframe
9+
<form action="/action_page.php" method="get">
10+
选择你最喜欢的主题：
11+
<button name="subject" type="submit" value="HTML">HTML</button>
12+
<button name="subject" type="submit" value="CSS">CSS</button>
13+
</form>
14+
```
15+
16+
## 定义和用法
17+
18+
`name` 属性指定 `<button>` 元素的名称。
19+
20+
`name` 属性用于在表单提交后引用表单数据，或引用 JavaScript 中的元素。
21+
22+
**提示：** 多个 `<button>` 元素可以共享相同的名称。 这允许您拥有多个具有相同名称的按钮，这些按钮在表单中使用时可以提交不同的值。
23+
24+
## 浏览器支持
25+
26+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
27+
| ---- | ---- | ---- | ---- | ---- | ---- |
28+
| name | Yes | Yes | Yes | Yes | Yes |
29+
<!--rehype:style=width: 100%; display: inline-table;-->
30+
31+
## 语法
32+
33+
```html
34+
<button name="name">
35+
```
36+
37+
## 属性值
38+
39+
| 值 Value | 描述 Description |
40+
| ----- | ----- |
41+
| *name* | 按钮的名称 |
42+
<!--rehype:style=width: 100%; display: inline-table;-->
43+
44+
[1]: ../assets/chrome.svg
45+
[2]: ../assets/edge.svg
46+
[3]: ../assets/firefox.svg
47+
[4]: ../assets/safari.svg
48+
[5]: ../assets/opera.svg

‎docs/tags/button_type.md‎

Lines changed: 49 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,51 @@
1-
button_type.md
1+
HTML \<button> type 属性
22
===
33

4-
欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/button_type.md">docs/tags/button_type.md</a> 文件，共建 HTML Tutorial 文档。
4+
## 示例
5+
6+
两个按钮元素充当一个提交按钮和一个重置按钮（在表单中）：
7+
8+
```html idoc:preview:iframe
9+
<form action="/action_page.php" method="get">
10+
<label for="fname">名:</label>
11+
<input type="text" id="fname" name="fname"><br>
12+
<label for="lname">姓:</label>
13+
<input type="text" id="lname" name="lname"><br>
14+
<button type="submit" value="Submit">提交</button>
15+
<button type="reset" value="Reset">重置</button>
16+
</form>
17+
```
18+
19+
## 定义和用法
20+
21+
`type` 属性指定按钮的类型。
22+
23+
**提示：** 始终为 `<button>` 元素指定 type 属性。 不同的浏览器可能对 `<button>` 元素使用不同的默认类型。
24+
25+
## 浏览器支持
26+
27+
| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
28+
| ---- | ---- | ---- | ---- | ---- | ---- |
29+
| type | Yes | Yes | Yes | Yes | Yes |
30+
<!--rehype:style=width: 100%; display: inline-table;-->
31+
32+
## 语法
33+
34+
```html
35+
<button type="button|submit|reset">
36+
```
37+
38+
## 属性值
39+
40+
| 值 Value | 描述 Description |
41+
| ----- | ----- |
42+
| button | 该按钮是一个可点击的按钮 |
43+
| submit | 该按钮是一个提交按钮（提交表单数据） |
44+
| reset | 该按钮是一个重置按钮（将表单数据重置为其初始值） |
45+
<!--rehype:style=width: 100%; display: inline-table;-->
46+
47+
[1]: ../assets/chrome.svg
48+
[2]: ../assets/edge.svg
49+
[3]: ../assets/firefox.svg
50+
[4]: ../assets/safari.svg
51+
[5]: ../assets/opera.svg

0 commit comments

Comments
 (0)