"2" HTML Table Form

How data is aligned in a cell

Align = leftAlign = centerAlign = rightValign = topValign = middleValign = bottom

Merge cells

Horizontal merging in the OR tag using the COLSPAN property, you can set the number of columns that the cell spans, such as colspan=3 that span 3 columns.
Vertically merged in or tagged with the ROWSPAN property, you can set the number of rows that the cell spans, such as rowspan=3 that span 3 rows.

Summary of Forms

表格的基本结构表格标记table的属性    border/width属性    cellspacing/cellpadding属性 行标记tr的属性     algin属性     valgin属性    height属性单元格td的属性      colspan属性   水平合并    rowspan属性  垂直合并    algin属性     valgin属性    width/height属性

Form

Forms are primarily responsible for data collection functions in Web pages.

表单的组成表单标签  <form action=“表单提交地址”method=“post/get”>                 这里面包含了所有的表单控件            </form>

The difference between get and post:

• Get request data will be cached by the browser, the user name and password will appear in plaintext on the URL, others can find historical browsing records, the data is not very safe. The data for get transport has a size limit because get is submitted through a URL, then the amount of data that get can commit is directly related to the length of the URL, and different browsers have different limits on the length of the URL. The parameters of the GET request will be passed after the URL, the requested data will be appended to the URL, in order to split the URL and transfer data, the parameters are connected with &, the XX in%xx for the symbol in 16 binary ASCII, if the data is English letter/number, as is sent, if it is a space, Convert to +, if it is Chinese/other characters, encrypt the string directly with BASE64
• Post does not limit the data that is submitted. Post is safer than get. Then use GET, because using GET, parameters are displayed in addresses, for sensitive data and for data that is not Chinese characters, then post.

Form elements

输入标签：   <input   type=“值”/>           text        单行文本框，只能输入一行文本              password    密码框             radio       单选框            checkbox    复选框            file            文件域            submit      提交按钮             reset           重置按钮             button      普通按钮（一般按钮）

1. Name property
   

type="radio" name="sex"   type=“radio” name=“sex”  /> 女注意： Name属性定义单选框的名称，单选框都是以组为单位使用的，在同一组中的选项必须使用同一名称

1. Checked Property
   

申请产品：<input  type=“checkbox”  checked=“checked”/>实木

1. Value Property
   

<input  type=“submit”  value=“提交 ”/>  <input  type=“submit”  value=“取消 ”/>

Drop- down menu <select></select> ：

主要用于在有限的空间里设置多个选项。

<select>        <option value=“”>请选择</option>     <option value=“1” selected=“selected”></option></select>

text Field
Used primarily to enter longer text information

<textarea  rows=“5” cols=“30”>     </textarea>

Label's performance classification

Tag Element Classification
Block-level element blocks; div p h1-h6 Table Form ...
inline elements; A span ...
inline block Inline-block; IMG Input Select ...

Label and characteristics--block-level features

1, exclusive row, by default, its width automatically fills the width of its parent element
2, can be set width and height, set a wide or exclusive line
3. You can set the margin and padding properties
4. Corresponding Display properties: Block
5, can convert display:inline into inline elements
6. Block-level elements and inline elements can be nested

Labels and features-in-line features

1, will not monopolize a row, the adjacent rows of elements will be arranged in the same row, until a row, will be wrapped, and its width varies with the content of the element
2, can not set wide and high, set the width or exclusive line
3, horizontal direction of both inside and outside the margin effect, but the vertical direction of the internal and external margins will not produce a margin effect
4. Corresponding Display properties: inline
5. Convert Display:block to block-level elements
6, can not nest block-level elements

Tag nesting rules

1. Cannot cross-nest
2, block-level elements nested inline elements or block-level elements
3. Inline elements cannot nest block-level elements
4, block-level elements can not be placed in

Inside
5, there are several special block-level elements can only contain embedded elements, can not contain block-level elements, these special tags are:
H1, H2, H3, H4, H5, H6, p, DT

Note

Table 1, the complete structure of the table<table>            <thead>                <tr>                    <TD></td>                    <TD></td>                                       <TD></td>                </tr>            </thead>            <tbody>                <tr>                    <TD></td>                    <TD></td>                                       <TD></td>                </tr>            </tbody>            <tbody>                <tr>                    <TD></td>                    <TD></td>                                       <TD></td>                </tr>            </tbody>            <tfoot>                <tr>                    <TD></td>                    <TD></td>                                       <TD></td>                </tr>            </tfoot>        </table>Table properties: border:cellspacing: Spacing between cells and cells default 2px cellpadding: distance from content to border width: width of table align:left/center/right bgcolor: Background color background: Properties of the background image tr Height:align: Horizontal left center right valign: Vertical top Middle Bottom bgcol OR:BACKGROUND:TD attribute Width:height:align:valign:bgcolor:backgrouond: Simple table structure<table Border="0" cellpadding= "0" cellspacing="0 " >        <tr>            <th>Text</th>            <th>Text</th>            <th>Text</th>        </tr>        <tr>            <TD>Text</td>            <TD>Text</td>            <TD>Text</td>        </tr>        <tr>            <TD>Text</td>            <TD>Text</td>            <TD>Text</td>        </tr>    <table>Advanced Application of table merge cell horizontal merge: colspan= "3" Col: Column Vertical merge: rowspan= "2" Row: Row table layout page (table nested table) Form form T<form>    </form>Form property: Name = "MyForm" action< action >= "Submit to Spooler" (three extensions after JSP aspx PHP) (Java C # php) "Database" method< methods >= "Get|post" Get|post difference get: Submitting data through the Address bar displays information insecure data with restricted post: Large amount of secure commit data target= "_blank| _self "table cell always demonstrates property sheet element text box<input type = "text" name = "" " value=" "/ >Password box<input type = "password" name = "" " value=" "/ >Submit button<input type = "Submit"Value="Login | submit"/>radio button:<input type="Radio" name="" value=  ""/>Male checked Select the check box:<input type="checkbox" name= "" " value=" "/ >Checked Select Upload file:<input type="file" name="file"/>Hidden fields:<input type="hidden" name="Content" value =""/>Drop-down box:<Select name="">                <option value=""></option>Selected selected</Select>Text fields:<textarea rows="5" cols="$"><textarea>ReadOnly Read Only

"2" HTML Table Form