4 days Learn Noahweb form

Source: Internet
Author: User
Tags add date control label html form reference reset resource
Web

HTML form is very common in network applications, b/s application of user data input needs to be achieved through the form, simple form or a small number of forms can be Dreamweaver and other similar WYSIWYG tools to write. For a more than a form of the application system would like to have a mechanism to help us quickly develop the form, the new generation of B/s development language Noahweb provides such a mechanism for making the required forms in a structured way based on XML, and then generating the final form according to the specified template file at the time of the actual call. This can undoubtedly make a lot of work to make form trouble simplification, learn this way to develop the B/s application of the form is very easy!

All right! Here we go!

To make a form you can open a form file under a namespace (Forms.xml.config file under a namespace) by Noahweb Designer (Noahweb Designer):

The designer then opens the form file with your predefined text editor, which I set up here as follows: EditPlus

Forms is the root node in a form resource, and all forms must exist under that root node. and use the form label to describe it. If there are two forms that are simple, the form is written as follows:

OK, so let's take a look at the basic structure of the "form resource" in Noahweb and the controls provided by Noahweb.

The basic structure of a form

Let's see a screenshot first!



The above is a very simple form, the following is about this form noahweb form structure code, the green font is the current line or the comment on the previous line (the following is omitted forms do not mention):

The first step, first look at the screenshot of the outermost node <form id= "" text= "" "></Form> label, just now we have seen the form of the property Id and Text,id can enter the expression is a reference name of this Form, The reference name is used to invoke the form, and text is the display name of the form that is used as the text when the form is generated. We can enter the ID and text according to our own needs. Note: The IDs of multiple form cannot be duplicated.

The second step is to create a form input area <line text= "" "></line>,line tag. We can start by simply understanding him as a table in HTML.

The third step is to create a new input line in the input area <inputline text= "" desc= "" "></inputline>,inputline tag function we can start by simply understanding the TR similarity in HTML, There can be more than one input line in an input area.

The fourth step is to enter the line to create a description of the control label <input id= "" type= "" ></INPUT> the input tag can also be easily understood as the TD in HTML, and an input line can have more than one label to describe the control.

The fifth step is to add in the Input tab some specific parameters to describe the label, such as: Input display name label <label></label>,input display name use style label <LabelClass>< /labelclass>,input display the size of the label <size></size>, in order to the program can be required you can also add a check tag, such a form is completed.

A form can define many commonly used control types, and different types are specified differently in the type of input, as shown in the following illustration:

In addition to the common types Noahweb also provides some input types that do not exist in HTML: as follows:

You can put each piece of code into a line tag to see how the results, the other is not Yiyi list, we try to know.

To enumerate the types of controls that are supported in a form, you can do a reference to it: (with * is not in HTML)

Hidden Hide variable fields
Text Single line text input area
CheckBox Multi-selection box
File Upload File selection box
Image Picture buttons that do not appear when the picture address is empty
Password Password input Area
Radio Single selection box
Reset Reset button
button Button
Label Text or HTML display label *
Date Date Selection Input Area *
Choice Select Content Input Area *
Submit Form Submit button
Select Radio input Area
Select-multiple Multiple-selection input area
TextArea Multi-line text input area

Titleline and position control
Titleline is the header row label, you can display a form title, the above landing form is not a title, that is, there is no titleline tag, the result of joining the titleline is this:

The above results in the code to do the changes are very small, as long as the fourth line in the code plus <titleline text= "title"/> can be, the title can have multiple, you need to pay attention to titleline and line is the same level, can not nest each other.

Inputline and line are used to control the position, the above Administrator Landing page username and password is divided into two lines, if you need to put them on a line, as long as the two input tags into a inputline tag on the line:

The code also makes a slight adjustment, where the username and password tags are labeled with the label type Control, code:

Inspection label

If we want the people who use the system to fill in the form we want to match the input content and format we can use the Noahweb form of the inspection label to do, if not meet the rules will appear prompts, we can look at the login form 9th and 16 of the two lines of code:

<NullErrorString> Please enter your login username </NullErrorString>

Here is a null character test, if the user did not input content to submit the "Please enter your login username" hint:

Check the type of label there are many kinds, already contains a variety of commonly used to detect, here also do not Yiyi listed, interested in their own research, you can go to Noahweb official help document to see http://docs.noahweb.net

Next page: Day 2nd



Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.