2019-7-17下午学习笔记

第四章——表单及其他新增和改良的元素

新增元素与属性

• 表单内元素的form属性：

  优点：在需要时可以更方便地向页面中地元素添加样式，因为他们不是被分散在各表单之内的

 <form action="" id="formInfo">
      <input type="text">
  </form>
  <textarea form="formInfo" name="" id="" cols="30" rows="10"></textarea>

• formaction属性：表单内的元素，可以规定相关内容提交到不同的页面

• formmethod属性：可以规定表单内的元素在单独提交的时候方法

• formenctype属性：规定表单内的元素在提交的时候的编码方式

  • multiparty/form-data：不对字符编码，在使用包含文件上传控件的表单时，必须使用该值

• formtarget属性：用于指定在何处打开表单提交后所需要加载的页面

• autofocus属性：自动获得光标焦点

  从实用角度来说，不要滥用该属性，建议：当一个页面是以使用某个控件为主要目的时，才对控件使用该属性

• required属性：一定要填写的表单内容，如果没有内容，不允许提交

• labels属性：类似于一种标签的动态绑定，个人用得比较多的是，用radio/checkbox时和文字进行绑定，这样就能实现点击文字的时候，radio变成选中状态

• control属性：可以在标签（label元素）内部放置一个表单元素，并且通过该标签的control属性来访问该表单的元素

  即：不属于label内部的元素，可通过该属性来访问label的内部元素，在label里面都只有一个表单元素，是不是侧面说明，label只能绑定一个表单元素

• placeholder元素：元素或者在没有内容的时候默认出现的提示性文字，还可以通过css更改对应的样式

        input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
             /* WebKit browsers */
             color: red;
         }
         input:-moz-placeholder, textarea:-moz-placeholder {
             /* Mozilla Firefox 4 to 18 */
             color: red;
         }
         input::-moz-placeholder, textarea::-moz-placeholder {
             /* Mozilla Firefox 19+ */
             color: red;
         }
         input:-ms-input-placeholder, textarea:-ms-input-placeholder {
             /* Internet Explorer 10+ */
             color: red;
         }

• list属性：input-text添加的属性，效果类似于下拉框，用户不仅可以选择对应的内容，还可以输入自己需要的

<input type="text" list="test">
<datalist id="test" style="display: none;">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</datalist>

那个datalist标签一定要display:none;可能在某些浏览器不添加该属性看不出什么区别，但是为了避免在没有支持该元素的浏览器上出现显示错误，还是添加比较保险

• autocomplete属性：自动补全
• pattern属性：在H5中，对input元素使用该属性，并且将该属性设为某个格式的正则表达式时，在提交的时会对这些进行检查，检查是或否符合格式，不过不符合，会给出提示，并且不允许提交，这样其实是可以减少用js进行验证
• selectDirection属性：针对input/textarea元素，但是没找到使用的样例，具体怎么使用不可知
• indeterminate属性：对于checkbox元素，本来是拥有选取和未被选取状态，添加该属性代表“尚未明确是否选取”，然后可以通过js去对该属性赋值
• image属性：
• textarea元素的maxlength属性和wrap属性：maxlength规定可输入最大的内容，wrap在测试时，hard和soft属性没什么区别
• input还添加了多个新的type，之前按整理过

表单验证

• 自动验证：可以使用那个pattern添加正则进行验证
• 取消验证：
  • 通过对form添加novalidate=“true”;属性来关闭整个表单验证
  • 关闭部分表单的验证，可以在需要关闭的地方添加formnovalidate=“true”;
• 显示验证：form元素与input元素（包括select元素与textarea元素）都具有一个checkValidity方法，调用该方法可以显示地对表单内所有元素内容或单个元素内容进行有效性验证，checkValidity方法将验证结果用Boolean的形式返回
  • 使用的话，就是通过js选取对应的元素，调用checkValidity方法进行验证，例如：如果input的type=email，那么如果输入格式符合email格式就返回true，否则返回false

增强的页面元素

• figure和figcaption：figure用来表示网页上一块独立的内容，将其从网页上移除后不会对网页其他内容产生任何影响。figure元素所代表的内容可以是图片、统计图或代码示例。figure最多只有一个
• details元素与summary元素：details元素为一种用于标识该元素内部的子元素可以展开、收缩显示的元素，该元素有一个Boolean类型的open属性；summary元素从属于details元素，在用鼠标单击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或收缩。

<details>
<summary>123</summary>
<p>456</p>
</details>

• mark元素：页面中需要突出显示或高亮显示的（文本），默认的样式是，文字背景变成高亮的黄色
• progress元素：代表一个任务的完成进度
  <progress max="100" value="50"></progress>
• meter元素：规定范围内的数量值

<meter value="50" min="0" max="100" low="5" high="15" optimum="10"></meter>

• dialog元素：代表一个对话框，默认为隐藏状态，可以通过js控制
• 改良的a元素：对a元素添加了downlode属性
• 改良的ol列表：添加了start属性与reversed属性，可以规定标号开始值和是否需要反向编号
• 改良的dl列表：一个专门用来定义术语的列表，具体没用过
• cite元素：表示作品的标题，H5中明确规定不能用cite元素表示包括任何人名（规定）而已
• 重新定义的small元素：small元素的字体会明显小于其他字体，通常用在诸如免责声明、注意事项、法律规定、与版权相关等法律性声明文字中，同时不允许应用在页面主内容中，只允许被单座辅助信息以inline方式内嵌在页面中。
• 安全性增强的iframe元素：
  • sandbox元素：对于iframe页面的限制（sandbox = “”/sandbox）
    • 插件被禁用
    • 表单被进值提交
    • js代码被禁止运行
    • 外部链接被禁用
    • 不同端口或域名的加载被禁止，禁止交互，禁止使用cookie或WebStorage
  • sandbox = “allow-forms”：允许提交表单
  • sandbox = “allow-script”：允许js脚本代码执行客户端的交互，同时也会带来风险（例如：来自不同服务器的内容）
  • sandbox = “allow-same-origin”：允许加载来自服务端的内容，允许js和服务端通信，允许使用cookie或web Storage内容
  • sandbox = “allow-top-navigation”：允许使用超链接导航到其他页面
• 增强的script元素：新增async属性和defer属性（非同步 推迟）
  • async(非同步，即异步)：加载外部js文件时，加载完成后立即执行onload函数
  • defer（推迟）：加载外部js文件时，加载完成后顺序执行onload函数