Web form design method based on mask

Abstract

The invention provides a web form design method based on a mask. The method comprises the steps that a control base of the controls required by a form is built, and the controls are configured on a control selection interface; attribute lists corresponding to the controls respectively are built, and the attribute lists are configured on an attribute edit interface; a form preview interface is built, wherein the form preview interface is displayed according to the content of a currently designed form; the mask on the upper portion of the form preview interface area is built, and a mouse and a keyboard in the form preview interface is operated through mask interception; when the form preview interface is clicked with the mouse and the mask captures a mouse event, the control at the position is matched according to the position of the mouse, so that the control is set in a selected state, and the attribute value of the control is displayed in the attribute edit interface. By means of the web form design method based on the mask, a better user experience is provided, the form and the controls are completely displayed in the form preview interface of a form designer according to an actual effect, and what displayed is completely consistent with the actual effect.

Description

technical field [0001] The invention relates to a mask-based web form design method. Background technique [0002] The WYSIWYG form designer is to provide users with a Web HTML form designer that can instantly see what the form looks like. In the designer, you can insert new controls into the form, or modify the properties of the controls, and the modified form can be displayed immediately. The traditional form designer mainly has the following two types: 1. The use of analog controls such as images can only achieve simple layout design. The controls in this way are displayed using image simulation and cannot achieve the real WYSIWYG effect , and the layout of the control can only be positioned using absolute coordinates, and the resolution support for various screens is poor; 2. Additional events and codes are added to the form and controls to handle design events. The response to various events will interfere with the designer user, and the interface is not very friendly...

AI Technical Summary

Problems solved by technology

The traditional form designer mainly has the following two types: 1. The use of analog controls such as images can only achieve simple layout design. The controls in this way are displayed using image simulation and cannot achieve the real WYSIWYG effect , and the layout of the control can only be positioned using absolute coordinates, and the resolution support for various screens is poor; 2. Additional events and codes are added to the form and controls to handle design events. The response to various events will interfere with the designer user, and the interface is not very friendly

And because of the need to add various auxiliary information in the form, it is not exactly a WYSIWYG form designer

Images