前端小点

前言:
前言记录一些在写界面时容易遗忘的点子。(会不断补充)

HTML中target属性

使用 target 属性，你可以定义被链接的文档在何处显示。

1. “_blank”: 点击后打开一个新的窗口载入目标文档
2. “_parent”: 使得文档载入父窗口或者包含来超链接引用的框架的框架集。如果这个引用是在窗口或者在顶级框架中，那么它与目标 _self 等效。
3. “_self”: 对所有没有指定目标的 <a> 标签是默认目标，它使得目标文档载入并显示在相同的框架或者窗口中作为源文档。这个目标是多余且不必要的，除非和文档标题 <base> 标签中的 target 属性一起使用。
4. “_top”: 使得文档载入包含这个超链接的窗口，用 _top 目标将会清除所有被包含的框架并将文档载入整个浏览器窗口。

使用的最多的时“_blank” 而不声明时默认为“_self”。不仅，可以在<a>标签中使用，其他的也有可能使用，比如下面这个：

<form name="search" action="#" th:action="@{/search}" method="post"
						target="_blank">
						<div class="ui icon inverted transparent input m-margin-tb-tiny">
							<input type="text" name="query" placeholder="Search...."
								th:value="${query}"> <i
								onclick="document.forms['search'].submit()"
								class="search link icon"></i>
						</div>
</form>

这个是我在写springboot项目时用到的，当点击搜索后会新开一个窗口打开搜索出的结果页面。

怎样简便得做到form中的一个任意标签点击后会有submit的效果

<form name="search" action="#" th:action="@{/search}" method="post"
						target="_blank">
						<div class="ui icon inverted transparent input m-margin-tb-tiny">
							<input type="text" name="query" placeholder="Search...."
								th:value="${query}"> <i
								onclick="document.forms['search'].submit()"
								class="search link icon"></i>
						</div>
</form>

还是这个代码，这段代码中<i>标签得点击后有submit的效果，所以声明点击函数为：

onclick="document.forms['search'].submit()"

注意的是forms[‘search’]中的search代表form的name属性。
效果为：
点击这个问号后就会出现想要的搜索结果。