1.2 HTML "Three tables"

HTML "Three Tables"

• Form (form)
• Form (table)
• Listing (list)

Form (form)

Input file type forms

......... ..........

Get: Fetching data from the server post: Transferring data outward

Get: No encryption, clear text display post: Encryption security high

-----------------------text box:

Type mode: Text

Name: Names of text boxes

Value: The default value of the text box

Size: Length of text box

MaxLength: Control the maximum number of text box to lose (both Chinese and English, numbers)

PLACEHOLDER: The default text will be overwritten with the input content. ---(CSS3)

text box
<input type= "text" Name= "" value= "" size= "sets the size of the word in the text box" Maxlength= "controls the number of input characters"/>
Password box (without placeholder)
<input type= "password" name= "" size= "" value= "" maxlength= ""/>

Radio Box (be sure to add Name= "", same as group)
<input type= "Radio" name= "Sex" value= "man"/> Male
<input type= "Radio" name= "Sex" value= "woman" checked/> female
Note: Checked is the default value, generally can not write, to add the words are generally added in the first one.
check box
<input type= "checkbox" Name= "Love" value= "zq" checked/> Soccer
<input type= "checkbox" Name= "Love" value= "LQ"/> Basketball
Note: Checked table default value
Select File
<input type= "file" value= "photo" name= "photo" size= "control Box size"/>
Button
<input type= "Submit" Name= "sub" value= "Commit"/> Submit button
<input type= "reset" name= "res" value= "reset"/> reset button
<button> button </button> Settings button, default is Submit button

Fill in the Comments box (text field): is a double label

<textarea name= "idea" cols= "column" rows= "line" > Please fill in comments </textarea>

　　style= "Resize:none;" The size of the box can be locked to prevent the text field from being scaled;

　　Overflow:auto; Cancel the default scroll bar under IE browser;

Drop-down box: Double label
<select name= "Sheng" >
<option value= "SC" > Sichuan </option> <!--subset--
<option value= "HB" selected> Hebei province </option>
<option value= "Ah" > Anhui </option>
</select>
Note: Selected table default value

Form (table)

Create a table with four rows and three columns

<table width= "480" height= "$" border= "1" rules= "all";
  <tr>
    <td height= colspan= "3" align= "center" > Curriculum </td>
  </tr>
  <TR>
    <th > Monday </th>
    <th > Tuesday </th>
    <th > Wednesday </th>
  </tr>  
  <tr>
     <td align= "center" > Chinese </td>
    <td align= "center" > English </td>
    <td align= "center" > Math </td>
  </tr>
  <tr>
    <td align= "center" > Math </td>
    <td align= "center" > Language </td>
    <td align= "center" > English </td>
  </tr>
</table>

<tr></tr> define rows for a table
<td></td> Define a table's cells (columns)
<th></th> Define table header, table header, automatically bold center

1. Set the thickness of the border--border

<table border= "1"; the line of the outer border of the table is 1 pixels
2. Set the width of the gridline--cellspacing
<table cellspacing= "1" >

3. Set the distance between the data and the grid--cellpadding
<table cellpadding= "1" >
4. Adjust table width--width
<table width= points ("110") or percentages >
5. Adjust table Height--Height
<table height= points ("110") or percentages >
6. Set the table background color--bgcolor
<table bgcolor= "#rrggbb" >
7. Set table border Color--bordercolor
<table bordercolor= #rrggbb >
8. Set text to center horizontally--align
<TD align= "center" > Chinese </td>
9. Set text to center vertically--Valigin
<TD valigin= "Middle" > Chinese </td>
10. Merging cells
<TD vcolspan= "" > Language </td>
11. Splitting cells
<TD rowspan= "" > Language </td>

12. Line of rows

Rules = "cols" only column lines

Rules = "Rows" Only line lines

The rules = "All" line has

The lines of the rules = "none" are not

Listing (list)

Sequential list: Automatically increase the number of permutations before list item contents
<ol type= "A" start= "3" > (note: The default sequence is a number)
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
<li> List 4</li>
</ol>
Note : The type is a, the table sequence is lowercase (uppercase capital letters), the type is I, the table Roman ordinal is lowercase (I capital table uppercase), start= "3", the table starts with the third character

Unordered list: An accent list that displays special symbols before content
<ul type= "Square (square solid) | Disc (Solid circle) | Circle (Hollow Circle) > (Note: The default is a dot)
<li> List 1</li>
<li> List 2</li>
<li> List 3</li>
<li> List 4</li>
</ul>
Note: The symbol Ul,li{margin:0;padding:0;list-style:none before the sequence is removed;}

UL Li{list-style:none;} Clear the previous style of the list

UL Li{list-style-postion:inside;} Make the style before the list included in the list

UL Li{list-style-postion:outside;} Make the style before the list outside the list

UL Li{list-style-image:url} Custom list Styles

1.2 HTML "Three tables"