<fieldset>,<figcaption>, <figure>,<footer>,<form>标签文档

<fieldset>标签

<form action="#" id="user">
  <fieldset name="userinfo" disabled from="user">
    <legend>个人信息</legend>
    姓名:<input type="text">
    年龄:<input type="number">
  </fieldset>
</form>

说明:该标签用于将表单内相关元素进行分组。lengend可以定义分组的标题。该标签有三个属性,disabled属性规定禁用fieldset。name属性为fieldset定义名字。form属性用于关联表单,属性值必须和其所属form表单的id相同。

<figure><figcaption>标签

图片标题
<figure>
  <img src="https://cdn.86886.wang/blog/1520049889768.jpg">
  <figcaption>图片标题</figcaption>
</figure>

说明<figure>标签用于规定独立的流内容(如图像,图标,代码等),其内容要与主内容相关,但如果被删除不应该对正常文档流有影响。<figcaption>标签为figure元素定义标题,它应该位于figure的第一个或最后一个子元素的位置。

<footer>标签

<section>
  <header>页眉</header>
  <p>内容</p>
  <footer>页脚</footer>
</section>

说明:该标签用于定义文档或节的页脚。一个文档中可以使用多个footer元素。

<form>标签

<form action="#" method="get" enctype="text/plain" name="user" novalidate autocomplete="off">
  姓名:<input type="text">
  年龄:<input type="number">
</form>

说明:该标签用于为用户创建表单。表单能够包含input,menus,textarea,fieldset,legend,label等元素。表单能够向服务器传输数据。

accept-charset属性

说明:该属性规定服务器使用哪种字符集处理表单数据,属性值为空格分隔的值列表,列表包括了服务器支持的字符编码,默认值是UNKNOWN,表示和包含form元素的文档相同的编码。

常用属性值:UTF-8表示Unicode字符编码。ISO-8859-1拉丁字母表的字符编码。gb2312简体中文字符集。字符编码参考

action属性

说明:该属性规定当提交表单时,向何处发送数据。值为一个相对或绝对URL.

autocomplete属性

说明:该属性规定表单是否应该启用自动完成功能。属性值为onoff。这个功能默认是开启状态,允许浏览器预测对字段输入,当用户开始输入时,浏览器会基于之前输入过的值,显示出预选项。

enctype属性

说明:该属性规定在发送到服务器前应该对表单数据进行编码。

属性值:

application/x-www-form-urlencoded:发送前编码所有字符(默认值,空格转换为+号,特殊符号转换为ASCII HEX值)

multipart/form-data: 不对字符编码,使用文件上传的控件时必须使用该属性。

text/plain: 空格转换为+号,不对特殊字符编码

name属性

说明:该属性规定表单的名字。这个属性为JavaScript提供一种引用表单的方法。

novalidate 属性

说明:属性规定提交表单时不对表单进行验证

target属性

说明:属性规定在何处打开action的URL。值可以是_blank, _self, _parent, _top中的一个,也可以是iframe的名字.

method属性

说明:无论是post还是get,提交数据到服务器都分两步执行,首先是浏览器与表单中action URL建立连接,然后传输数据。其中POST方法是分段进行数据传输的,而GET方法是在一个传输步骤中发送所有的数据。使用GET方法浏览器会将数据直接添加到action URL后面,并用问号进行分割,显然这样做在提交一些机密信息时是不可取的,它只能传送数据量较少的表单,在性能上表现很好。POST方法安全性很高,对于数据量较大的表单采用这种方法更可靠。另外如果想在表单外调用服务器的应用程序,比如通过在url中添加参数获取某些数据,这是只能用GET了,因为POST方法没法在URL中传参。

优秀文章首发于聚享小站,欢迎关注!
原文地址:https://www.cnblogs.com/yesyes/p/15356562.html