table表格,form表單,select下拉列表,textarea文本域


表格標簽table:

 

1. 表格的作用按照一定的格式擺放數據。

 

2.表格的組成表格是由一系列的單元格(矩形框)組成。按照從左到右,從上到下的順序排列到一起組成的。

 

3.用於創建表格的標記:

 

 <table></table> 用於標記一個表格的開始,</table>用於標記一個表格的結束。一個表格中,只允許出現一對table標簽。
 <caption></caption> 表格的標題,可以省略,表格標題必須跟在 table后面  ,tr標簽前面,而且最多只能有一個。
 <tr></td> 用於標記表格一行的開始,</tr>標記一行的結束。表格內有多少對<tr>,就有多少行。
 <td></td>  用於標記表格中某行中一個單元格的開始,</td>用於標記這個單元格的結束。<td></td>標簽要寫在<tr></tr>標簽中,一對<tr></tr>標簽中由多少對<td></td>,就說明該行有多少個單元格。


4.最基本的表格屬性
一個基本表格中,必須含有一對<table></table>標簽,一對或幾對<tr></tr>以及一對或幾對<td></td>。一對<table></table>定義一個表格,一對<tr></tr>定義一行,一對<td></td>定義一個單元格。

 

5.表格屬性:

table屬性
boder 邊框 
cellpadding 單元格的內邊距(單元格邊框與i內容之間的距離) 
cellspacing 單元格的外邊距(單元格之間的距離) 
width 表格的總寬度(如果有多列,則每列等分)
height 表格的總高度(如果有多行,則每行等分)
align 整個表格的文本對齊方式 
bgcolor 背景顏色(純色填充) 
bordercolor 邊框顏色
background 背景圖片 
  tr屬性(行)
align  內容水平對齊方式 
valign 內容垂直對齊方式 
                                          td單元格
width  每個單元格的寬度(可以設置百分比)
height 每個單元格的高度(可以設置百分比)
align 單元格內容水平對齊方式 
valign 單元格內容垂直對齊方式 

 代碼:

 

 

 效果圖:

 

 6.不規則表格的創建:

  

跨行(合並列) rowspan 縱向向下,包含自己
跨列(合並行) colspan 橫向向右,包含自己

 

代碼: 

 

 

 

 效果圖:

              

 

 

注意:第一行的第一個單元格和第一行的第二個單元格橫向合並的時候,第一個單元格的標簽改為<td colspan="2"></td>,被合並的單元格(第二個單元格)刪除。

 

   第二行的第三個單元格和第三行的第三個單元格縱向合並的時候,第二行的第三個單元格標簽改為<td rowspan="2"></td>,被合並的單元格(第三行的第三個單元格刪除)。

 

 

 

 


 

 

 

 

表單標簽form:

 

1.表單的作用:主要是用於顯示、收集用戶信息,並將信息提交給服務器。其標簽為<form></form>。

 

2.表單的組成:  Ⅰ.表單元素:負責將用戶數據提交給服務器。      Ⅱ.表單控件:負責接收用戶的數據(和用戶進行交互的)。

 

3.表單元素: 

      form屬性:

            Ⅰ): action:    定義表單被提交時的動作,主要就是服務器上要處理數據 的應用程序URL找誰處理(提交地址)。

            Ⅱ):method:  指定數據提交的方式。

                             1):get傳輸    顯示提交 ,可以顯示在地址欄上的 ,有數據大小限制。

                             2):post傳輸   隱式傳輸, 所有提交數據時都是看不見的,相對來來說比較安全,無數據大小限制。

 

4.表單控件:提供多個類型的表單控件,並具有可視化的外觀。

                            input組件:

             Ⅰ:value :      值

             Ⅱ:name :     控件的名稱

             Ⅲ:disabled :      禁用控件

             Ⅳ:type :          類型

                         1):     text       普通文本框 

                         2):  password     密碼框 

                         3):  email        郵箱     

                         4):  radio        單選框

                         5):  checkbox        多選  

                         6):  submit     提交 

                         7):  image      圖片提交  

                         8):  button        按鈕

 

 代碼及顯示效果圖如下: 

 

 

 

 

 

 

 

 

 


 

  

 下拉列表:

 

1.標簽:<select> <option><option> </select>

 

2.屬性:select: size: 顯示數量,如果不為1的話,則變成滾動列表而不是下拉列表。

 

                      option selected="selected" :默認選擇。

 

siez="1"代碼: 

      

 

 

size="3"代碼: 

               

 

 

    

 


 

 

 

文本域:

 

1.標簽:<textarea></textarea>

 

2.屬性: Ⅰ: cols:      指定文本的列數 (寬度)

      Ⅱ  :   rows:     指定文本的行數 (高度)

      Ⅲ :readonly:  只讀

      Ⅳ : disabled:  禁用

 

 

代碼及效果圖: 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

    

 

      
                                   

 

 

 

 

 

 

 

 

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM