Form the way to make a big competition

I've been working on the web for 6-7 years, and I'm already familiar with a variety of web technologies. However, as a programmer, I have a pain in the way of making a web-form interface.

Heartache 1: A lot of back-end code and logic to write, but I also have to wade through the various web tools to drag and drop controls into the artwork provided by the art template. Then with CSS, write JavaScript. The form is big enough for me to get on all day.

Heartache 2: Form this thing, not veteran still can not do, but also beautiful and functional so to deal with a variety of table,td,div,javascript,css. A little attention, the display effect is not the same as the thought, and finally this kind of thing all become veteran door live. The novice can only look at the side.

Heartache 3: ... Hey, don't write it. It's not all about complaining today.

Today I'll share with you what I've learned about the various languages and forms in the platform that make the form better:

Basic: You can use Visual Studio in a platform such as asp.net. NET tools to make a form, a form in a JSP under the Java platform can use JBuilder or eclipse to make forms that provide visual, WYSIWYG editing, but such tools are often biased toward program design , So to make a beautiful interface, basically need to use the tool in the original code editing to make. Although the program coding efficiency is very high, but it is difficult to achieve a beautification effect.

Visual Studio. NET Tool interface

Eclipse Tools Interface

recommended way: With DW tools .

DW is also the Dreamweaver produced by Macromedia. The Dreamweaver family has always been the favorite of Web art, and one of the most powerful web-making tools of all time. DW actually has a benefit for the program staff, whether you want to make any language and platform under the form, DW can do, and more importantly, DW can meet any art requirements of the form production.

DW Tool Interface

When the DW makes the form interface, if can learn to use some functions in DW, can greatly speed up the speed of making the form: listed here for your reference.

1, learn to use the design area or code area under the Block code check function.

2, the HTML controls in the input area use CSS styles to control the appearance. (It is best to develop the habit of consistent style name)

3, CSS style content to the external file, in the required page to introduce the content of the CSS file.

4, to assist the functions of various forms of JavaScript content into a function of a separate file.

5. Appropriately and reasonably use the template (Template) and library functions provided by DW to store the code that is reused in the interface.

Recommended mode two: CSS2.0.

CSS2.0 is a brand new style sheet structure, implemented by the CSS1.0 or CSS1.2, is completely different from the previous one, CSS2.0 recommended a set of content and performance effects of the separation, HTML elements can be controlled by the CSS2.0 style display effect, can not use the previous HTML table and TD to locate the appearance and style of the form, just use the div and Li such HTML tags to split the elements, and then through the CSS2.0 style to define the appearance of the form interface.

CSS2.0 provides us with a mechanism to allow programmers to develop the form and interface without considering the display and interface, and to show that the problem can be solved by the artist or programmer later to write the corresponding CSS2.0 style. However, because CSS2.0 has not yet seen a very good editing software, so can not do what can be seen as the proceeds, writing is not easy! Domestic pure art can write CSS2.0 style of I have not seen. Alas, programmers have to write for themselves. But CSS2.0 at least has opened a beautiful tomorrow for us. About CSS2.0 interested friends can view the information of the consortium. http://www.w3.org/TR/REC-CSS2/

Mode III (recommended): The Noahweb engine provides a form for the production of forms.

Noahweb is worthy of a new generation of lightweight B/s application development engine, Noahweb provides a very powerful form of the production mechanism, the use of Noahweb development B/S application, the program staff can not consider the appearance of the form, The XML format-structured label provided with Noahweb defines the form, and the final display effect of the form is entirely determined by the graphic design's form template. Performance and structure separation, reusability is also very good.

Suppose you need to make a landing form interface such as the following:

When defined in Noahweb, you can use the following code (don't be intimidated by this code, look closely, very easy to understand):

The method is very simple when the form is called at the logical layer in Noahweb. You can use the following syntax.

<viewform formlink= "Login" templatelink= "Ominibasefrom" action= "formtitle=" "/>"

of which

Login refers to the formid in the form code that was just structured.

Ominibasefrom refers to the form template name. To make the form appear differently, you can use a different template.

For example, the following image shows the results of calling the Ominibasefrom template:

The following figure shows the results of calling the Baset2form template:

The following figure shows the results of calling the Oatemplate template:

The following figure shows the results of calling the Ovipbaseform template:

These forms produce a different look, but the content and structure are all the same, and replacing the form template produces a distinct look, and the Noahweb form template can be easily defined by the artist, Using any HTML or XML or css2.0 text content can be defined as a form template, you can also find a ready-made interface from the network to copy the template.

Just now the example is only a very small form, the next page has made a large number of examples of the form, it feels very cool!

Look at another XML-structured "large" form that is displayed under a different template.

To invoke the display result of the Ominibasefrom template:

The same table is monotonic with the results of the Baset2form template display:

The same form, with the effect of another form template:

The most glaring is the back of this template, I have just been separated from another system to make Noahweb form template, I named the form template to Baset3form, after the call is displayed as follows:

Look carefully can find inside the belt tabpage effect, not change any form of any code, feel already very different?

Noahweb form can also be added to the input area of various tests, such as: Mail address, telephone number, URL, number of more than 10 kinds of common testing. It is also very convenient to get and make options or selected values from the database, Noahweb also provides other extended input controls, such as the date selection control, the choice control, the Cascade selection menu, as follows:

Choice Control

The Cascade selection Menu

The form in Noahweb is powerful enough to allow programmers to quickly develop the required forms without considering the display, and the artwork and programs are very well separated. It's easy to change the appearance of a project at any one time.

Friends with more interest can also visit the official site of Noahweb www.noahweb.net.

Click here to download the demo code above

A friend who has IIS installed can see it directly, you can download designer edits from www.noahweb.net