Skip to content

Commit

Permalink
doc: add input formtarget/height document.
Browse files Browse the repository at this point in the history
  • Loading branch information
jaywcjlove committed May 13, 2022
1 parent bc146ba commit 52b1ddb
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 5 deletions.
1 change: 0 additions & 1 deletion docs/tags/input_formnovalidate.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ HTML \<input> formnovalidate 属性
</form>
```


## 定义和用法

`formnovalidate` 属性是一个布尔属性。
Expand Down
58 changes: 56 additions & 2 deletions docs/tags/input_formtarget.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,58 @@
input_formtarget.md
HTML \<input> formtarget 属性
===

欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/input_formtarget.md">docs/tags/input_formtarget.md</a> 文件,共建 HTML Tutorial 文档。
## 示例

具有两个提交按钮的表单,具有不同的目标窗口:

```html idoc:preview:iframe
<form action="/action_page.php">
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="正常提交">
<input type="submit" formtarget="_blank" value="提交到新窗口">
</form>
```

## 定义和用法

`formtarget` 属性指定一个名称或关键字,指示在哪里显示提交表单后收到的响应。

`formtarget` 属性覆盖了 `<form>` 元素的 `target` 属性。

**注意:** `formtarget` 属性可以与 `type="submit"``type="image"` 一起使用。

## 浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
| --- | --- | --- | --- | --- | --- |
| formtarget | Yes | 10.0 | Yes | 5.1 | 10.6 |
<!--rehype:style=width: 100%; display: inline-table;-->

## 语法

```html
<input formtarget="_blank|_self|_parent|_top|framename">
```

## 属性值

| 值 Value | 描述 Description |
| ----- | ----- |
| \_blank | 响应显示在新窗口或选项卡中 |
| \_self | 响应显示在同一帧中(这是默认设置) |
| \_parent | 响应显示在父框架中 |
| \_top | 响应显示在整个窗口中 |
| *framename* | 响应显示在命名的 iframe 中 |
<!--rehype:style=width: 100%; display: inline-table;-->

[HTML \<input> tag](./input.md "HTML input 标签参考")

[1]: ../assets/chrome.svg
[2]: ../assets/edge.svg
[3]: ../assets/firefox.svg
[4]: ../assets/safari.svg
[5]: ../assets/opera.svg
55 changes: 53 additions & 2 deletions docs/tags/input_height.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,55 @@
input_height.md
HTML \<input> height 属性
===

欢迎您编辑 <a target="__blank" href="https://github.com/jaywcjlove/html-tutorial/blob/main/docs/tags/input_height.md">docs/tags/input_height.md</a> 文件,共建 HTML Tutorial 文档。
## 示例

定义一个图像作为提交按钮,具有高度和宽度属性:

```html idoc:preview:iframe
<form action="/action_page.php">
<label for="fname">名:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">姓:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="../assets/chrome.svg" alt="Submit" width="48" height="48" formtarget="_blank"><br>
点击👆上面图标提交
</form>
```

## 定义和用法

`height` 属性指定了 `<input>` 元素的高度。

**注意:** `height` 属性仅与 `<input type="image">` 一起使用。

**提示:** 始终为图像指定 `height``width` 属性。 如果设置了高度和宽度,则在加载页面时保留图像所需的空间。 但是,如果没有这些属性,浏览器将不知道图像的大小,也无法为其预留适当的空间。 效果将是页面布局将在加载期间更改(同时加载图像)。

## 浏览器支持

表中的数字指定了完全支持该属性的第一个浏览器版本。

| 属性 Attribute | ![chrome][1] | ![edge][2] | ![firefox][3] | ![safari][4] | ![opera][5] |
| --- | --- | --- | --- | --- | --- |
| height | Yes | Yes | 16.0 | Yes | Yes |

## 语法

```html
<input height="pixels">
```

## 属性值

| 值 Value | 描述 Description |
| ----- | ----- |
| *pixels* | 以像素为单位的高度(例如 height="100") |
<!--rehype:style=width: 100%; display: inline-table;-->

[HTML \<input> tag](./input.md "HTML input 标签参考")

[1]: ../assets/chrome.svg
[2]: ../assets/edge.svg
[3]: ../assets/firefox.svg
[4]: ../assets/safari.svg
[5]: ../assets/opera.svg

0 comments on commit 52b1ddb

Please sign in to comment.