1. 程式人生 > 實用技巧 >HTML 表格|表單

HTML 表格|表單

表格(table)

  • 不是佈局,是用來處理資料的
  • 表格標籤
<table>
    #行標籤
    <tr>
        <td>單元格標籤</td>
    </tr>
</table>

#表格中沒有所謂的列標籤,只有行標籤<tr>和單元格標籤<td>

注意事項

  • <tr>標籤只能巢狀<td>標籤
  • <td>標籤中可以巢狀所有元素

表格屬性

  • border:表格邊框
  • cellspacing:設定單元格與單元格的空白間距(預設為2畫素 2px)
  • cellpadding:設定單元格內容與單元格邊框的空白間距(預設為1畫素 1px)
  • width
  • height
  • algin:設定表格在網頁中的水平對齊方式

表頭標籤

<table>
    #行標籤
    <tr>
        <th>表頭標籤:文字會在單元格中自動加粗居中</th>
    </tr>
</table>

表格結構

  • thead:表頭部分
  • tbody:主體部分
<table>
  #表頭
<thead> <tr> <th>表頭標籤:文字會在單元格中自動加粗居中</th> </
tr> </thead>

  #主體
<tbody> <tr> <td>單元格標籤</td> </tr> </tbody> </table>

表格標題

  • caption
<table>
    <caption>表格標題</caption>
    <thead>表頭</thead>
    <tbody>主體</tbody>
</table
>

合併單元格

  • 跨行合併:rowspan
  • 跨列合併:colspan
<tr>
    <td rowspan="2">單元格標籤1</td>
    <td>單元格標籤2</td>
    <td>單元格標籤3</td>
</tr>
<tr>
    <td colspan="2">單元格標籤23</td>
</tr>

表單

  • 為了收集使用者資訊
  • 由3部分組成:
    • 表單域
    • 提示文字(表單控制元件前的提示資訊)
    • 表單控制元件(表單元素/表單)

表單控制元件

  • 包含了具體的表單功能項,如單行文字輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等

input 控制元件

  • 單標籤
  • 可以通過type屬性變換input的型別,變成各種表單控制元件

input 表單控制元件屬性

  • type 詳細含義
<!--text:文字框-->
使用者名稱:<input type="text" value="文字框中的值" />

<!--password:密碼框-->&nbsp;碼:<input type="password" maxlength="6"/>

<!--radio:單選框-->
<!--通過相同的name值來實現一組單選框-->
性別:<input type="radio" name="sex" />女
   <input type="radio" name="sex" /><!--checkbox:複選框-->
<!--可以同時選擇多個-->
愛好:<input type="checkbox" name="hobby" />足球
   <input type="radio" name="hobby" />音樂
   <input type="radio" name="hobby" />跳舞

<!--button:普通按鈕-->
搜尋:<input type="button" value="搜尋表單" />

<!--submit:提交按鈕-->
<!--預設會顯示‘提交’兩個字-->
搜尋:<input type="submit" value="提交表單" />

<!--reset:重置按鈕-->
搜尋:<input type="button" value="重置表單" />

<!--image:圖片按鈕-->
搜尋:<input type="image" src="img.jpg" />

<!--file:檔案按鈕-->
<!--用來選擇檔案-->
搜尋:<input type="file" />

label標籤

  • label標籤為input元素定義標註
  • 作用:用於繫結一個表單元素,當點選label標籤的時候,被繫結的表單元素就會獲得輸入焦點
  • for屬性規定label與哪個表單元素繫結
<!-- 當只有一個input控制元件時,可以使用label直接進行包裹input -->
<label>輸入賬號:
  <input type="text">
</
label> <!-- 當label中有多個表單時,想定位到某個表單中,可以通過for id 的格式來進行 --> <label for="two">輸入賬號:
  <input type="text" id="two">
  <
input type="text">
</
label>

textarea控制元件(文字域)

  • 如果需要輸入大量的資訊,就需要用到<textarea></textarea>標籤
<!-- <textarea cols="每行中的字元數,不常用,會被css樣式代替" rows="顯示的行數,不常用,會被css樣式代替"></textarea> -->
<textarea>請輸入留言</textarea>

下拉選單

  • <select></select>中至少應包含一對<option></option>
  • 在<option>中定義selected="selected"時,當前項即為被預設選中項
籍貫:
<select>
    <option>點選選擇你的籍貫</option>
    <option selected="selected">陝西</option>
    <option>廣州</option>
    <option>上海</option>
    <option>北京</option>
</select>

表單域(form)

區別

  • 文字域:textarea 用來留言的
  • 檔案域:input type=”file“ 用來上傳檔案
  • 表單域:form 收集表單控制元件資訊,並且提交的

表單域

<!-- <form action="url地址" method="提交方式" name="表單名稱"></form> -->
<form action="">
    <p>使用者名稱:<input type="text"/></p>
    <p>&nbsp;<input type="text"/></p>
    <input type="submit" value="提交"/>
    <input type="reset" value="重置"/>
</form>

常用屬性

  • action在表單接收到資訊後,需要將資訊傳給伺服器進行處理;action屬性用於指定接受並處理表單資料的伺服器程式的url地址
  • method用於設定表單資料的提交方式,其取值為get或post
  • name用於指定表單的名稱,以區分同一個頁面中的多個表單

注意

  • 每個表單都應該有自己的表單域