day3 html 表格/表單控件

Html body級别标記2

注釋，前台不顯示

<!-- 在此處寫注釋 -->

注釋

表格

• 标記說明

  table:表格 tr：表格中的行 td:行中的列:實際填值的層級 以上是層級/包含的關系

• 屬性說明
  • table層級的說明

border 最外層的邊線粗細，預設不顯示為0（在tr td層級之間無效）

width 寬 height 高

cellspacing 表格内的每個格子之間的間隙，預設為2px 如果想實作行内線的粗細調整，可通過設定bgcolor将背景塗黑，再調整間隙，讓間隙加大，漏出背景色來實作

cellpadding 表格邊框和表格内内容（文字/圖檔等）之間的距離

• 全層級的說明

  align 指定行或者列左右對齊方式，值 left、center、right 在table上時為整個表格在網頁上的對齊方式，在tr上是在目前行（整行）的對齊方式（左中右） 在td上是目前行的目前列（某個格子）的對齊方式（左中右）

  valign 指定行或者列的上下對齊方式 值 top middle bottom 出現在table時，沒有任何效果 在tr中是目前行（整行）的垂直對齊方式（上中下） 在td上是目前行的目前列（某個格子）的水垂直對齊方式（上中下）

  bgcolor 背景色 table中：整個表格 tr 目前行的背景色 td 目前行的目前列的背景色

  background 背景圖檔

  background = 'timg.jpg'

  如果某個标簽在每個層級都有時，以最小層級的為準，如 當bgcolor在table tr td上設了不同的值，以最小的為準

eg:

<table>
		<tr>
			<td>
			行1列1
			</td>
			<td>
			行1列2
			</td>
			<td>
			行1列2
			</td>
		</tr>
		<tr>
			<td>
			行2列1
			</td>
			<td>
			行2列2
			</td>
			<td>
			行2列2
			</td>
		</tr>
    </table>
           

執行個體：

行1列1	行1列2	行1列2
行2列1	行2列2	行2列2

• 表格的跨行/跨列（合并單元格）

  rowspan 跨行（上下合并，合并列），屬性值代表合并了幾個格子，

  rowspan = '2'

  colspan 跨列（左右合并，合并行），屬性值代表合并了幾個格子，

  colspan = '2'

  其實意思就是這個格子占據了上下或者左右的幾個格子，是以被合并的格子不需要寫了

test：履歷

作業：

[位址](…\練習/0304 test1.html)

表單

<form>

表單，用于與使用者互動，進行資料的收集、處理和送出（收集使用者填寫的内容，進行一定的計算、包裝或者直接送出給後端）

屬性

action 設定資料送出的通路路徑

method 設定表單送出方式，預設為get

get（不推薦） 将表單采集的資料，跟随在後端處理程式的通路路徑後送出，因路徑長度限制（全部一共上限255個字元），是以資料量有限制的

post 将表單采集的資料封裝到防落協定中送出給後端處理程式

enctype 表單資料的編碼格式 預設為 application/x-www-form-urlencoded

值	描述
application/x-www-form-urlencoded	在發送前對所有字元進行編碼（預設）。
multipart/form-data	不對字元編碼。當使用有檔案上傳控件的表單時，該值是必需的。
text/plain	将空格轉換為 “+” 符号，但不編碼特殊字元。

輸入性表單元素

• 文本框

  <input name = "textbox1" type = "text" value = "預設值">

  name 擷取控件的元件名稱，字段名

  type 元件類型

  value 預設值

  maxlength=“8” 輸入字元最大長度限制

• 密碼框

  <input name = "psw" type = "password" value = "預設值">

  輸入資料将被顯示隐藏，其他與text一樣
• 單選按鈕

<input name = "danxuan"   type = "radio" value = "nan" checked = "checked"/>男
<input name = "danxuan"   type = "radio" value = "nv"/>女
           

當name一樣時，其為一組資料，其中隻可單選1個資料，在送出資料時，送出被中的資料的vaule

checked = “checked” 預設被選中

• 複選

<input name = "danxuan"   type = "checkbox" value = "nan"/>男
<input name = "danxuan"   type = "checkbox" value = "nv"/>女
           

當name一樣時，其為一組資料，可多選資料，在送出資料時，送出被中的資料的vaule

checked = “checked” 預設被選中

• 日期 ？預設值、日期格式等

  <input name = "textbox1" type = "date" >

  max=“1979-12-31” min=“1979-12-31” 最大最小值
• 檔案選擇

  <input name = "textbox1" type = "file" >

  accept 限制檔案格式字尾， accept=“image/gif, image/jpeg” 通過meme類型，或者隻記寫“.pdf”等字尾名進行限制，兩種可混用，如

  accept="image/gif,.pdf"

• 隐藏域

  <input name = "hid" type = "hidden" value = "test">

  設定隐藏域的資料值，用于送出固定值給後端
• 顔色框

  <input name = "yanse" type = "color" value = "#fffffff">

• 郵箱

  <input name = "mail" type = "email" >

  用于在送出時驗證郵箱是否合規
• 網址

  <input name = "url" type = "url" >

  用于在送出時驗證郵箱是否合規
• 送出按鈕

  <input name = "hid" type = "submit" value = "送出">

  value 在送出按鈕時顯示的值
• 表單重置

  <input type = "reset" value = "送出">

  value 在重置按鈕時顯示的值
• 按鈕

  <input type = "button" value = "送出"onclick = alert("我是一個消息框！")>

  value 在按鈕上顯示的值 ，onclick，在點選後觸發的事件
• 下拉按鈕

<select  name = "下拉上顯示的值">
   	<option value ='test1'>可選值1</option>
   	<option value ='test2'可選值2</option>
   	<option value ='test3'>可選值3</option>
   </select>
           

value 被送出的值，當value沒有時，被送出的為注釋内的值。

• 文本域

  <textarea cols = "20" rows = "10"></textarea>

  cols 每行字數/寬度，rows 行數/高度 當超出行數時，将生成滾動條

• 屬性：占位符（輸入框文字注釋，隻可在html5中使用）

  placeholder 屬性适用于以下的 input 類型：text, search, url, telephone, email 以及 password

  eg：

  <input type="search" name="user_search" placeholder="Search W3School" />

test：注冊