1.本发明属于网页表单布局调整技术领域，具体涉及一种网页表单布局的调整方法、装置、电子设备及存储介质。
背景技术：2.目前，用户在调整完各个网页的尺寸后，网页页面上表单组件的布局方式并不会发生改变，其布局方式主要分为：均分列布局和行内依次布局展示，其中，均分列布局是按列平均分配布局空间，其存在以下不足：虽然布局整齐，但无法合理利用空间，只能按照最长字数的label(表单标签名称)宽度设置所有列的宽度，这会造成表单占据过多的页面空间，从而浪费网页空间资源；而表单行内依次布局则是不做特殊布局处理，依次将表单项排列展示，该布局方式虽然能让空间利用率提升，但却使表单布局杂乱，使得用户不易阅读；因此，提供一种网页表单布局的调整方法，从而使表单布局整齐，且能够充分利用页面空间迫在眉睫。
技术实现要素：3.本发明的目的是提供一种网页表单布局的调整方法、装置、电子设备及存储介质，以解决现有布局方式所存在的无法合理利用空间以及布局杂乱的问题。
4.为了实现上述目的，本发明采用以下技术方案：
5.第一方面，本发明提供了一种网页表单布局的调整方法，包括：
6.响应于用户进行网页页面尺寸调整操作时，获取调整后的网页页面的分辨率；
7.基于所述分辨率，得到目标表单在所述调整后的网页页面中的布局列数，以便基于所述布局列数得到表单模板，其中，所述目标表单为尺寸调整前的网页页面中的表单；
8.根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单；
9.计算所述渲染表单中每一列内各个表单标签名称在调整后的网页页面中的宽度值，并将每一列中的最大宽度值作为对应列的最大列宽；
10.获取所述目标表单的表单域宽度，并基于所述表单域宽度以及所述渲染表单中每一列的最大列宽，调整所述渲染表单，得到调整后的渲染表单；
11.将所述调整后的渲染表单渲染到调整后的网页页面中，以完成所述目标表单在调整后的网页页面中布局的调整。
12.基于上述公开的内容，本发明在用户进行网页页面尺寸操作时，通过调整后的网页页面的分辨率，来配置表单的布局列数，从而得到表单模板；然后，即可基于布局列数，将原网页页面中表单内的表单标签名称划分至表单模板的每一列中，从而得到渲染表单；接着，再计算出渲染表单中每一列的最大列宽，并联合表单域宽度，进行渲染表单列宽的调整，以得到调整后的渲染表单，最后，将调整后的渲染表单渲染至调整后的网页页面中，即可完成表单布局的调整；通过上述设计，本发明通过网页页面的分辨率来配置表单列参数，
从而决定表单在不同分辨率下的展示列数，并且优化每一列展示的最佳宽度，由此，达到了充分利用页面空间以及整齐布局的效果。
13.在一个可能的设计中，根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单，包括：
14.基于所述布局列数，对所述目标表单中的表单标签名称进行数据重构，得到列表单标签数组，其中，所述列表单标签数组中的元素总个数等于所述布局列数，且每个元素包括至少一个表单标签名称；
15.将所述列表单标签数组中的第i个元素，存储至所述表单模板的第i列中，其中，i为正整数，且i从1开始；
16.当i从1循环至n时，得到所述渲染表单，其中，n为所述列表单标签数组中元素的总个数。
17.基于上述公开的内容，本发明通过对目标表单中的表单标签名称进行数据重构，从而得到元素总个数与布局列数相等的列表单标签数组，最后，将列表单标签数组中元素的排列顺序作为该元素在表单模板中的存储列数，并按照前述规则将列表单标签数组中所有元素存储至表单模板中后，即可得到渲染表单。
18.在一个可能的设计中，基于所述布局列数，对所述目标表单中的表单标签名称进行数据重构，得到列表单标签数组，包括：
19.获取所述网页页面的表单项配置数据，其中，所述表单项配置数据包括多个按照顺序排列的表单标签名称；
20.基于所述布局列数，创建一个元素内容为空的二维数组，其中，所述二维数组中的元素总个数等于所述布局列数；
21.计算所述表单项配置数据中各个表单标签名称的排序序号，与所述二维数组中的元素总个数之间的余数，以将余数作为各个表单标签名称的存储序号，其中，余数为0对应的存储序号为m，m为所述布局列数，且任一存储序号用于表征对应表单标签名称在所述二维数组中存储的元素的排序号；
22.基于各个表单标签名称的存储序号，将各个表单标签名称存储至所述二维数组中，得到所述列表单标签数组。
23.基于上述公开的内容，本发明公开了数据重构的具体过程，即基于表单标签名称的排序顺序与二维数组中元素总个数之间的余数，来将表单标签名称存储至二维数组中；即若一表单标签名称与元素总个数的余数为1，则将该表单标签名称存储至二维数组的第一个元素中，同理，余数为2，则存储至二维数组的第二个元素中，而当余数为0时，则存储至二维数组的第m个元素中(如，布局列数为3，则存储至第3个元素中)；由此，即可得到列表单标签数组。
24.在一个可能的设计中，计算所述渲染表单中每一列内各个表单标签名称在调整后的网页页面中的宽度值，包括：
25.获取所述调整后的网页页面对应的dom树中的dom节点；
26.按照预设规则，将所述渲染表单中每一列内的各个表单标签名称，存储至所述dom节点中，得到多个标签节点，其中，所述预设规则为一个表单标签名称对应一个dom节点；
27.将所述多个标签节点中的每个标签节点渲染至所述调整后的网页页面中，以将每
个标签节点在调整后的网页页面中的宽度值，作为每个表单标签名称在调整后的网页页面中的宽度值。
28.基于上述公开的内容，将渲染表单中每一列内各个表单标签名称存储至一dom节点中，并将dom节点渲染至调整后的网页页面中，即可将每个dom节点在调整后的网页页面中的宽度值，作为对应表单标签名称的宽度值。
29.在一个可能的设计中，基于所述表单域宽度以及所述渲染表单中每一列的最大列宽，调整所述渲染表单，包括：
30.计算所述渲染表单中每一列的最大列宽与所述表单域宽度的总和，得到所述渲染表单中每一列的最佳列宽；
31.将所述渲染表单中每一列的列宽，调整至每一列的最佳列宽，得到所述渲染表单。
32.在一个可能的设计中，基于所述分辨率，得到目标表单在所述调整后的网页页面中的布局列数，包括：
33.获取配置数据库，其中，所述配置数据库中包括多个页面分辨率，以及所述多个页面分辨率中每个页面分辨率对应的配置列数；
34.判断所述网页页面对应的浏览引擎中是否存在用户配置数据；
35.若否，则基于所述分辨率，在所述配置数据库中，查找出与所述分辨率对应的页面分辨率，以将查找出的页面分辨率对应的配置列数，作为所述布局列数。
36.在一个可能的设计中，所述用户配置数据包括：至少一个配置分辨率，以及至少一个配置分辨率中每个配置分辨率对应的用户配置列数；
37.其中，所述方法还包括：
38.若是，则将所述用户配置数据合并至所述配置数据库中，得到合并后的配置数据库，以便基于所述合并后的配置数据库，得到所述布局列数。
39.第二方面，本发明提供了一种网页表单布局的调整装置，包括：
40.分辨率获取单元，用于响应于用户进行网页页面尺寸调整操作时，获取调整后的网页页面的分辨率；
41.列数生成单元，用于基于所述分辨率，得到目标表单在所述调整后的网页页面中的布局列数，以便基于所述布局列数得到表单模板，其中，所述目标表单为尺寸调整前的网页页面中的表单；
42.划分单元，用于根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单；
43.列宽计算单元，用于计算所述渲染表单中每一列内各个表单标签名称在调整后的网页页面中的宽度值，并将每一列中的最大宽度值作为对应列的最大列宽；
44.表单调整单元，用于获取所述目标表单的表单域宽度，并基于所述表单域宽度以及所述渲染表单中每一列的最大列宽，调整所述渲染表单，得到调整后的渲染表单；
45.渲染单元，用于将所述调整后的渲染表单渲染到调整后的网页页面中，以完成所述目标表单在调整后的网页页面中布局的调整。
46.第三方面，本发明提供了另一种网页表单布局的调整装置，以装置为电子设备为例，包括依次通信相连的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如第一方面或第一
方面中任意一种可能设计的所述网页表单布局的调整方法。
47.第四方面，本发明提供了一种存储介质，所述存储介质上存储有指令，当所述指令在计算机上运行时，执行如第一方面或第一方面中任意一种可能设计的所述网页表单布局的调整方法。
48.第五方面，本发明提供了一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行如第一方面或第一方面中任意一种可能设计的所述网页表单布局的调整方法。
附图说明
49.图1为本发明提供的网页表单布局的调整方法的步骤流程示意图；
50.图2为本发明提供的表单标签名称与二维数组的分配示意图；
51.图3为本发明提供的列表单标签数组的分配示意图；
52.图4为本发明提供的网页表单布局的调整装置的结构示意图；
53.图5为本发明提供的电子设备的结构示意图。
具体实施方式
54.下面结合附图及具体实施例来对本发明作进一步阐述。在此需要说明的是，对于这些实施例方式的说明虽然是用于帮助理解本发明，但并不构成对本发明的限定。本文公开的特定结构和功能细节仅用于描述本发明的示例实施例。然而，可用很多备选的形式来体现本发明，并且不应当理解为本发明限制在本文阐述的实施例中。
55.应当理解，尽管本文可能使用术语第一、第二等等来描述各种单元，但是这些单元不应当受到这些术语的限制。这些术语仅用于区分一个单元和另一个单元。例如可以将第一单元称作第二单元,并且类似地可以将第二单元称作第一单元，同时不脱离本发明的示例实施例的范围。
56.应当理解，对于本文中可能出现的术语“和/或”，其仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，a和/或b，可以表示：单独存在a，单独存在b，同时存在a和b三种情况；对于本文中可能出现的术语“/和”，其是描述另一种关联对象关系，表示可以存在两种关系，例如，a/和b，可以表示：单独存在a，单独存在a和b两种情况；另外，对于本文中可能出现的字符“/”，一般表示前后关联对象是一种“或”关系。
57.实施例
58.参见图1所示，本实施例第一方面所提供的网页表单布局的调整方法，可在各个网页尺寸变化后，保证表单的整齐布局以及最大化空间利用；其中，前述调整方法可以但不限于在浏览器侧运行，当然，前述执行主体并不构成对本技术实施例的限定；具体的，前述调整方法可以但不限于包括如下步骤s1～s6所示。
59.s1.响应于用户进行网页页面尺寸调整操作时，获取调整后的网页页面的分辨率；具体应用时，浏览器在检测到用户缩放网页的操作后，即可获取缩小或放大后的网页页面的分辨率，以便后续基于分辨率进行表单列数的配置，达到整齐布局的效果，其中，表单列数的配置过程如下述步骤s2所述。
60.s2.基于所述分辨率，得到目标表单在所述调整后的网页页面中的布局列数，以便
基于所述布局列数得到表单模板，其中，所述目标表单为尺寸调整前的网页页面中的表单；具体应用时，本实施例在浏览器中预设有各个页面分辨率下对应的配置列数，以便在获取到分辨率后，进行配置列数的匹配，其中，匹配过程如下述步骤s21～s23所示。
61.s21.获取配置数据库，其中，所述配置数据库中包括多个页面分辨率，以及所述多个页面分辨率中每个页面分辨率对应的配置列数；具体应用时，配置数据库预先存储至浏览器中，在使用时调用即可；另外，配置数据库还可存储至浏览器所在客户端和/或对应的服务器中，在使用时读取即可，当然，配置数据库的存储位置在此不做限定，可根据实际使用而具体设定。
62.s22.判断所述网页页面对应的浏览引擎中是否存在用户配置数据；具体应用时，用户配置数据表示用户的自定义数据，即在不同分辨率下，用户为该分辨率配置不同的展示列数；当然，该用户配置数据是在用户进行页面调整前对页面的浏览引擎进行设置得到的；可选的，举例用户配置数据可以但不限于包括：至少一个配置分辨率，以及至少一个配置分辨率中每个配置分辨率对应的用户配置列数。
63.s23.若否，则基于所述分辨率，在所述配置数据库中，查找出与所述分辨率对应的页面分辨率，以将查找出的页面分辨率对应的配置列数，作为所述布局列数。
64.下述以一个实例来阐述前述步骤s21～s23：
65.假设配置数据库包括如下页面分辨率：
66.页面分辨率1：1680～1920，对应的配置列数为5列；页面分辨率2：1440～1680，对应的配置列数为4列；页面分辨率3：1366～1440，对应的配置列数为3列；页面分辨率4：1280～1366，对应的配置列数为3列。
67.当获取到的最大分辨率为1440，且不存在用户配置数据时，根据步骤s23可知，1440对应的配置列数为3列，因此，目标表单的布局列数为3列。
68.另外，若网页页面对应的浏览引擎中存在用户配置数据时，即可将用户配置数据合并至配置数据库中，得到合并后的配置数据库，以便基于所述合并后的配置数据库，得到所述布局列数；下述还是以一个实例来阐述：
69.假设用户配置数据为：
70.配置分辨率1：1680～1920，对应用户配置列数为4列；配置分辨率2：1440～1680，对应的用户配置列数为3列；因此，将该用户配置数据合并至配置数据库时，则是使用用户配置数据替换配置数据库中页面分辨率相同的各个数据，如，使用配置分辨率1替换页面分辨率1对应的数据，以及使用配置分辨率2替换页面分辨率2对应的数据；因此，合并后的配置数据库则变为：
71.配置分辨率1：1680～1920，对应的用户配置列数为4列；配置分辨率2：1440～1680，对应的用户配置列数为3列；页面分辨率3：1366～1440，对应的配置列数为3列；页面分辨率4：1280～1366，对应的配置列数为3列；当然，在得到合并后的配置数据库后，布局列数的匹配过程与前述步骤s23原理一致，于此不再赘述。
72.另外，在本实施例中，若获取的分辨率超出了配置数据库中的最大页面分辨率，那么布局列数则为最大页面分辨率对应的配置列数；同理，若获取的分辨率小于配置数据库中的最小页面分辨率，那么布局列数则为最小页面分辨率对应的配置列数。
73.在得到目标表单在调整后的网页页面中的布局列数之后，即可进行表单的调整
(分别是表单标签名称在每一列的分配以及列宽的调整)，如下述步骤s3～s5所示。
74.具体应用时，是先基于布局列数，构建一表单模板，然后将目标表单中的表单标签名称划分至表单模板的每一列中，从而得到渲染表单；最后，再优化渲染表单每一列的列宽，从而使渲染表单达到充分利用页面空间的目的；具体的，渲染表单的构建如下述步骤s3所示。
75.s3.根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单；具体应用时，可以但不限于先对目标表单中的表单标签名称进行数据重构，得到符合布局列数的数据，然后再将重构后的数据划分至表单模板的每一列中，如下述步骤s31～s33所示。
76.s31.基于所述布局列数，对所述目标表单中的表单标签名称进行数据重构，得到列表单标签数组，其中，所述列表单标签数组中的元素总个数等于所述布局列数，且每个元素包括至少一个表单标签名称；具体应用时，数据重构过程如下述步骤s31a～s31d所示。
77.s31a.获取所述网页页面的表单项配置数据，其中，所述表单项配置数据包括多个按照顺序排列的表单标签名称；具体应用时，表单项配置数据为一个一维数组，内部存储有各个按照展示顺序排列的表单标签名称；例如，表单项配置数据let columns的表示如下：
78.let columns＝[
[0079]
{label:
‘
姓名’,...},
[0080]
{label:
‘
正式转正年限’,...},
[0081]
{label:
‘
申请理由’,...},
[0082]
{label:
‘
兴趣爱好’,...},
[0083]
{label:
‘
当前职位从业年限’,...}
[0084]
]
[0085]
因此，前述表单项配置数据则包括5个表单标签名称，且排序第一为“姓名”。
[0086]
在得到目标表单的表单标签名称后，即可进行数据的重构，如下述步骤s31b～s31d所示。
[0087]
s31b.基于所述布局列数，创建一个元素内容为空的二维数组，其中，所述二维数组中的元素总个数等于所述布局列数；具体应用时，则是建立一个元素总个数为布局列数的二维数组；可选的，二维数组let list的表示形式可以但不限于为：
[0088]
let list＝[[l1],[l2],[l3]...]。
[0089]
在得到二维数组后，即可将表单项配置数据中的各个表单标签名称存储至二维数组的各个元素中，从而完成数据重构，得到列表单标签数组；具体的，存储过程如下述步骤s31c和步骤s31d所示。
[0090]
s31c.计算所述表单项配置数据中各个表单标签名称的排序序号，与所述二维数组中的元素总个数之间的余数，以将余数作为各个表单标签名称的存储序号，其中，余数为0对应的存储序号为m，m为所述布局列数，且任一存储序号用于表征对应表单标签名称在所述二维数组中存储的元素的排序号。
[0091]
s31d.基于各个表单标签名称的存储序号，将各个表单标签名称存储至所述二维数组中，得到所述列表单标签数组。
[0092]
下述在前述举例的基础上，列举一个实例来阐述前述步骤s31c和步骤s31d。
[0093]
前述布局列数为3，那么二维数组则可表示为：
[0094]
let list＝[[l1],[l2],[l3]]，即二维数组依次包含l1、l2和l3三个元素。
[0095]
此时，表单项配置数据中各个表单标签名称的排序序号与二维数组中元素总个数的余数分别为：
[0096]
表单标签名称“姓名”，排序序号为1，与二维数组中元素总个数之间的余数为：1，因此，表单标签名称“姓名”的存储序号为1。
[0097]
表单标签名称“正式转正年限”，排序序号为2，与二维数组中元素总个数之间的余数为：2，因此，表单标签名称“正式转正年限”的存储序号为2。
[0098]
表单标签名称“申请理由”，排序序号为3，与二维数组中元素总个数之间的余数为：0，因此，表单标签名称“申请理由”的存储序号为m，且m＝3。
[0099]
表单标签名称“兴趣爱好”，排序序号为4，与二维数组中元素总个数之间的余数为：1，因此，表单标签名称“兴趣爱好”的存储序号为1。
[0100]
表单标签名称“当前职业从业年限”，排序序号为5，与二维数组中元素总个数之间的余数为：2，因此，表单标签名称“当前职业从业年限”的存储序号为2。
[0101]
因此，按照步骤s31c和步骤s31d的规则，各个表单标签名称的存储序号，则代表该表单标签名称在二维数组中存储的元素的排序号；为便于理解，参见图2所示，即表单标签名称“姓名”存储至二维数组的第一个元素中(即存储至l1中)，表单标签名称“正式转正年限”存储至二维数组的第二个元素中(即存储至l2中)，表单标签名称“申请理由”存储至二维数组的第三个元素中(即存储至l3中)，表单标签名称“兴趣爱好”存储至二维数组的第一个元素中，表单标签名称“当前职业从业年限”存储至二维数组的第二个元素中，存储完成后，即可得到列表单标签数组。
[0102]
可选的，列表单标签数组以list进行表示，其对应的数据结构为：
[0103]
list＝[
[0104]
[{label:
‘
姓名’,...}，{label:
‘
兴趣爱好’,...}],
[0105]
[{label:
‘
正式转正年限’,...}，{label:
‘
当前职位从业年限’,...}],
[0106]
[{label:
‘
申请理由’,...}],
[0107]
]。
[0108]
在得到列表单标签数组后，即可将列表单标签数组中的元素存储至表单模板中，从而得到渲染表单，如下述步骤s32和步骤s33所示。
[0109]
s32.将所述列表单标签数组中的第i个元素，存储至所述表单模板的第i列中，其中，i为正整数，且i从1开始。
[0110]
s33.当i从1循环至n时，得到所述渲染表单，其中，n为所述列表单标签数组中元素的总个数。
[0111]
具体应用时，结合前述列表单标签数组list进行步骤s32和步骤s33的阐述，同时，参见图3所示，即将列表单标签数组list的第一个元素(l1)存储至表单模板的第一列中，将列表单标签数组list的第二个元素(l2)存储至表单模板的第二列中，以及将列表单标签数组list的第三个元素(l3)存储至表单模板的第三列中，存储完成后，即可得到渲染表单。
[0112]
在得到渲染表单后，还需要调整渲染表单中每一列的列宽，使其达到最佳列宽，从而保证页面空间的最大化利用；具体的，列宽调整过程如下述步骤s4和步骤s5所示。
[0113]
s4.计算所述渲染表单中每一列内各个表单标签名称在调整后的网页页面中的宽度值，并将每一列中的最大宽度值作为对应列的最大列宽；具体应用时，是将各个表单标签名称渲染至调整后的网页页面中，来得到对应的宽度值，其中，宽度值计算过程如下述步骤s41～s43所示。
[0114]
s41.获取所述调整后的网页页面对应的dom树中的dom节点；具体应用时，网页页面显示的内容实质为dom树上节点的内容，因此，网页页面中所有的html(hypertext mark-up language，超文本标记语言)文档可以被解析成一个dom((document object model，文档对象模型)树，而dom树上的节点则用于存储各个表单标签名称。
[0115]
在得到多个dom节点后，即可按照一个表单标签名称对应一个dom节点的规则，将表单标签名称存储至dom节点中，最后，将各个dom节点渲染至调整后的网页页面中，即可得到每个表单标签名称在调整后的网页页面中的宽度值，如下述步骤s42和步骤s43所示。
[0116]
s42.按照预设规则，将所述渲染表单中每一列内的各个表单标签名称，存储至所述dom节点中，得到多个标签节点，其中，所述预设规则为一个表单标签名称对应一个dom节点。
[0117]
s43.将所述多个标签节点中的每个标签节点渲染至所述调整后的网页页面中，以将每个标签节点在调整后的网页页面中的宽度值，作为每个表单标签名称在调整后的网页页面中的宽度值；具体应用时，将多个标签节点渲染至调整后的网页页面中，通过读取调整后的网页页面的源文件，即可得出每个标签节点在该页面中的宽度值，由此，即可将每个标签节点在该页面中的宽度值作为对应表单标签名称的宽度值。
[0118]
在得到各个表单标签名称在调整后的网页页面的宽度值后，即可将每列中的最大宽度值作为该列的最大列宽，从而利用最大列宽进行渲染表单中每一列的列宽的调整，如下述步骤s5所示。
[0119]
s5.获取所述目标表单的表单域宽度，并基于所述表单域宽度以及所述渲染表单中每一列的最大列宽，调整所述渲染表单，得到调整后的渲染表单；具体应用时，渲染表单的调整过程如下述步骤s51和步骤s52所示。
[0120]
s51.计算所述渲染表单中每一列的最大列宽与所述表单域宽度的总和，得到所述渲染表单中每一列的最佳列宽。
[0121]
s52.将所述渲染表单中每一列的列宽，调整至每一列的最佳列宽，得到所述渲染表单；具体应用时，表单域宽度为预设值，因此，将渲染表单中每一列的最大列宽与表单域宽度相加，即可得到每一列的最佳列宽，最后，将渲染表单中的每一列的列宽分别调至对应的最佳列宽后，即可完成渲染表单的调整。
[0122]
在得到调整后的渲染表单后，将该表单渲染至调整后的网页页面中，即可完成目标表单在调整后的网页页面中布局的调整，如下述步骤s6所示。
[0123]
s6.将所述调整后的渲染表单渲染到调整后的网页页面中，以完成所述目标表单在调整后的网页页面中布局的调整；具体应用时，对于各个表单标签名称对应内容，可一起存储至表单模板中，如，假设表单项配置数据为：
[0124]
let columns＝[
[0125]
{label:
‘
姓名’，张三.},
[0126]
{label:
‘
正式转正年限’，5年},
[0127]
{label:
‘
申请理由’，高端技术人才},
[0128]
{label:
‘
兴趣爱好’，上网},
[0129]
{label:
‘
当前职位从业年限’，15年}
[0130]
]。
[0131]
因此，将各个表单标签名称对应的内容进行数据重构，得到的列表单标签数组为：
[0132]
list＝[
[0133]
[{label:
‘
姓名’,张三}，{label:
‘
兴趣爱好’,上网}],
[0134]
[{label:
‘
正式转正年限’,5年}，{label:
‘
当前职位从业年限’,15年}],
[0135]
[{label:
‘
申请理由’,高端技术人才}],
[0136]
]。
[0137]
由此，即可将各个表单标签名称对应的内容存储至表单模板中，从而同时完成列宽的调整，最后，得到调整后的渲染表单，以达到在不影响表单标签名称对应内容展示的情况下，保证目标表单在调整后的网页页面中的整齐布局，以及页面空间的最大化利用。
[0138]
由此通过前述步骤s1～s6所详细描述的网页表单布局的调整方法，本发明通过网页页面的分辨率来配置表单列参数，从而决定表单在不同分辨率宽度下的展示列数，并且优化每一列展示的最佳宽度，由此，达到了充分利用页面空间并整齐布局的效果。
[0139]
如图4所示，本实施例第二方面提供了一种实现实施例第一方面中所述的网页表单布局的调整方法的硬件装置，包括：
[0140]
分辨率获取单元，用于响应于用户进行网页页面尺寸调整操作时，获取调整后的网页页面的分辨率。
[0141]
列数生成单元，用于基于所述分辨率，得到目标表单在所述调整后的网页页面中的布局列数，以便基于所述布局列数得到表单模板，其中，所述目标表单为尺寸调整前的网页页面中的表单。
[0142]
划分单元，用于根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单。
[0143]
列宽计算单元，用于计算所述渲染表单中每一列内各个表单标签名称在调整后的网页页面中的宽度值，并将每一列中的最大宽度值作为对应列的最大列宽。
[0144]
表单调整单元，用于获取所述目标表单的表单域宽度，并基于所述表单域宽度以及所述渲染表单中每一列的最大列宽，调整所述渲染表单，得到调整后的渲染表单。
[0145]
渲染单元，用于将所述调整后的渲染表单渲染到调整后的网页页面中，以完成所述目标表单在调整后的网页页面中布局的调整。
[0146]
本实施例提供的硬件装置的工作过程、工作细节和技术效果，可以参见实施例第一方面，于此不再赘述。
[0147]
如图5所示，本实施例第三方面提供了另一种网页表单布局的调整装置，以装置为电子设备为例，包括：依次通信相连的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如实施例第一方面所述的网页表单布局的调整方法。
[0148]
具体举例的，所述存储器可以但不限于包括随机存取存储器(random access memory，ram)、只读存储器(read only memory，rom)、闪存(flash memory)、先进先出存储
器(first input first output，fifo)和/或先进后出存储器(first in last out，filo)等等；具体地，处理器可以包括一个或多个处理核心，比如4核心处理器、8核心处理器等。处理器可以采用dsp(digital signal processing，数字信号处理)、fpga(field－programmable gate array，现场可编程门阵列)、pla(programmable logic array，可编程逻辑阵列)中的至少一种硬件形式来实现，同时，处理器也可以包括主处理器和协处理器，主处理器是用于对在唤醒状态下的数据进行处理的处理器，也称cpu(central processing unit，中央处理器)；协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。
[0149]
在一些实施例中，处理器可以在集成有gpu(graphics processing unit，图像处理器)，gpu用于负责显示屏所需要显示的内容的渲染和绘制，例如，所述处理器可以不限于采用型号为stm32f105系列的微处理器、精简指令集计算机(reduced instruction set computer,risc)微处理器、x86等架构处理器或集成嵌入式神经网络处理器(neural-network processing units，npu)的处理器；所述收发器可以但不限于为无线保真(wifi)无线收发器、蓝牙无线收发器、通用分组无线服务技术(general packet radio service，gprs)无线收发器、紫蜂协议(基于ieee802.15.4标准的低功耗局域网协议，zigbee)无线收发器、3g收发器、4g收发器和/或5g收发器等。此外，所述装置还可以但不限于包括有电源模块、显示屏和其它必要的部件。
[0150]
本实施例提供的电子设备的工作过程、工作细节和技术效果，可以参见实施例第一方面，于此不再赘述。
[0151]
本实施例第四方面提供了一种存储包含有实施例第一方面所述的网页表单布局的调整方法的指令的存储介质，即所述存储介质上存储有指令，当所述指令在计算机上运行时，执行如第一方面所述的网页表单布局的调整方法。
[0152]
其中，所述存储介质是指存储数据的载体，可以但不限于包括软盘、光盘、硬盘、闪存、优盘和/或记忆棒(memory stick)等，所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。
[0153]
本实施例提供的存储介质的工作过程、工作细节和技术效果，可以参见实施例第一方面，于此不再赘述。
[0154]
本实施例第五方面提供了一种包含指令的计算机程序产品，当所述指令在计算机上运行时，使所述计算机执行如实施例第一方面所述的网页表单布局的调整方法，其中，所述计算机可以是通用计算机、专用计算机、计算机网络、或者其他可编程装置。
[0155]
最后应说明的是：以上所述仅为本发明的优选实施例而已，并不用于限制本发明的保护范围。凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
技术特征：1.一种网页表单布局的调整方法，其特征在于，包括：响应于用户进行网页页面尺寸调整操作时，获取调整后的网页页面的分辨率；基于所述分辨率，得到目标表单在所述调整后的网页页面中的布局列数，以便基于所述布局列数得到表单模板，其中，所述目标表单为尺寸调整前的网页页面中的表单；根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单；计算所述渲染表单中每一列内各个表单标签名称在调整后的网页页面中的宽度值，并将每一列中的最大宽度值作为对应列的最大列宽；获取所述目标表单的表单域宽度，并基于所述表单域宽度以及所述渲染表单中每一列的最大列宽，调整所述渲染表单，得到调整后的渲染表单；将所述调整后的渲染表单渲染到调整后的网页页面中，以完成所述目标表单在调整后的网页页面中布局的调整。2.如权利要求1所述的方法，其特征在于，根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单，包括：基于所述布局列数，对所述目标表单中的表单标签名称进行数据重构，得到列表单标签数组，其中，所述列表单标签数组中的元素总个数等于所述布局列数，且每个元素包括至少一个表单标签名称；将所述列表单标签数组中的第i个元素，存储至所述表单模板的第i列中，其中，i为正整数，且i从1开始；当i从1循环至n时，得到所述渲染表单，其中，n为所述列表单标签数组中元素的总个数。3.如权利要求2所述的方法，其特征在于，基于所述布局列数，对所述目标表单中的表单标签名称进行数据重构，得到列表单标签数组，包括：获取所述网页页面的表单项配置数据，其中，所述表单项配置数据包括多个按照顺序排列的表单标签名称；基于所述布局列数，创建一个元素内容为空的二维数组，其中，所述二维数组中的元素总个数等于所述布局列数；计算所述表单项配置数据中各个表单标签名称的排序序号，与所述二维数组中的元素总个数之间的余数，以将余数作为各个表单标签名称的存储序号，其中，余数为0对应的存储序号为m，m为所述布局列数，且任一存储序号用于表征对应表单标签名称在所述二维数组中存储的元素的排序号；基于各个表单标签名称的存储序号，将各个表单标签名称存储至所述二维数组中，得到所述列表单标签数组。4.如权利要求1所述的方法，其特征在于，计算所述渲染表单中每一列内各个表单标签名称在调整后的网页页面中的宽度值，包括：获取所述调整后的网页页面对应的dom树中的dom节点；按照预设规则，将所述渲染表单中每一列内的各个表单标签名称，存储至所述dom节点中，得到多个标签节点，其中，所述预设规则为一个表单标签名称对应一个dom节点；将所述多个标签节点中的每个标签节点渲染至所述调整后的网页页面中，以将每个标
签节点在调整后的网页页面中的宽度值，作为每个表单标签名称在调整后的网页页面中的宽度值。5.如权利要求1所述的方法，其特征在于，基于所述表单域宽度以及所述渲染表单中每一列的最大列宽，调整所述渲染表单，包括：计算所述渲染表单中每一列的最大列宽与所述表单域宽度的总和，得到所述渲染表单中每一列的最佳列宽；将所述渲染表单中每一列的列宽，调整至每一列的最佳列宽，得到所述渲染表单。6.如权利要求1所述的方法，其特征在于，基于所述分辨率，得到目标表单在所述调整后的网页页面中的布局列数，包括：获取配置数据库，其中，所述配置数据库中包括多个页面分辨率，以及所述多个页面分辨率中每个页面分辨率对应的配置列数；判断所述网页页面对应的浏览引擎中是否存在用户配置数据；若否，则基于所述分辨率，在所述配置数据库中，查找出与所述分辨率对应的页面分辨率，以将查找出的页面分辨率对应的配置列数，作为所述布局列数。7.如权利要求6所述的方法，其特征在于，所述用户配置数据包括：至少一个配置分辨率，以及至少一个配置分辨率中每个配置分辨率对应的用户配置列数；其中，所述方法还包括：若是，则将所述用户配置数据合并至所述配置数据库中，得到合并后的配置数据库，以便基于所述合并后的配置数据库，得到所述布局列数。8.一种网页表单布局的调整装置，其特征在于，包括：分辨率获取单元，用于响应于用户进行网页页面尺寸调整操作时，获取调整后的网页页面的分辨率；列数生成单元，用于基于所述分辨率，得到目标表单在所述调整后的网页页面中的布局列数，以便基于所述布局列数得到表单模板，其中，所述目标表单为尺寸调整前的网页页面中的表单；划分单元，用于根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单；列宽计算单元，用于计算所述渲染表单中每一列内各个表单标签名称在调整后的网页页面中的宽度值，并将每一列中的最大宽度值作为对应列的最大列宽；表单调整单元，用于获取所述目标表单的表单域宽度，并基于所述表单域宽度以及所述渲染表单中每一列的最大列宽，调整所述渲染表单，得到调整后的渲染表单；渲染单元，用于将所述调整后的渲染表单渲染到调整后的网页页面中，以完成所述目标表单布局的调整。9.一种电子设备，其特征在于，包括依次通信相连的存储器、处理器和收发器，其中，所述存储器用于存储计算机程序，所述收发器用于收发消息，所述处理器用于读取所述计算机程序，执行如权利要求1～7任意一项所述的网页表单布局的调整方法。10.一种存储介质，其特征在于，所述存储介质上存储有指令，当所述指令在计算机上运行时，执行如权利要求1～7任意一项所述的网页表单布局的调整方法。
技术总结本发明公开了一种网页表单布局的调整方法、装置、电子设备及存储介质，本发明通过调整后的网页页面的分辨率，来配置表单的布局列数，从而得到表单模板；然后，即可基于布局列数，将原网页页面中表单内的表单标签名称划分至表单模板的每一列中，从而得到渲染表单；接着，再计算出渲染表单中每一列的最大列宽，并联合表单域宽度，进行渲染表单列宽的调整，以得到调整后的渲染表单，最后，将调整后的渲染表单渲染至调整后的网页页面中，即可完成表单布局的调整；通过上述设计，本发明通过网页页面的分辨率来配置表单列参数，从而决定表单在不同分辨率下的展示列数，并且优化每一列展示的最佳宽度，由此，达到了充分利用页面空间以及整齐布局的效果。及整齐布局的效果。及整齐布局的效果。
技术研发人员：刘茜文
受保护的技术使用者：成都新潮传媒集团有限公司
技术研发日：2022.03.28
技术公布日：2022/7/5
