HTML5中form表单新添加的属性

最新推荐文章于 2024-02-16 18:32:49 发布

原创最新推荐文章于 2024-02-16 18:32:49 发布 · 1.7k 阅读

CC 4.0 BY-SA版权

本文深入解析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>