Web|web Standard | design
I had a lot of complicated forms recently, so I did it.
There has always been a saying: Table for the data table, for complex forms, table is also the best choice, because has not been met also did not seriously to study whether the complex form should use table.
Well, the opportunity came, I took the pattern of the complex form, it seems to look at all feel that should not use table, unless there is a row and column labels of the datasheet form. Instead of landing this simple form, I have always used table for the reason that it is possible to align text with input boxes in plain documents, but for complex forms, complex forms involve page layouts.
Why should we study it? Because I want the programmer not to involve any part of the interface, for a page, he only needs to focus on the structure, and if a complex form takes a table, it's easy to bring the programmer into the layout.
Well, after a hard struggle, but also good, XHTML part of their own think that some of the rules, the page analysis at random, the div structure of the complex form is really beautiful, but ... css part ... Damn, it's hard to do, dry a few complex forms of CSS are not understand the law, too JB trouble, especially the length of the text is inconsistent, form control and a variety of staggered, there are false hints hidden text, from time to time with a button in the middle ... Confused .... Anyway, continue to do CSS, hoping to finally come to the conclusion, for the complex form in the end with a table or div?
First give a simple form for the login interface, my most common XHTML code, use table, for the reason see:
<div>
<h3><span> User Login </span></h3>
<table>
<tr>
<td><label for= "name" > Username </label></td>
<td><input id= "name"/>
</tr>
<tr>
<td><label for= "pw" > Password </label></td>
<td><input id= "PW"/></td>
</tr>
</table>
<p><button/></p>
</div>
In addition, table is not used as follows:
<div>
<h3><span> User Login </span></h3>
<div>
<label for= "name" > Username </label>
<input id= "name"/>
</div>
<div>
<label for= "pw" > Password </label>
<input id= "pw"/>
</div>
<p><button/></p>
</div>
What do you say? The first one I see this simple form is 2 rows of 2 columns of data, with a table. The second type is the DIV modular operation. I usually use the first one, unless the text is the same length (such as name, password) to use the second type. Of course I think the second one is right, so I'll make a fuss over the copy first so that the length is the same. Why? Because only modularity, in order to fix XHTML through CSS layout, such as the form of a row of four columns, the first one can not do (in fact, FF is able to correctly explain the floating operation of TR, such as 2 column TR, but IE does not support, a TR has to occupy a row of the table.) ）。
Well, the drawings and XHTML parts of the complex form are in the company, tomorrow at work, and now go to sleep and ask for dreams.
Is this form enough?
This is the XHTML section, and the necessary deletions are done without destroying the structure. Pay attention to the parts I add, like H2, H3.
<h1> fecal worms form title </h1>
<div>
<h2> Navigation </h2>
<div>
<button> Add </button>
<button> Refresh </button>
</div>
<div>
<h3> the current batch adopted the standard for </h3>
<div>
<label> Self Subsidy </label>
<asp:label id= "" runat= "Server" ></asp:label>
</div>
<div>
<label> my seniority subsidy </label>
<asp:label id= "" runat= "Server" ></asp:label>
</div>
<div>
<label> Spouse Benefits </label>
<asp:label id= "" runat= "Server" ></asp:label>
</div>
<div>
<label> Spouse's seniority allowance </label>
<asp:label id= "" runat= "Server" ></asp:label>
</div>
<div>
<label> Special Subsidy </label>
<asp:label id= "" runat= "Server" ></asp:label>
</div>
</div>
<iewc:treeview id= "" expandlevel= "1" runat= "Server" autopostback= "True" ></iewc:treeview>
</div>
<div>
<h2> form Content </h2>
<div>
<h3> Applicant Information </h3>
<div>
<label> My Name </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> ID number </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> my Seniority (years) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
<asp:regularexpressionvalidator id= "Revy" runat= "Server" display= "Dynamic" validationexpression= "\d{0, 2} "errormessage=" must enter an integer "
controltovalidate= "Txt_workage" ></asp:regularexpressionvalidator>
</div>
<div>
<label> work Unit </label>
<asp:label id= "" runat= "Server" ></asp:label>
</div>
<div>
<label> Job Title </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
</div>
<div class= "Personinfo" >
<h3> Current Housing information </h3>
<div>
<label> Current housing address </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Construction Area (sqm) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> individual purchase area by market price (sqm) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Current Housing Nature </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> subsidized Housing area standard (sqm) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> application for housing subsidy </label>
<asp:dropdownlist id= "" runat= "Server" ></asp:dropdownlist>
</div>
<div>
<label> application for housing subsidy standard </label>
<asp:radiobuttonlist id= "" runat= "server" repeatdirection= "Horizontal" >
<asp:ListItem> Disposable Subsidy </asp:ListItem>
<asp:ListItem> One-off patch area difference </asp:ListItem>
</asp:radiobuttonlist>
</div>
</div>
<div>
<h3> Spouse Information </h3>
<div>
<label> Spouse Name </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Spouse ID number </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> spouse Seniority </label>
<asp:textbox id= "" runat= "server" ></asp:textbox> year
<asp:regularexpressionvalidator id= "" runat= "Server" display= "Dynamic" validationexpression= "\d{0,2}" Errormessage= "must enter Integer"
controltovalidate= "" ></asp:regularexpressionvalidator>
</div>
<div>
<label> Spouse Work Unit </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> title:</label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
</div>
<div>
<h3> access to housing allocation or monetary subsidy </h3>
<div>
<label> (1) has been enjoying the area of housing reform (SQM) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> (2) has enjoyed the purchase subsidy (yuan) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> (3) subsidized housing (RMB) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<asp:button id= "" text= calculation runat= "Server" ></asp:button>
<label> This subsidy area (sqm) </label>
<cc1:acceptnumber id= "" runat= "Server" ></cc1:acceptnumber>
</div>
</div>
<div>
<h3> Housing Subsidy </h3>
<div>
<label> Self Subsidy (yuan) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> my seniority subsidy (yuan) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> spouse allowance (yuan) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Spouse's seniority subsidy (yuan) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Special Subsidy (yuan) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Total (yuan) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Actual payment subsidy (yuan) </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
</div>
<div>
<h3> Ask applicants to fill in </h3>
according to different circumstances
<div>
<label> Current purchase address </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Sales Unit </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Repayment Loan Account number </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
<div>
<label> Loan Bank </label>
<cc1:xmldropdownlist id= "runat=" Server "Xmlnodename=" "xmlpath=" "></cc1:xmldropdownlist>
</div>
<div>
<label> I Provident Fund storage number </label>
<asp:textbox id= "" runat= "Server" ></asp:textbox>
</div>
</div>
<div>
<asp:button id= "text=" Save "runat=" Server "cssclass=" button "></asp:button>
<asp:button id= "" text= "return" runat= "Server" cssclass= "button" ></asp:Button>
<asp:button id= "" text= "delete" runat= "server" cssclass= "button" ></asp:Button>
<button id= "onclick=" javascript:window.close (); > Close </button>
</div>
</div>
To add one, there are two parts of the table structure that are obvious, so there is a table used there, and the rest is useless.
Table part XHTML. The CSS part has not figured out the law, the conclusion does not, continues to ponder, but feels does not use the table structure is very beautiful also very nimble, but the CSS really lets the head is big, weighs the gain and loss, again adds.
..
<div class= "Personinfo" >
<h2><span> Personal Information </span></h2>
<div>
<h3><span> Buyers </span></h3>
<table>
<tr>
<td><span> selection </span></td>
<td> name </td>
<td> Gender </td>
<td> Age </td>
<td> Relations </td>
<td> domicile </td>
</tr>
<tr>
<td><input type= "checkbox"/></td>
<td><select/></td>
<td><input/></td>
<td><input/></td>
<td><select/></td>
<td><input/></td>
</tr>
</table>
</div>
<div>
<h3><span> family member </span></h3>
<table>
<tr>
<td><span> Selection </span></td>
<td> name </td>
<td> Sex </td>
<td> Age </td>
<td> Relations </td>
<td> domicile </td>
<td> Work Unit </td>
<td> Editor </td>
<td> Delete </td>
</tr>
<tr>
<td><input type= "checkbox"/></td>
<td><select/></td>
<td><input/></td>
<td><input/></td>
<td><input/></td>
<td><input/></td>
<td><input/></td
[1] [2] [3] [4] [5] [6] [7] [8] [9] Next page
