form表单 html5 传递参数 h5提交form表单

转载

detailtoo 2023-07-17 22:30:00

文章标签 form表单 html5 传递参数表单数据输入框 文章分类 HTML5 移动开发

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中的存储：（两种）