h5中的表单和存储

1.在Html5中:
        (1).表单仍然使用<form>元素作为容器,我们可以在其中设置基本的提交特性
            form的action指向一个服务器地址(接口)
       (2).当用户或开发人员提交页面时,表单仍然用于向服务端发送表单中控件的值
            注意表单项的name属性必须有值,服务器才能获取表单
       (3).所有之前的表单控件都保持不变
        (4).仍然可以使用脚本操作表单控件

2.表单新增的属性可以分成两类:

提交类:formaction,formmcthod,formtype

控制类:required,antofocus,labels

(1) form属性:

在H5之前,表单内所有的从属标签(下级标签),必须书写在form标签内部。

H5:允许标签写在任何地方,但是,需要做两步操作:(1)给form设置一个id(2)给元素设置form属性,form属性的值就是form id属性的值。

<form action="" id="testForm">
    请输入日期:<input name="date" type="text"/>
    <input type="submit" value="提交"/>
</form>
请输入密码:<input form="testForm"name="psd"type="password"/>

(2) formation

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

H5可以为每一个submit设置不同的action,是通过设置formaction属性来实现的。

<form id="testForm">
    请输入日期:<input name="date" type="text"/>
    请输入密码:<input form="testForm" name="psd" type="password"/>
    <input type="submit" value="提交1"formaction="xx.api"/>
    <input type="submit" value="提交2"formaction="xx2.api"/>
</form>

(3)formmethod

<form>
    请输入日期:<input name="date" type="text"/>
    请输入密码:<input name="psd" type="password"/>
    <input type="submit" value="提交1"  formmethod="GET"/>
</form>

(4) formenctype 编码方式

<form>
    请输入日期:<input name="date" type="text"/>
    请输入密码:<input name="psd" type="password"/>
    <input type="submit" value="提交1"  formenctype="text/plain"/>
</form>

(5) autofocus

为输入框或者按钮添加autofocus属性,当页面打开时,该元素自动获取光标焦点。

注意:如果对多个元素设置了autofocus,则只对第一个设置了autofocus的元素生效。

<form>
    请输入日期:<input name="date" type="text"/>
    请输入密码:<input name="psd" type="password" />
    <input type="submit" value="提交1"formtarget="_blank" autofocus/>
</form>

(6)required

如果在输入框设置了该属性,在输入框没有输入内容的时候,点击提交按钮,会提示“请填写此字段。”

<form>
    请输入日期:<input name="date" type="text" required/>
    请输入密码:<input name="psd" type="password" />
    <input type="submit" value="提交1" formtarget="_blank" autofocus/>
</form>

(7)labels

labels它的属性值是一个notelist

<form action="" id="testForm">
    <div>
        <label for="data">请输入日期:</label><input id="data" type="text"/><br>
    </div>
    <div>
        <label for="psd">请输入密码:</label> <inputform="testForm"id="psd"type="password"/>
        <label for="psd"></label>
    </div>
    <input type="button" οnclick="valiDate()" value="提交"/>
</form>
</body>
<script>
    function valiDate(){
        var psd = document.getElementById("psd");
        psd.labels[1].innerHTML = "密码";
        psd.labels[1].setAttribute("style","font-size:9px;color:yellow")
    }
</script>

3.表单新增的type属性

          type:number          :  只能包含数字的输入框
          type:color                     :  颜色选择器
          type:datetime             :  显示完整日期(移动端浏览器支持)
          type:datetime-local  :  显示完整日期,不含时区
          type:time            :  显示时间,不含时区
          type:date            :  显示日期

          type:tel                  :电话     pattern : 正则验证 
          type:week            :  显示周
          type:month           :  显示月

        这里我个人认为这些新增的属性都没有什么用,第一他们的样式都不好看,我们都可以用js来把这些样式还原,甚至写的跟好看,所以我们只要记住这些东西和知道怎么用就行了,没有必要去深究。

 4.接下来我们来讲存储

说到存储:wed项目中的存储有哪些:

                  服务器存储 

                   数据库存储:存储的是项目的核心技术

                  session存储  :存储当前用户的信息  

                  客户端存储    :cookie存储,大小限制在4kb 

                 IndexedDB技术:索引数据库 (IndexedDB) API(作为 HTML5 的一部分)对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据,使传统在线 Web 应用程序(比如移动 Web 应用程序)能够更快地运行和响应。

h5中的存储:(两种)

localStorage(本地存储)e 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。

存储方式:
以键值对(Key-Value)的方式存储,永久存储,永不失效,除非手动删除。

HTML5新方法,不过IE8及以上浏览器都兼容。

生命周期:持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。

存储的信息在同一域中是共享的。

当本页操作(新增、修改、删除)了localStorage的时候,本页面不会触发storage事件,但是别的页面会触发storage事件。

大小:据说是5M(跟浏览器厂商有关系)

在非IE下的浏览中可以本地打开。IE浏览器要在服务器中打开。

localStorage本质上是对字符串的读取,如果存储内容多的话会消耗内存空间,会导致页面变卡

localStorage受同源策略的限制

常用的API:

getItem //取记录

setIten//设置记录

removeItem//移除记录

key//取key所对应的值

clear//清除记录

sessionStorage(回话存储)

HTML5 的本地存储 API 中的 localStorage 与 sessionStorage 在使用方法上是相同的,区别在于 sessionStorage 在关闭页面后即被清空,而 localStorage 则会一直保存。

 这两个的API是一样的,用法也是一样的

猜你喜欢

转载自www.cnblogs.com/zhangli123/p/12111789.html