2021-06-04 表单的常用属性

1、form表单的常用属性

    表单的作用：

    表单在网页中主要负责数据采集功能。用于采集用户输入的信息，并通过from标签的提交操作，把采集到的信息提交到服务器进行处理。

    表单域：

包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框。

    form   属性

    action 属性用来规定当提交表单时，向何处发送表单数据

    当提交表单后，页面会立即跳转到action属性指定的URL地址

    target  属性用来规定在何处打开 action URL 中有五个值  

     _blank  在新窗口中打开

    _self 默认，在相同的框架中打开

    _parent  在父框架几种打开

    _top 在整个窗口中打开

    framename 在指定的框架中打开

    method属性用来规定以何种方式把表单数据提交到 action URL

    enctype属性用来规定在发送表单数据之前如何对数据进行编码

2、阻止表单的默认提交行为

    表单的同步提交及缺点

        通过点击submit按钮，触发表单提交的操作，从而使页面跳转到 action URL的行为，叫做表单的同步提交

    缺点：

    页面会发生跳转

    页面之前的状态和数据会丢失

    解决方案： 表单只负责采集数据，ajax负责将数据提交到服务器

    element.preventDefault（）

3、快速的获取表单数据

    serialize()方法

serialize() 方法通过序列化表单值，创建 URL 编码文本字符串。

您可以选择一个或多个表单元素（比如 input 及/或 文本框），或者 form 元素本身。

序列化的值可在生成 AJAX 请求时用于 URL 查询字符串中。

4、模板引擎

它根据程序员指定的模板结构和数据，自动生成一个完整的HTML页面

    优点：

        减少了字符串的拼接操作

        使代码结构更清晰

        使代码更易于阅读与维护