[发明专利]网页表单布局的调整方法、装置、电子设备及存储介质

说明书

本发明公开了一种网页表单布局的调整方法、装置、电子设备及存储介质，本发明通过调整后的网页页面的分辨率，来配置表单的布局列数，从而得到表单模板；然后，即可基于布局列数，将原网页页面中表单内的表单标签名称划分至表单模板的每一列中，从而得到渲染表单；接着，再计算出渲染表单中每一列的最大列宽，并联合表单域宽度，进行渲染表单列宽的调整，以得到调整后的渲染表单，最后，将调整后的渲染表单渲染至调整后的网页页面中，即可完成表单布局的调整；通过上述设计，本发明通过网页页面的分辨率来配置表单列参数，从而决定表单在不同分辨率下的展示列数，并且优化每一列展示的最佳宽度，由此，达到了充分利用页面空间以及整齐布局的效果。

技术领域

本发明属于网页表单布局调整技术领域，具体涉及一种网页表单布局的调整方法、装置、电子设备及存储介质。

背景技术

目前，用户在调整完各个网页的尺寸后，网页页面上表单组件的布局方式并不会发生改变，其布局方式主要分为：均分列布局和行内依次布局展示，其中，均分列布局是按列平均分配布局空间，其存在以下不足：虽然布局整齐，但无法合理利用空间，只能按照最长字数的label(表单标签名称)宽度设置所有列的宽度，这会造成表单占据过多的页面空间，从而浪费网页空间资源；而表单行内依次布局则是不做特殊布局处理，依次将表单项排列展示，该布局方式虽然能让空间利用率提升，但却使表单布局杂乱，使得用户不易阅读；因此，提供一种网页表单布局的调整方法，从而使表单布局整齐，且能够充分利用页面空间迫在眉睫。

发明内容

本发明的目的是提供一种网页表单布局的调整方法、装置、电子设备及存储介质，以解决现有布局方式所存在的无法合理利用空间以及布局杂乱的问题。

为了实现上述目的，本发明采用以下技术方案：

第一方面，本发明提供了一种网页表单布局的调整方法，包括：

响应于用户进行网页页面尺寸调整操作时，获取调整后的网页页面的分辨率；

基于所述分辨率，得到目标表单在所述调整后的网页页面中的布局列数，以便基于所述布局列数得到表单模板，其中，所述目标表单为尺寸调整前的网页页面中的表单；

根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单；

计算所述渲染表单中每一列内各个表单标签名称在调整后的网页页面中的宽度值，并将每一列中的最大宽度值作为对应列的最大列宽；

获取所述目标表单的表单域宽度，并基于所述表单域宽度以及所述渲染表单中每一列的最大列宽，调整所述渲染表单，得到调整后的渲染表单；

将所述调整后的渲染表单渲染到调整后的网页页面中，以完成所述目标表单在调整后的网页页面中布局的调整。

基于上述公开的内容，本发明在用户进行网页页面尺寸操作时，通过调整后的网页页面的分辨率，来配置表单的布局列数，从而得到表单模板；然后，即可基于布局列数，将原网页页面中表单内的表单标签名称划分至表单模板的每一列中，从而得到渲染表单；接着，再计算出渲染表单中每一列的最大列宽，并联合表单域宽度，进行渲染表单列宽的调整，以得到调整后的渲染表单，最后，将调整后的渲染表单渲染至调整后的网页页面中，即可完成表单布局的调整；通过上述设计，本发明通过网页页面的分辨率来配置表单列参数，从而决定表单在不同分辨率下的展示列数，并且优化每一列展示的最佳宽度，由此，达到了充分利用页面空间以及整齐布局的效果。

在一个可能的设计中，根据所述布局列数，将所述目标表单中的表单标签名称划分至所述表单模板的每一列中，以得到渲染表单，包括：

基于所述布局列数，对所述目标表单中的表单标签名称进行数据重构，得到列表单标签数组，其中，所述列表单标签数组中的元素总个数等于所述布局列数，且每个元素包括至少一个表单标签名称；