這個系列介紹了PHP很多的基本知識，有輸出以及查型別等等，但不知道大家有沒有發現就是沒有輸入，其實是因為PHP主要是在伺服器端執行，所以輸入就要搭配HTML form，扮演使用者與伺服器之間互動的橋樑，表單處理(Form Handling)透過HTML表單收集使用者輸入，並使用PHP的 $_GET 或 $_POST 超全域變數在伺服器端接收數據。
該系列會分為表單常用標籤介紹以及表單驗證，在開始之前可以先在htdocs下建立一個表單網頁 formaction.html 和接收資料的 form.php，接下來就先來認識 form 標籤以及其他常見標籤吧!
表單<form>
<form>標籤用來建立一個 HTML 表單容器，也因為是容器，所以裡面可以放入其他標籤，來建構出完整的表單內容，屬於區塊元素(block)，會換行以及佔滿整行寬度，可設定寬高，使用者可以透過 form 傳送資料到 web 伺服器處理，例如即將實作的登入介面就是最常見的範例。
支援屬性
action : 目標網址，告訴瀏覽器要將資料發送到的位置。
<form action="http://localhost:8080/test/form.php">
<!-- ....僅供學習使用 .... -->
</form>
method : 資料傳輸的 HTTP 協議，通常使用 get(將資料放在請求網址的網址參數列送出) 或 post(將資料放在HTTP傳輸封包的body中送出。
<form action="http://localhost:8080/test/form.php" method = 'post'>
<!-- ....僅供學習使用 .... -->
</form>
<!-- ....我是分隔線.... -->
<form action="http://localhost:8080/test/form.php" method = 'get'>
<!-- ....僅供學習使用 .... -->
</form>
name : 表單名稱，一份 HTML 裡表單名稱不可重複。
<form action="http://localhost:8080/test/form.php" name = 'form1'>
<!-- ....僅供學習使用 .... -->
</form>
autocomplete : 表單欄位是否會自動輸入 ( 在有輸入過的狀態下 )，可設定 on (預設)或 off。
<form action="http://localhost:8080/test/form.php" autocomplete="on">
<!-- ....僅供學習使用 .... -->
</form>
novalidate : 傳送資料時不對輸入資料進行驗證，像是<input>的type屬性為email時，如果輸入的不是email的格式就會出現警告訊息。
<form action="http://localhost:8080/test/form.php" novalidate>
<input name="email" type="email">
<button type="submit">送出</button>
</form>
enctype : 設定表單傳送到伺服器的編碼方式。
application/x-www-form-urlencoded(預設) : 將資料轉為 key1=value1&key2=value2 格式，特殊字元會被編碼（如空白變成 %20)，用於一般登入、搜尋、純文字表單。
multipart/form-data : 資料會被切成多個部分每個欄位都有自己的邊界，不會對內容進行編碼。用於控制表單文件的上傳，<input>的type屬性為file時使用。
text/plain : 將資料以純文字發送，不進行任何編碼。
<form action="http://localhost:8080/test/form.php" enctype="multipart/form-data">
<!-- ....僅供學習使用 .... -->
</form>
target : 伺服器處理資料回傳後，顯示資料的位置。
_self : 顯示在表單所在的當前視窗。
_blank : 顯示在新頁籤/視窗。
_parent : 顯示在上一層(父層)的視窗。
_top : 顯示在最頂層的視窗。
<form action="http://localhost:8080/test/form.php" target="_blank">
<!-- ....僅供學習使用 .... -->
</form>
這些屬性可能很熟悉，在BOM (Browser Object Model) 視窗層級出現過的概念。
accept-charset : 設定表單文字編碼，可以設定 UTF-8、ASCII 或 ISO-8859-1。
<form action="http://localhost:8080/test/form.php" accept-charset="ISO-8859-1">
<!-- ....僅供學習使用 .... -->
</form>
rel : 控制註釋和表單創建的連接類型。
<form action="http://localhost:8080/test/form.php" rel="nofollow">
<!-- ....僅供學習使用 .... -->
</form>
autocapitalize : 控制輸入文本是否自動大寫，以及如何自動大寫。
<form action="http://localhost:8080/test/form.php" autocapitalize="on">
<!-- ....僅供學習使用 .... -->
</form>
輸入<input>
input 輸入元素是 HTML 表單元件裡最重要也最特別的元素，可以根據類型 type 屬性的設定，轉換成不同的輸入型態，來與使用者互動並讓使用者輸入資料，下圖為常見的輸入型態。
圖一、常見input輸入型態
容器<div>
是區塊容器元素，用來包裹其他html元素，只要任何需要排版的位置，都有可能會透過<div>搭配 css(selector) 以及 js (html dom)進行編排，並將 HTML 文件的內容整理出不同獨立區塊 (block)。
<head>
<style>
.account{ <!-- ....class css語法 .... -->
background-color:red;
width: 200px;
height:auto;
}
#pw{ <!-- ....id css語法 .... -->
background-color:blue;
}
</style>
</head>
<body>
<div class="account">
<form action="http://localhost:8080/test/form.php">
<input type="text">
</form>
</div>
<div id="pw">
<form>
<input type="password">
</form>
</div>
</body>
id vs class
ID(id)與類別(class)都是可套用到標籤上的屬性，設定 ID 就像幫標籤取一個「專屬的名字」，只能用一次，而類別(class) 就像是幫標籤貼上一個「分類」，可以重複使用。
CSS 的語法分別是寫一個# id名稱{}、. class名稱{}，大括號內放入套用的屬性以及屬性值，之後只要修改 ID 或類別的 CSS，有套用過的標籤都會同步修改。
標籤<label>
為表單的欄位標題元素，通常作為表單的標題，為了提升便利性，利用 label 的 for屬性來增加表單元件的可點擊範圍，將 for 的屬性值設定為某表單元件的 id 值，藉此來建立關聯，或者是把表單元件寫在 label 元素裡面，以便隱式關聯。除此之外，form屬性用於定義該標籤所屬的一個或多個表單（<form>），解決 <label> 必須在 <form> 內部才能關聯控制項的限制。它允許標籤文字位於表單外部，透過 id 連結到特定的表單控制項，提升無障礙體驗。
<form id = "myform" action="http://localhost:8080/test/form.php">
<label for="username">使用者名稱: </label>
<input type="text" id="username">
<label for ="password">密碼: <input type='password' id="password"></label>
</form>
<label form="myform" for="username">測試用: </label>
按鈕<button>
為可點擊的按鈕元素，通常會放在表單裡面讓使用者點擊，除了可以用來做為表單的送出之外，還可以用來做些特效讓網友互動，也因為是容器型標籤(Container Tags)，甚至可以包含豐富內容，像是文字與圖像等等其他html標籤。
支援屬性
disabled : 停用按鈕，僅能看不能點擊。
name : 按鈕名稱。
type : 按鈕類型，有 button（普通按鈕）、reset（重設按鈕）、submit（提交按鈕）。
value : 隨表單送出的值。
<button disabled> ok </button>
<button name="press"> ok </button>
<button type="reset">重設用</button>
<button value > </button>
本篇文章到這裡就結束了，如果喜歡我的文章或覺得有用的話，歡迎動動手指點擊愛心，你/妳的支持是我最大的動力，我們下篇文章見🙌。
