Some usages of horizontal lines in HTML __html

One, make series horizontal single line

This is a series of horizontal single test, the effect is good.
In this example, the table main title tag <caption&gt is used, and its syntax is as follows:
<caption
Align=left|center|right
Valign=top|bottom>
Align and valign are used to set the horizontal and vertical positions of the headings respectively. The default value for align is top, which is the default value for Center;valign. The <caption> tag makes it easy to write text at the top or bottom of a table close to the edge, and to be centered, if it's more cumbersome. In addition, in this example, a single line effect is set with the rules and frame parameters of the <table> tag, which is the display control of the inner border of the table.
Rules= "None": indicates no internal border;
rules= "Rows": a border that shows only horizontal orientation;
Rules= "Cols: Indicates that only vertical borders are displayed;
Rules= "All" is to display a border in all directions, which is also the default value;
Frame= "void": indicates no outer frame;
Frame= "Above": Indicates the outer border showing the top;
Frame= "Below": indicates the bottom border of the display;
Frame= "LHS": Indicates the outer border showing the left side;
Frame= "RLS": Indicates the outer border of the display to the right;
Frame= "Hsides": Indicates the display of the upper and lower outer frame;
Frame= "Vsides": indicates that the left and right outer border is displayed;
Frame= "Box" indicates that all the outer boxes are displayed.
Understand the meaning of the parameter value, the effect of making this example is simple, this example completed after the source code as follows:
<table width= "60%" border= "1" cellspacing= "0" cellpadding= "0" rules= "Rows" frame= "Hsides" >
<caption> This is a series of horizontal single line test </caption>
<tr>
<td> This is a series of horizontal single test, the effect is good. </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Use this method to draw a series of single lines, that is, fast and neat, and the code is very small.

Second, make series vertical single line

This example of this effect seems to be a bit of a characteristic, in fact, in the production method and the above example does not make much difference, just changed the rules and frame parameter values, so that the table only shows the vertical and outer borders, and other examples of the same, this example is completed after the source code is:
<table border= "1" cellspacing= "1" cellpadding= "8" rules= "Clos" Frame= "Vsides" height= "to" "align=" "" "" Hspace= "" 10 " Width= "180" >
<tr>
<td> Higher Level </td>
<td> want to be poor and thousand-eyes </td>
<td> Yellow River into current </td>
<td> Day by Mountain </td>
<td><p><br> Deng Huang Tower </p></td>
</tr>
</table>

Three, series double horizontal line

This is the result of adding the cellspacing parameter on the basis of example one.
This example uses the same method as the example, by setting rules and frame parameters, the table shows only horizontal and internal border lines, and increases the set cellspacing parameters to produce a double line effect, but <table> Mark the default two-line color is not the same (because it is intended to use two colors to produce stereo effect), so also by setting bordercolorlight and Bordercolordark parameters to change the color of two-line, to achieve the two-line color consistent purpose. In addition, in order to make the text inside the table blank, and set the cellpadding parameters, of course, can also set the cell height to achieve this goal, but that would add a lot of code. The following describes the meaning of these parameters:
Cellspacing= "n": Cell spacing, which is the spacing between inner and outer border lines;
Cellpadding= "n": cell padding, that is, the distance between the contents of the cell and the inner border;
Bordercolorlight= "#n": Sets the color of the lighter part of a solid border line, represented by a color name or hexadecimal number.
bordercolordark= "#n": Sets the color of the darker part of a solid border line, represented by a color name or hexadecimal number.
In this case, the method of making double horizontal lines, compared with other methods convenient, fast, the use of less code, when the number of horizontal line, the more obvious effect. This example completes the following code:
<table width= "60%" border= "1" cellspacing= "6" cellpadding= "3" bordercolorlight= "#006633" bordercolordark= "#006633 "rules=" Rows "frame=" Hsides ">
<tr><td> This is based on an example of a further increase in the set of cellspacing parameters produced </td></tr>
The effect of <tr><td> students. </td></tr>
<tr><td> </td></tr>
</table>

Again, on the basis of example two and then add example three method can easily produce double vertical bar effect, you can try. Of course, the role of the table in the production of Web pages is much more than these, through these three examples can be seen, flexible application of the table parameter settings, can produce some special effects.

HTML Form Design basics

Forms play an important role in HTML pages, which are the primary means of interacting with users. A form should at least include descriptive text, user-filled forms, submit and Refill buttons, and more. Once the user has filled in the required information, press the "Submit Information" button so that the information is sent to the Web server through a dedicated CGI interface. The designer of the Web page can then see the information that the user fills out on the Web server, thus completing the feedback and communication from the user to the author. For free personal web sites, often the server does not provide CGI functionality, or can e-mail to receive feedback from users.
The following elements are primarily included in the form:
button--Normal button
radio--radio button
checkbox--check box
select--pull-down Menu
text--single-line text Box
textarea--Multi-line text box
submit--Submit button
reset--Refill button
The tags commonly used in HTML design forms are tags such as:<form>, < input>, <Option>, <Select>, <textarea>, and <isindex>.

1. <form> form Mark
The main function of the tag is to set the starting and ending position of the form and specify the URL address of the form data program to process. Its basic grammatical structure is as follows:
<form
Action=url
Method=get|post
Name=value
Onreset=function
Onsubmit=function
Target=window>
</form>
Where action: Sets the address for processing the form data program URL. Such programs are usually CGI applications that use action= "mailto:fyy0528@sina.com" when using e-mail.
Method: Specifies how data is transferred to the server. There are two main ways in which, when method=get, the input data is sent to the server after the address specified by the action, and the input data is transferred to the server in the form of post transmission in the HTTP transport protocol when method=post. Use e-mail to receive user information in this manner.
Name: is used to set the form names. Onrest and onsubmit are mainly for the "reset" button and the "Submit" button, respectively, set the corresponding button after pressing the appropriate subroutine to execute.
Target: Specifies that the input data result is displayed in that window, which needs to be used in conjunction with the <frame> tag.

2. <input> Form Input Mark
This tag is used frequently in forms, and most form content needs to be used for this tag. The syntax is as follows:
<input
Aligh=left|righ|top|middle|bottom
Name=value
Type=text|textarea|password|checkbox|radio|submit|reset|file|hidden|image|button
Value=value
Src=url
Checked
Maxlength=n
Size=n
Onclick=function
Onselect=function>
Align: is used to set the position of the form by left, right, center (middle), top, or bottom (bottom).
Name: Sets the current variable names.
Type: Determines the types of input data. The options are more, and the meaning of each is:
Type=text: Means to enter a single line of text;
Typet=textarea: means to enter multiple lines of text;
Type=password: Indicates that the input data is a password, which is indicated by an asterisk;
Type-checkbox: Indicates a check box;
Type-radio: Indicates a single marquee;
Type one submit: Represents the Submit button, the data will be sent to the server;
Type-reset: Clears the form data to re-enter;
Type-file: indicates inserting a file;
Type-hidden: Indicates a hidden button;
Type=image: indicates inserting an image;
Type one button: Represents a normal button;
Value: Used to set the input default value, that is, if the user does not input, the default value is used;
SRC: is for the case of Type=image, set the address of the image file;
Checked: Indicates that this item is selected by default in the selection box;
MaxLength: Represents the maximum number of characters to enter when entering a single line of text;
Size: Used to set the maximum number of input characters when entering multiple lines of text, using the Width,height method;
OnClick: Indicates that the specified subroutine is invoked when input is pressed;
Onselect: Indicates that the specified subroutine is invoked when the current item is selected.

3, <select> drop-down menu tags
With <select> tags you can insert a drop-down menu between tables that you want to use with <option> tags, because each option in the Drop-down menu is defined with a <option> tag. The syntax for the <select> tag is as follows:
<select
Name=nametext
Size=n
Multiple>
Where Name: set drop-down menu names;
Size: Set the height of the menu box, that is, display several menu items at a time, generally take the default value (size= "1");
Multiple: Set to allow multiple selections.

4, <option> option tag
The tag is an option in the Drop-down menu, and the syntax is simple:
<option
Selected
Value=value>
Where selected: Indicates that the current item is selected by default;
Value: Represents the value of the item, after which the value of the item is sent to the server for processing.

5, <textarea> Multiple lines of text input tags
This is a special tag that creates a multiline text input box with the following syntax:
<textarea
Name=name
Cols=n
Rows=n
Wrap=off|hard|soft>
The meaning of each parameter: Name: text box names; Clos: width; rows: height (number of lines); Wrap: Line break control, off: do not automatically wrap; hard: Automatic hard carriage return line, line marking together sent to the server; soft: Automatic soft carriage return for line, The newline tag is not routed to the server.
The form is involved in more tags, the parameters are more complex, and the actual production of the form is the combination of these tags, but the general form can not involve all parameters, we still the principle, can use the default value as far as possible with the default value, never set an unused parameter. In the following article, I will introduce some common parameters of the application techniques.

text box with a good HTML form

The form's text box is divided into Single-line text boxes and multiline text boxes. Therefore, a single-line text box is used to enter brief information such as name, E_Mail address, password, and so on; a multiline text box is used to enter information that is longer in content, such as user comments, comments, messages, and so on. As long as you understand the meaning of the text box parameters of the form, it is not difficult to make a text box to receive the information, please see the example below.