H5的非主体结构及控制类

3非主体结构元素

（1）  header（页眉）标签

一般来防治整个页面的标题。比如说一个新闻页面，header一般放新闻的标题。如果是一个官网地址，一般header用来放logo和网站导航。

（2）  footer（页脚） 标签

一般用来放置脚注，主要包含：作者信息、copyright。

 

（3）  address（地址）标签

一般用来呈现联系信息主要包括：网站的联系方式、电子邮箱、联系地址、电话号码等等。

<header>
    <div class="logo">这是放logo的区域</div>
    <nav>
        <ul>
            <li><a>首页</a></li>
            <li><a>教程</a></li>
        </ul>
    </nav>
</header>
<article>
    <h2>html5 的教程</h2>
    <p>详细教程，请访问华点网站<a href="http://www.huadianedu.com">点击跳转</a></p>
</article>
<footer>
    <p>copyright  2017  华电软件学院</p>
    <address>
        <p>啦啦啦德玛西亚！</p>
        <p>啦啦啦德玛西亚！</p>
        <p>啦啦啦德玛西亚！</p>
    </address>
</footer>

 

4表单相关新增元素和属性

4.1表单元素新增和废弃的属性                             

表单新增的属性可以分成两类：

  提交类：提交给服务器设置的属性，formtion、formmethod、formtype

控制类：required、autoofocus、labels。

4.1.1 form属性

           在H5之前，表单内所有的从属标签（下级标签），必须书写在form标签内部。

           H5：允许标签写在任何地方需要做两部操作：1、给form设置一个id；给元素设置form属性，form属性的值就是form Id属性的值

<form action="XXX.api"id="testForm">
    请输入账号：<input type="text" name="date"><br>
    <input type="submit"value="提交">
</form>
请输入密码：<input form="testForm"type="password" name="psd"><br>

 

 

4.1.2formaction

  

在H5之前，表单内所有的submit,只能提交到一个统一的地址，也就是指定的Action。

H5：可以为每个submit指定一个action，是通过formaction属性来实现的

<form id="testForm">
    请输入账号：<input type="text" name="date"><br>
    请输入密码：<input form="testForm" name="psd" type="password"><br>
    <input type="submit"value="提交0"formaction="XX0.api">
    <input type="submit"value="提交1"formaction="XX0.api">
</form>

 

 

4.13formmethod

<form id="testForm"method="post">
    请输入账号：<input type="text" name="date"><br>
    请输入密码：<input form="testForm" name="psd" type="password"><br>
    <input type="submit"value="提交0"formmethod="post">
    <input type="submit"value="提交1"formmethod="get">
</form>

在H5之前只能写在form里，现在可以写在按表单里（在此我两种都写了）

隐藏显示提交的数据

 

 

4.14formenctype：编码方式

<form id="testForm"enctype="text/plain">
    请输入账号：<input type="text" name="date"><br>
    请输入密码：<input form="testForm" name="psd" type="password"><br>
    <input type="submit"value="提交0"formenctype="text/plain">
    <input type="submit"value="提交1"formenctype="text/plain">
</form>

 

在H5之前只能写在form里，现在可以写在按表单里（在此我两种都写了）

隐藏显示提交的数据

 

 

4.15formtarget

<form id="testForm"target="">
    请输入账号：<input type="text" name="date"><br>
    请输入密码：<input form="testForm" name="psd" type="password"><br>
    <input type="submit"value="提交0"formtarget="_self">
    <input type="submit"value="提交1"formtarget="_blank">
</form>

在H5之前只能写在form里，现在可以写在按表单里（在此我两种都写了）

隐藏显示提交的数据

 

 

 

 

控制类

 

4.16autofocus

<form id="testForm">
    请输入账号：<input type="text" name="date"><br>
    请输入密码：<input form="testForm" name="psd" type="password"autofocus><br>
    <input type="submit"value="提交0"formtarget="_self">
    <input type="submit"value="提交1"formtarget="_blank">
</form>

为输入框，按钮什么的，添加autofocus属性，当页面打开时，该元素将自动获取焦点。

注意：如果对多个元素同时设置了该属性，那么只有第一个有效。

 

 

 

4.17 required

<formid="testForm">
    请输入账号：<input type="text" name="date"required><br>
    请输入密码：<input form="testForm"name="psd"type="password"><br>
   <input type="submit"value="提交0"formtarget="_self">
    <input type="submit"value="提交1"formtarget="_blank">
</form>

如果输入框输入了该属性，提交时，该框若为空，则弹出提示框