Monday, October 26, 2009

Explore of webpage form depth is close

The webpage is made in form acted very important role. Whether do you know, does form still have very much secret? Pass the couple that waits with Javascript, CSS, form still has a lot of clever use.

1, do flow to break up a line with form

We know, can do minute of secant in the webpage with <hr> label, also can be form setting secant of an as tall as element or wide appropriative cent. Now, we combine form and Javascript, can make vividder cent secant -- cent secant of flow. Join the following code, you can see one breaks up a line, color is flowing ceaselessly.

<script>L=Array(6, 7, 8, 9, 'a' , 'b' , 'b' , 'c' , 'd' , 'e' , 'f' )T="<table Height=2 Width=60% Cellspacing=0 Cellpadding=0><tr> "For(x=0;x<40;x++){t+="<td Id=a_mo"+x+"></td>"}Document.write(t+"</tr></table>" )Function F1(y){for(i=0;i<40;i++){c=(i+y)%20;if(c>10)c=20-cDocument.all["a_mo"+(i)].bgColor="'#00"+l[c]+l[c]+"00'"}y++SetTimeout('f1('+y+')' , 1)}f1(1)
</script>

In above code, we can mark through revising <table> medium Height and the height that Width installs minute of secant and length.

2, take tumble form


See a picture the effect of one, but must not thinking is IFRAME, this can be genuine form! Actually, this is form and the result that CSS combines. There should be paragraphs of big character to want to show on the webpage, and when doing not have enough space, this goes up with respect to the clique use. Although use text casing to also can achieve similar result, but far however did not use form agile. Code is very simple, it is OK that after wanting to mark in unit case <td> only, code adds:

<div Style="overflow:aUto;height:200;">

Of course, corresponding </div> is added before unit case ends </td> to mark. We can change the value of Height, will amend indication article paragraph the height of area. Be like the following give typical examples, achieved the result of graphic representation.

<table Width="260" Border="0">
</b></font></td></tr> of caption of <tr><td Bgcolor="#999999"><font Color="#FFFFFF"><b>
<tr><td Bgcolor="#CCCCCC">
<div Style="overflow:aUto;height:160;">
Here input article paragraph content.
</div>
</td></tr>
</table>

3, the form that takes title


See a picture the effect of 2. Normally, we should add title to form, not be to use the method of unit case to use a picture namely, very troublesome. Actually, we can be used only very a few very simple HTML mark, OK and relaxed implementation adds title to form. This label appears to already was forgotten, see rarely use, the result that nevertheless it achieves is very right still. Look how to come true below:

<fieldset Style="width:220" Align="center">
The caption </legend> of form is here
Here adds the content in form
</fieldset>

A few code can get weigh in hand! Modification Width value can install form width. The caption of form is between <legend> and </legend> , you can install the color of form caption, size to wait, it is to add last links even. After </legend> marks, can add the content in form arbitrarily, also can add aleatoric content likewise, wait like character, form, picture.

 

No comments:

Post a Comment