Form problem summary and best practices

In my work, I often encounter many Forms Submission and form alignment problems. Below I will summarize my problems. You are also welcome to add.

1) form alignment

It took some time to align the form, even if vertical-align: middle was set. Later, this problem was solved by adding margin-top:-2px. This actually correspondsFontThere is a lot of relationship between the settings, our font isFont:12px/1.5 Arial,; The first choice is the Arial font, so it must be solved by adding the margin-top:-2px (I use the 12px font). In fact, you only need to replace the fontTahoma fontThen set vertical-align: Middle. You can.

2) Form submission problems

There are two methods. The first method is to directly write form + IFRAME or form in HTML. Form + IFRAME is generally used to submit content, and the browser does not jump, on this page, I am generally used to solve cross-origin problems. I will use ajax to submit without cross-origin. Form is a separate form submission, which is generally used for login-like submission. The page first jumps to the logon page. You can add your own address at the end, and then return to this page. It is generally done by adding a parameter.

The second method is to dynamically create a form through Js. The main advantage of this method is that you do not need to write a lot of HTML on the page. We automatically create a form through the script and append it to the end of the body, but pay attention to it. Document. if you create an IFRAME in the form of createelement, you must dynamically create an IFRAME in the form of innerhtml. For form, the input hidden options in the form are added in the form of innerhtml, the value to be added may not pass post because it has quotation marks. Best way

It is created using document. createelement. Since there may be many inputs, we recommend that you add a document fragment for processing so that you do not operate the DOM node every time.

3) Chinese problems

Do I need to transcode the Chinese characters in the form? No. I transcoded it during the initial development. I recorded the error here.

You are welcome to make a brick.