前端筆記—從入門到墳墓[HTML+CSS][表格與表單]
表格
<table>
標籤常用屬性:cellspacing
設定單元格之間的距離,cellpadding
設定單元格內容到單元格邊的距離,border
設定單元格邊框寬度。
注:以上屬性單位皆為px。
<td>
標籤常用屬性:colspan
設定單元格橫跨的列數,rowspan
設定單元格縱跨的行數,通常也稱之為合併列與合併行。
<table border="2" cellspacing="20" cellpadding="20">
<caption>表格標題</caption>
<tbody>
<tr>
<th >列1</th>
<th>列2</th>
<th>列3</th>
<th>列4</th>
<th>列5</th>
</tr>
<tr>
<td colspan="2" rowspan="2">元素1</td>
<td>元素2</td>
<td>元素3</td>
<td>元素next</td>
</tr>
<tr>
< td>元素4</td>
<td>元素5</td>
<td>元素6</td>
</tr>
</tbody>
</table>
執行結果:
表單
一個簡單的表單結構,<form>
標籤屬性:action
(英譯:行動)——表單提交路徑。method
(英譯:方法)——表單提交方式,通常有post
和get
兩種方式。
注:說到
post
和get
兩種方式,其各自都有一些特點:get
方式:表單資料通過URL中的?
引數傳遞到伺服器,可以在位址列中看到提交的內容,資料長度有限制,因為URL地址長度有限(位址列長度限制一般為2000個字元)。post
方式:表單資料是通過請求傳遞到服務端的(資料放於請求報文的請求體中),在介面上看不到,可以提交任何型別資料(包括檔案),由於介面看不見,瀏覽器也不會儲存,所以更安全一些
<form action="" method="post">
使用者名稱:<input type="text">
密碼:<input type="password">
<input type="submit">
</form>
執行結果:
> html4中表單內input標籤
其中<label>
標籤為input
元素定義標註。label
元素不會向用戶呈現任何特殊效果。不過在label
元素內點選文字,就會觸發此控制元件。
注:
<label>
標籤屬性:for
應當與相關元素的id
屬性相同。
<label for="text">輸入框</label>
<input type="text" name="" id="text" />
<label for="password">密碼框</label>
<input type="password" name="" id="password" />
<label for="submit">提交</label>
<input type="submit" name="" id="submit" />
<label for="reset">重置</label>
<input type="reset" name="" id="reset" />
<label for="hidden">隱藏框</label>
<input type="hidden" name="" id="hidden" />
注:隱藏框,通常用作在表單記憶體儲使用者不需要知道的資料,如:id值或是限制上傳檔案大小(如下)等。
<input type="hidden" name="MAX_FILE_SIZE" value="30000" id="hidden" />
執行結果:
> html4中表單其他標籤
<textarea>
標籤常用屬性:cols
——設定每行中的字元數,rows
——設定文字框行數,利用css樣式"resize:none"
可以設定文字框禁止使用者拉伸操作。
<label for="textarea">文字框</label>
<textarea cols="30" rows="10" id="textarea"></textarea>
注:在js中,雖然用value和innerText都可以賦值,但是推薦用value賦值(如下)。
textareaElement.value = 'a';
執行結果:
複選框常用屬性:checked="checked"
可用於設定預設選中值。
在表單提交時,通常資料最小單元都是一個鍵值對形式,而
checked
的鍵對應的是name
屬性值,值對應的是value
屬性值。
<input type="checkbox" name="checkbox1" value="checkbox1" id="checkbox1">
<label for="checkbox1">複選框1</label>
<input type="checkbox" name="checkbox2" value="checkbox2" id="checkbox2">
<label for="checkbox2">複選框2</label>
<input type="checkbox" name="checkbox3" value="checkbox3" id="checkbox3">
<label for="checkbox3">複選框3</label>
單選框常用屬性:checked="checked"
可用於設定預設選中值。
在表單提交時,
radio
的鍵對應的是name
屬性值(因為單選,radio
的name
是相同值),值對應的是value
屬性值。
<input type="radio" name="radio" value="radio1" id="radio1">
<label for="radio1">單選框1</label>
<input type="radio" name="radio" value="radio2" id="radio2">
<label for="radio2">單選框2</label>
下拉框,<option>
標籤常用屬性:selected="selected"
可以設定預設選中此選項。
注:
<option>
標籤內利用css樣式display: none
可以隱藏一個選項。這樣一來如“請選擇”選項就無法選中了。
<label for="select">單項選擇列表</label>
<select name="select" id="select">
<option value="0" style="display: none">請選擇</option>
<!-- 利用css樣式display: none隱藏一個選項-->
<option value="元素1">元素1</option>
<option value="元素2">元素2</option>
<option value="元素3">元素3</option>
<!-- selected="selected"屬性設定預設選中值 -->
</select>
執行結果:
> 檔案上傳標籤
檔案上傳標籤,常用屬性:accept
——校驗上傳檔案型別(不安全的),可以寫入檔案字尾名或是檔案的mime type值(如:text/xml
, image/jpeg
等),multiple
——設定多檔案上傳,H5新增屬性。
在檔案上傳時,需要設定
<form>
標籤內的method="post"
和enctype="multiple/form-"
。
<form action="" method="post" enctype="multiple/form-">
<label for="file">上傳</label>
<input type="file" name="" id="file" />
<input type="file" name="" id="file2" accept=".lrc,.txt" />
<!-- accept屬性,可傳入值可以是檔案字尾名,也可以是檔案的midi屬性 -->
<input type="file" name="" id="file3" multiple/>
</form>
> H5新增的表單標籤及屬性
新增表單標籤屬性ie8存在相容問題,慎用。
<!-- html5新增標籤 -->
<!-- 郵箱格式輸入 -->
<input type="email"><br />
<!-- 手機號格式輸入 -->
<input type="tel"><br />
<!-- url格式輸入 -->
<input type="url"><br />
<!-- 數字格式輸入 -->
<input type="number"><br />
<!-- 搜尋框 -->
<input type="search"><br />
<!-- 自由拖動滑塊 -->
<input type="range"><br />
<!-- 小時分鐘選擇框 -->
<input type="time"><br />
<!-- 年月日選擇框 -->
<input type="date"><br />
<!-- 年月選擇框 -->
<input type="month"><br />
<!-- 年周選擇框 -->
<input type="week"><br />
執行結果: 設定禁用屬性
<!-- html5新增屬性 -->
<input type="text" disabled value="設定禁用屬性">
設定只讀屬性
<input type="text" readonly value="設定只讀屬性">
載入頁面結束後自動獲取焦點
<input type="text" autofocus value="載入頁面結束後自動獲取焦點">
提價表單時不能為空
<input type="text" required value="提價表單時不能為空">
用Alt + s 組合鍵,為此元素獲取焦點
<input type="text" accesskey="s" value="用Alt + s 組合鍵,為此元素獲取焦點">
執行結果: