HTML5中form表单新添加的属性

本文深入解析HTML表单的提交方式,包括GET与POST的区别,如何使用formaction与formmethod属性进行多服务器分类提交,以及input元素的高级用法,如自动聚焦、自动匹配关闭、最大输入长度设置和与datalist元素的关联。
通常form表单需要method和action两种属性 action指明了表单的提交路径 method指明了提交的方法 有get和post两种 get :用?关联数据 用&连接多个数据 缺点:数据传输量有限 安全性问题(账户密码等各种敏感信息容易被人获取) post:提交之后不会显示任何信息 数据传输量够大 隐藏敏感信息 form表单外的input也可以提交,可通过以下方法
<input type="text" name="name" value="ccy" hidden form="jredu">
<!--外部input提交到服务器 需要给input添加form属性和form标签的id值保持一致-->
<form action="ccy.php" method="get" id="jredu">
    <input type="text" name="accound"><br>
    <input type="password" name="pwd"><br>
    <input type="submit">
</form>

可以通过formaction formmethod分类提交到不同的服务器上

<form>
    <!--分多个服务器提交
    formaction 要提交的服务器
    formmethod get/post  加密/不加密
    -->
    <input type="text" name="accound" autocomplete="off"><br>
    <input type="password" name="pwd"><br>
    <input type="text" list="cars">
    <datalist id="cars">
        <option value="BMW"></option>
        <option value="Ford"></option>
        <option value="Audi"></option>
    </datalist>
    <br>
    <!--用list跟datalist关联 是输入框具有自动匹配的功能-->
    <input type="submit" value="普通员工"
           formaction="worker.php"
           formmethod="get"
    >
    <input type="submit" value="公司领导"
           formaction="leader.php"
           formmethod="post"
    >
    <input type="submit" value="外部人员"
           formaction="outer.php"
           formmethod="get"
    >
</form>

autofocus自动获取焦点
autocomplete自动匹配 off关掉自动匹配
maxlength 可输入的最大长度
list属性 跟datalist元素关联 可以使输入框自带匹配功能

<form>
    <input type="text" list="cars">
    <datalist id="cars">
        <option value="BMW"></option>
        <option value="Ford"></option>
        <option value="Audi"></option>
    </datalist>
    <br>
    </form>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值