HTML 表格|表單
阿新 • • 發佈:2021-01-12
表格(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:密碼框--> 密 碼:<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>密 碼<input type="text"/></p> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </form>
常用屬性
- action在表單接收到資訊後,需要將資訊傳給伺服器進行處理;action屬性用於指定接受並處理表單資料的伺服器程式的url地址
- method用於設定表單資料的提交方式,其取值為get或post
- name用於指定表單的名稱,以區分同一個頁面中的多個表單
注意
- 每個表單都應該有自己的表單域