` of our form is the payment information. We have three distinct controls along with their labels, each contained inside a ``. The first is a drop-down menu ({{htmlelement("select")}}) for selecting credit card type. The second is an ` ` element of type `tel`, for entering a credit card number; while we could have used the `number` type, we don't want the number's spinner UI. The last one is an ` ` element of type `date`, for entering the expiration date of the card; this one will come up with a date picker widget in supporting browsers, and fall back to a normal text input in non-supporting browsers. These newer input types are reintroduced in [The HTML5 input types](/zh-TW/docs/Learn/Forms/HTML5_input_types).
+
+ Enter the following below the previous section:
+
+ ```html
+
+ ```
+
+7. The last section we'll add is a lot simpler, containing only a {{htmlelement("button")}} of type `submit`, for submitting the form data. Add this to the bottom of your form now:
+
+ ```html
+
Validate the payment
+ ```
+
+You can see the finished form in action below (also find it on GitHub — see our payment-form.html [source](https://github.com/mdn/learning-area/blob/master/html/forms/html-form-structure/payment-form.html) and [running live](https://mdn.github.io/learning-area/html/forms/html-form-structure/payment-form.html)):
+
+{{EmbedLiveSample("A_payment_form","100%",620, "", "Learn/Forms/How_to_structure_a_web_form/Example")}}
+
+## 結論
+
+你現在擁有了正確建構 HTML 表單的所有知識。接下來將介紹本章介紹的許多功能。在下一篇文章中,將詳細探討如何使用各種不同類型的表單小部件,來收集用戶的訊息。
+
+## 參見
+
+- [A List Apart: _Sensible Forms: A Form Usability Checklist_](http://www.alistapart.com/articles/sensibleforms/)
+
+{{PreviousMenuNext("Learn/Forms/Your_first_form", "Learn/Forms/Basic_native_form_controls", "Learn/Forms")}}
+
+## 在本模塊
+
+- [Your first form](/zh-TW/docs/Learn/Forms/Your_first_form)
+- [How to structure a web form](/zh-TW/docs/Learn/Forms/How_to_structure_a_web_form)
+- [Basic native form controls](/zh-TW/docs/Learn/Forms/Basic_native_form_controls)
+- [The HTML5 input types](/zh-TW/docs/Learn/Forms/HTML5_input_types)
+- [Other form controls](/zh-TW/docs/Learn/Forms/Other_form_controls)
+- [Styling web forms](/zh-TW/docs/Learn/Forms/Styling_web_forms)
+- [Advanced form styling](/zh-TW/docs/Learn/Forms/Advanced_form_styling)
+- [UI pseudo-classes](/zh-TW/docs/Learn/Forms/UI_pseudo-classes)
+- [Client-side form validation](/zh-TW/docs/Learn/Forms/Form_validation)
+- [Sending form data](/zh-TW/docs/Learn/Forms/Sending_and_retrieving_form_data)
+
+### Advanced Topics
+
+- [How to build custom form controls](/zh-TW/docs/Learn/Forms/How_to_build_custom_form_controls)
+- [Sending forms through JavaScript](/zh-TW/docs/Learn/Forms/Sending_forms_through_JavaScript)
+- [Property compatibility table for form widgets](/zh-TW/docs/Learn/Forms/Property_compatibility_table_for_form_widgets)
diff --git a/files/zh-tw/learn/forms/index.html b/files/zh-tw/learn/forms/index.html
deleted file mode 100644
index f622a3685569c9..00000000000000
--- a/files/zh-tw/learn/forms/index.html
+++ /dev/null
@@ -1,360 +0,0 @@
----
-title: 網站表單-與數據合作
-slug: Learn/Forms
-tags:
- - Featured
- - Forms
- - Guide
- - HTML
- - NeedsTranslation
- - TopicStub
- - Web
- - 待翻譯
-translation_of: Learn/Forms
-original_slug: Learn/HTML/Forms
----
-這篇指南提供了一系列的文章,幫你掌握HTML表單的基本知識。對於與使用者互動,網站表單是一項十分有力的工具,最常使用於用戶數據蒐集,或控制使用者介面。但由於一些歷史與技術上的因素,並沒有顯著的方法發揮表單的潛力。在下面的指引中,我們將介紹網站表單所有基本面向,包括標記他們的HTML結構、設定控制器樣式、驗證數據及將數距提送至伺服器
-
-參考文章列表
-
-
- 我的第一個HTML表單
- 如何構建 HTML 表單
- 本機表單控件
- CSS和HTML表單
-
- 造型HTML表單
- HTML表單高級造型
- 表單控件屬性兼容表
-
-
- 發送和檢索表單數據
- 數據表單驗證
- 如何創建自定義表單控件
- 通過JavaScript發送形式
-
- 使用FORMDATA 對象
-
-
- 在傳統的瀏覽器的HTML表單
-
-
-HTML 文件
-
-HTML 元素
-
-
-
-
- HTML 元素
- 元素的 DOM interface
- 說明
-
-
-
-
- {{HTMLElement("button")}}
- {{domxref("HTMLButtonElement")}}
- 該按鈕
元素表示一個可點擊的按鈕。
-
-
- {{HTMLElement("datalist")}}
- {{domxref("HTMLDataListElement")}}
- 該數據列表元素包含了一組 {{ HTMLElement("option") }} 表示對其他表單元素的值可能的選擇要素。
-
-
- {{HTMLElement("fieldset")}}
- {{domxref("HTMLFieldSetElement")}}
- 該字段集是用來在表單中的組數表單元素。
-
-
- {{HTMLElement("form")}}
- {{domxref("HTMLFormElement")}}
- 的形式
元素表示的文件的一部分,它包含使用戶能夠提交信息給web服務器的交互元件。
-
-
- {{HTMLElement("input")}}
- {{domxref("HTMLInputElement")}}
- 該 輸入
元素用於創建表格的交互式控制。
-
-
- {{HTMLElement("keygen")}}
- {{domxref("HTMLKeygenElement")}}
- 所述凱基
元素存在,以促進生成的密鑰材料,並提交了公開密鑰的作為HTML形式的一部分
-
-
- {{HTMLElement("label")}}
- {{domxref("HTMLLabelElement")}}
- 該標籤
元素代表一個項目在用戶界面的標題
-
-
- {{HTMLElement("legend")}}
- {{domxref("HTMLLegendElement")}}
- 在傳說
元素代表一個標題為其父 {{ HTMLElement("fieldset") }} 的內容。
-
-
- {{HTMLElement("meter")}}
- {{domxref("HTMLMeterElement")}}
- 所述米
元素表示一個已知的範圍內的任一標量值或分數值。
-
-
- {{HTMLElement("optgroup")}}
- {{domxref("HTMLOptGroupElement")}}
- 在OPTGROUP
元素創建一個 {{ HTMLElement("select") }} 元素中的一組選項。
-
-
- {{HTMLElement("option")}}
- {{domxref("HTMLOptionElement")}}
- 在HTML 選項
元素用於創建表示 {{ HTMLElement("select") }} ,一個 {{ HTMLElement("optgroup") }} 或 {{ HTMLElement("datalist") }} 元素中的項目的控制。
-
-
- {{HTMLElement("output")}}
- {{domxref("HTMLOutputElement")}}
- 的輸出
元素表示一個計算的結果。
-
-
- {{HTMLElement("progress")}}
- {{domxref("HTMLProgressElement")}}
- 的進展
元素用於查看任務的完成進度。
-
-
- {{HTMLElement("select")}}
- {{domxref("HTMLSelectElement")}}
- 在選擇
元素代表呈現一個選項菜單的控制。
-
-
- {{HTMLElement("textarea")}}
- {{domxref("HTMLTextAreaElement")}}
- 該textarea的
元素代表多行純文本編輯控制。
-
-
-
-
-
-
注: 所有的表單元素,因為所有的HTML元素,支持 {{domxref("HTMLElement")}} DOM接口。
-
-
-HTML 屬性
-
-
-
-
- 屬性
- 能使用該屬性的 HTML 元素
- 說明
-
-
-
-
- accept
- {{ HTMLElement("form") }}, {{ HTMLElement("input") }}
- 的類型列表服務器接受,通常是文件類型。
-
-
- accept-charset
- {{ HTMLElement("form") }}
- 支持的字符集列表。
-
-
- action
- {{ HTMLElement("form") }}
- 一個程序處理通過表單提交的信息的URI。
-
-
- autocomplete
- {{ HTMLElement("form") }}, {{ HTMLElement("input") }}
- 指示是否在這個表單控件可以在默認情況下有其值由瀏覽器自動完成。
-
-
- autofocus
- {{ HTMLElement("button") }}、 {{ HTMLElement("input") }}、 {{ HTMLElement("keygen") }}、 {{ HTMLElement("select") }}、 {{ HTMLElement("textarea") }}
- 該元素應該在頁面加載後自動聚焦。
-
-
- challenge
- {{ HTMLElement("keygen") }}
- 即隨著公共密鑰提交的挑戰字符串。
-
-
- checked
- {{ HTMLElement("input") }}
- 指示是否應將元素在頁面加載檢查。
-
-
- cols
- {{ HTMLElement("textarea") }}
- 限定在一個textarea的列數。
-
-
- data
- {{ HTMLElement("object") }}
- 指定的資源的URL。
-
-
- dirname
- {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
-
-
-
- disabled
- {{ HTMLElement("button") }} 、{{ HTMLElement("fieldset") }} 、 {{ HTMLElement("input") }} 、 {{ HTMLElement("keygen") }} 、 {{ HTMLElement("optgroup") }} 、 {{ HTMLElement("option") }} 、 {{ HTMLElement("select") }} 、 {{ HTMLElement("textarea")}}
- 表明用戶是否可以與元件進行交互。
-
-
- enctype
- {{ HTMLElement("form") }}
- 定義當表單數據的內容類型的方法
是POST。
-
-
- for
- {{ HTMLElement("label") }}、 {{ HTMLElement("output") }}
- 描述了屬於這一種元素。
-
-
- form
- {{ HTMLElement("button") }} 、 {{ HTMLElement("fieldset") }} 、 {{ HTMLElement("input") }} 、 {{ HTMLElement("keygen") }} 、 {{ HTMLElement("label") }} 、 {{ HTMLElement("meter") }} 、 {{ HTMLElement("object") }} 、 {{ HTMLElement("output") }} 、 {{ HTMLElement("progress") }} 、 {{ HTMLElement("select") }} 、 {{ HTMLElement("textarea")}}
- 表明是元件的所有者的形式。
-
-
- high
- {{ HTMLElement("meter") }}
- 表示下界的上限範圍。
-
-
- keytype
- {{ HTMLElement("keygen") }}
- 指定鍵所產生的類型。
-
-
- list
- {{ HTMLElement("input") }}
- 標識的預定義的選項的列表,以向用戶建議。
-
-
- low
- {{ HTMLElement("meter") }}
- 指示上限較低的範圍內。
-
-
- max
- {{ HTMLElement("input") }} 、 {{ HTMLElement("meter") }} 、 {{ HTMLElement("progress") }}
- 指示所允許的最大值。
-
-
- maxlength
- {{ HTMLElement("input") }} 、 {{ HTMLElement("textarea") }}
- 定義了在元件允許的字符的最大數目。
-
-
- method
- {{HTMLElement("form")}}
- 定義提交表單時使用的HTTP方法。可GET(默認)或POST。
-
-
- min
- {{ HTMLElement("input") }} 、 {{ HTMLElement("meter") }}
- 指示所允許的最小值。
-
-
- multiple
- {{ HTMLElement("input") }}、 {{ HTMLElement("select") }}
- 表示是否多個值所用的類型的輸入可以輸入電子郵件
或文件
。
-
-
- name
- {{ HTMLElement("button") }} 、 {{ HTMLElement("form") }} 、 {{ HTMLElement("fieldset") }} 、 {{ HTMLElement("input") }} 、 {{ HTMLElement("keygen") }} 、 {{ HTMLElement("output") }} 、 {{ HTMLElement("select") }} 、 {{ HTMLElement("textarea") }}
- 該元素的名稱。例如所使用的服務器,以確定在表單提交的字段。
-
-
- novalidate
- {{ HTMLElement("form") }}
- 此屬性表明,當提交表單應該無法通過驗證。
-
-
- optimum
- {{ HTMLElement("meter") }}
- 表示最佳數值。
-
-
- pattern
- {{ HTMLElement("input") }}
- 定義一個正則表達式元素的值將針對驗證。
-
-
- placeholder
- {{ HTMLElement("input") }}、 {{ HTMLElement("textarea") }}
- 提供一個提示什麼可以在字段中輸入的用戶。
-
-
- readonly
- {{ HTMLElement("input") }} 、 {{ HTMLElement("textarea") }}
- 指示該元素是否可以編輯或沒有。
-
-
- required
- {{ HTMLElement("input") }} 、 {{ HTMLElement("select") }}、 {{ HTMLElement("textarea") }}
- 指示此元素是否必填。
-
-
- rows
- {{ HTMLElement("textarea") }}
- 限定在一個textarea的行數。
-
-
- selected
- {{ HTMLElement("option") }}
- 定義了將在頁面加載所選的值。
-
-
- size
- {{ HTMLElement("input") }}、 {{ HTMLElement("select") }}
- 限定了元件的寬度(以像素為單位)。如果該元素的類型
的屬性是文本
或密碼
那麼它的字符數。
-
-
- src
- {{ HTMLElement("img") }}
- 可嵌入內容的URL。
-
-
- step
- {{ HTMLElement("input") }}
-
-
-
- target
- {{ HTMLElement("form") }}
-
-
-
- type
- {{ HTMLElement("button") }} 、 {{ HTMLElement("input") }}
- 限定了元件的類型。
-
-
- usemap
- {{ HTMLElement("img") }}
-
-
-
- value
- {{ HTMLElement("button") }}、 {{ HTMLElement("option") }}、 {{ HTMLElement("input") }}、 {{ HTMLElement("meter") }}、 {{ HTMLElement("progress") }}
- 定義了將被顯示在頁面上的負載元件的默認值。
-
-
- wrap
- {{ HTMLElement("textarea") }}
- 指示文本是否應被包裹或沒有。
-
-
-
-
-規範性引用文件
-
-
-
-
diff --git a/files/zh-tw/learn/forms/index.md b/files/zh-tw/learn/forms/index.md
new file mode 100644
index 00000000000000..2b99466d854752
--- /dev/null
+++ b/files/zh-tw/learn/forms/index.md
@@ -0,0 +1,363 @@
+---
+title: 網站表單-與數據合作
+slug: Learn/Forms
+tags:
+ - Featured
+ - Forms
+ - Guide
+ - HTML
+ - NeedsTranslation
+ - TopicStub
+ - Web
+ - 待翻譯
+translation_of: Learn/Forms
+original_slug: Learn/HTML/Forms
+---
+這篇指南提供了一系列的文章,幫你掌握 HTML 表單的基本知識。對於與使用者互動,網站表單是一項十分有力的工具,最常使用於用戶數據蒐集,或控制使用者介面。但由於一些歷史與技術上的因素,並沒有顯著的方法發揮表單的潛力。在下面的指引中,我們將介紹網站表單所有基本面向,包括標記他們的 HTML 結構、設定控制器樣式、驗證數據及將數距提送至伺服器
+
+## 參考文章列表
+
+1. [我的第一個 HTML 表單](/zh-TW/docs/HTML/Forms/My_first_HTML_form)
+2. [如何構建 HTML 表單](/zh-TW/docs/HTML/Forms/How_to_structure_an_HTML_form)
+3. [本機表單控件](/zh-TW/docs/HTML/Forms/The_native_form_widgets)
+4. CSS 和 HTML 表單
+
+ 1. [造型 HTML 表單](/zh-TW/docs/HTML/Forms/Styling_HTML_forms)
+ 2. [HTML 表單高級造型](/zh-TW/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms)
+ 3. [表單控件屬性兼容表](/zh-TW/docs/Property_compatibility_table_for_form_widgets)
+
+5. [發送和檢索表單數據](/zh-TW/docs/HTML/Forms/Sending_and_retrieving_form_data)
+6. [數據表單驗證](/zh-TW/docs/HTML/Forms/Data_form_validation)
+7. [如何創建自定義表單控件](/zh-TW/docs/HTML/Forms/How_to_build_custom_form_widgets)
+8. [通過 JavaScript 發送形式](/zh-TW/docs/HTML/Forms/Sending_forms_through_JavaScript)
+
+ 1. [使用 FORMDATA 對象](/zh-TW/docs/DOM/XMLHttpRequest/FormData/Using_FormData_Objects)
+
+9. [在傳統的瀏覽器的 HTML 表單](/zh-TW/docs/HTML/Forms/HTML_forms_in_legacy_browsers)
+
+## HTML 文件
+
+### HTML 元素
+
+| HTML 元素 | 元素的 DOM interface | 說明 |
+| ------------------------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| {{HTMLElement("button")}} | {{domxref("HTMLButtonElement")}} | 該`按鈕`元素表示一個可點擊的按鈕。 |
+| {{HTMLElement("datalist")}} | {{domxref("HTMLDataListElement")}} | 該數據列表元素包含了一組 {{ HTMLElement("option") }} 表示對其他表單元素的值可能的選擇要素。 |
+| {{HTMLElement("fieldset")}} | {{domxref("HTMLFieldSetElement")}} | 該字段集是用來在表單中的組數表單元素。 |
+| {{HTMLElement("form")}} | {{domxref("HTMLFormElement")}} | 的`形式`元素表示的文件的一部分,它包含使用戶能夠提交信息給 web 服務器的交互元件。 |
+| {{HTMLElement("input")}} | {{domxref("HTMLInputElement")}} | 該 `輸入`元素用於創建表格的交互式控制。 |
+| {{HTMLElement("keygen")}} | {{domxref("HTMLKeygenElement")}} | 所述`凱基`元素存在,以促進生成的密鑰材料,並提交了公開密鑰的作為 HTML 形式的一部分 |
+| {{HTMLElement("label")}} | {{domxref("HTMLLabelElement")}} | 該`標籤`元素代表一個項目在用戶界面的標題 |
+| {{HTMLElement("legend")}} | {{domxref("HTMLLegendElement")}} | 在`傳說`元素代表一個標題為其父 {{ HTMLElement("fieldset") }} 的內容。 |
+| {{HTMLElement("meter")}} | {{domxref("HTMLMeterElement")}} | 所述`米`元素表示一個已知的範圍內的任一標量值或分數值。 |
+| {{HTMLElement("optgroup")}} | {{domxref("HTMLOptGroupElement")}} | 在`OPTGROUP`元素創建一個 {{ HTMLElement("select") }} 元素中的一組選項。 |
+| {{HTMLElement("option")}} | {{domxref("HTMLOptionElement")}} | 在 HTML `選項`元素用於創建表示 {{ HTMLElement("select") }} ,一個 {{ HTMLElement("optgroup") }} 或 {{ HTMLElement("datalist") }} 元素中的項目的控制。\*\*`` |
+| {{HTMLElement("output")}} | {{domxref("HTMLOutputElement")}} | 的`輸出`元素表示一個計算的結果。 |
+| {{HTMLElement("progress")}} | {{domxref("HTMLProgressElement")}} | 的`進展`元素用於查看任務的完成進度。 |
+| {{HTMLElement("select")}} | {{domxref("HTMLSelectElement")}} | 在`選擇`元素代表呈現一個選項菜單的控制。 |
+| {{HTMLElement("textarea")}} | {{domxref("HTMLTextAreaElement")}} | 該`textarea的`元素代表多行純文本編輯控制。 |
+
+> **備註:** 所有的表單元素,因為所有的 HTML 元素,支持 {{domxref("HTMLElement")}} DOM 接口。
+
+### HTML 屬性
+
+
+
+
+ 屬性
+ 能使用該屬性的 HTML 元素
+ 說明
+
+
+
+
+ accept
+
+ {{ HTMLElement("form") }}, {{ HTMLElement("input") }}
+
+ 的類型列表服務器接受,通常是文件類型。
+
+
+ accept-charset
+ {{ HTMLElement("form") }}
+ 支持的字符集列表。
+
+
+ action
+ {{ HTMLElement("form") }}
+ 一個程序處理通過表單提交的信息的URI。
+
+
+ autocomplete
+
+ {{ HTMLElement("form") }}, {{ HTMLElement("input") }}
+
+ 指示是否在這個表單控件可以在默認情況下有其值由瀏覽器自動完成。
+
+
+ autofocus
+
+ {{ HTMLElement("button") }}、
+ {{ HTMLElement("input") }}、
+ {{ HTMLElement("keygen") }}、
+ {{ HTMLElement("select") }}、
+ {{ HTMLElement("textarea") }}
+
+ 該元素應該在頁面加載後自動聚焦。
+
+
+ challenge
+ {{ HTMLElement("keygen") }}
+ 即隨著公共密鑰提交的挑戰字符串。
+
+
+ checked
+ {{ HTMLElement("input") }}
+ 指示是否應將元素在頁面加載檢查。
+
+
+ cols
+ {{ HTMLElement("textarea") }}
+ 限定在一個textarea的列數。
+
+
+ data
+ {{ HTMLElement("object") }}
+ 指定的資源的URL。
+
+
+ dirname
+
+ {{ HTMLElement("input") }},
+ {{ HTMLElement("textarea") }}
+
+
+
+
+ disabled
+
+ {{ HTMLElement("button") }}
+ 、{{ HTMLElement("fieldset") }} 、
+ {{ HTMLElement("input") }} 、
+ {{ HTMLElement("keygen") }} 、
+ {{ HTMLElement("optgroup") }} 、
+ {{ HTMLElement("option") }} 、
+ {{ HTMLElement("select") }} 、
+ {{ HTMLElement("textarea")}}
+
+ 表明用戶是否可以與元件進行交互。
+
+
+ enctype
+ {{ HTMLElement("form") }}
+ 定義當表單數據的內容類型的方法
是POST。
+
+
+ for
+
+ {{ HTMLElement("label") }}、
+ {{ HTMLElement("output") }}
+
+ 描述了屬於這一種元素。
+
+
+ form
+
+ {{ HTMLElement("button") }} 、
+ {{ HTMLElement("fieldset") }} 、
+ {{ HTMLElement("input") }} 、
+ {{ HTMLElement("keygen") }} 、
+ {{ HTMLElement("label") }} 、
+ {{ HTMLElement("meter") }} 、
+ {{ HTMLElement("object") }} 、
+ {{ HTMLElement("output") }} 、
+ {{ HTMLElement("progress") }} 、
+ {{ HTMLElement("select") }} 、
+ {{ HTMLElement("textarea")}}
+
+ 表明是元件的所有者的形式。
+
+
+ high
+ {{ HTMLElement("meter") }}
+ 表示下界的上限範圍。
+
+
+ keytype
+ {{ HTMLElement("keygen") }}
+ 指定鍵所產生的類型。
+
+
+ list
+ {{ HTMLElement("input") }}
+ 標識的預定義的選項的列表,以向用戶建議。
+
+
+ low
+ {{ HTMLElement("meter") }}
+ 指示上限較低的範圍內。
+
+
+ max
+
+ {{ HTMLElement("input") }} 、
+ {{ HTMLElement("meter") }} 、
+ {{ HTMLElement("progress") }}
+
+ 指示所允許的最大值。
+
+
+ maxlength
+
+ {{ HTMLElement("input") }} 、
+ {{ HTMLElement("textarea") }}
+
+ 定義了在元件允許的字符的最大數目。
+
+
+ method
+ {{HTMLElement("form")}}
+ 定義提交表單時使用的HTTP方法。可GET(默認)或POST。
+
+
+ min
+
+ {{ HTMLElement("input") }} 、
+ {{ HTMLElement("meter") }}
+
+ 指示所允許的最小值。
+
+
+ multiple
+
+ {{ HTMLElement("input") }}、
+ {{ HTMLElement("select") }}
+
+
+ 表示是否多個值所用的類型的輸入可以輸入電子郵件
或文件
。
+
+
+
+ name
+
+ {{ HTMLElement("button") }} 、 {{ HTMLElement("form") }}
+ 、 {{ HTMLElement("fieldset") }} 、
+ {{ HTMLElement("input") }} 、
+ {{ HTMLElement("keygen") }} 、
+ {{ HTMLElement("output") }} 、
+ {{ HTMLElement("select") }} 、
+ {{ HTMLElement("textarea") }}
+
+ 該元素的名稱。例如所使用的服務器,以確定在表單提交的字段。
+
+
+ novalidate
+ {{ HTMLElement("form") }}
+ 此屬性表明,當提交表單應該無法通過驗證。
+
+
+ optimum
+ {{ HTMLElement("meter") }}
+ 表示最佳數值。
+
+
+ pattern
+ {{ HTMLElement("input") }}
+ 定義一個正則表達式元素的值將針對驗證。
+
+
+ placeholder
+
+ {{ HTMLElement("input") }}、
+ {{ HTMLElement("textarea") }}
+
+ 提供一個提示什麼可以在字段中輸入的用戶。
+
+
+ readonly
+
+ {{ HTMLElement("input") }} 、
+ {{ HTMLElement("textarea") }}
+
+ 指示該元素是否可以編輯或沒有。
+
+
+ required
+
+ {{ HTMLElement("input") }} 、
+ {{ HTMLElement("select") }}、
+ {{ HTMLElement("textarea") }}
+
+ 指示此元素是否必填。
+
+
+ rows
+ {{ HTMLElement("textarea") }}
+ 限定在一個textarea的行數。
+
+
+ selected
+ {{ HTMLElement("option") }}
+ 定義了將在頁面加載所選的值。
+
+
+ size
+
+ {{ HTMLElement("input") }}、
+ {{ HTMLElement("select") }}
+
+
+ 限定了元件的寬度(以像素為單位)。如果該元素的類型
的屬性是文本
或密碼
那麼它的字符數。
+
+
+
+ src
+ {{ HTMLElement("img") }}
+ 可嵌入內容的URL。
+
+
+ step
+ {{ HTMLElement("input") }}
+
+
+
+ target
+ {{ HTMLElement("form") }}
+
+
+
+ type
+
+ {{ HTMLElement("button") }} 、
+ {{ HTMLElement("input") }}
+
+ 限定了元件的類型。
+
+
+ usemap
+ {{ HTMLElement("img") }}
+
+
+
+ value
+
+ {{ HTMLElement("button") }}、
+ {{ HTMLElement("option") }}、
+ {{ HTMLElement("input") }}、
+ {{ HTMLElement("meter") }}、
+ {{ HTMLElement("progress") }}
+
+ 定義了將被顯示在頁面上的負載元件的默認值。
+
+
+ wrap
+ {{ HTMLElement("textarea") }}
+ 指示文本是否應被包裹或沒有。
+
+
+
+
+### 規範性引用文件
+
+- [W3C HTML 5.1 規範(表格)](http://www.w3.org/html/wg/drafts/html/master/forms.html#forms)
+- [WHATWG HTML 生活水平(表格)](http://www.whatwg.org/specs/web-apps/current-work/multipage/forms.html#forms)
diff --git a/files/zh-tw/learn/server-side/first_steps/index.html b/files/zh-tw/learn/server-side/first_steps/index.html
deleted file mode 100644
index 2afd7bb1d4845f..00000000000000
--- a/files/zh-tw/learn/server-side/first_steps/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: 伺服器端程式設計起步走
-slug: Learn/Server-side/First_steps
-translation_of: Learn/Server-side/First_steps
----
-{{LearnSidebar}}
-
-在我們的伺服器端程式設計模組內,我們會回答一些關於伺服器端編程的問題──「那是什麼?」、「它和用戶端程式設計有何不同?」、還有「為什麼它有用?」。接著,我們會比較各大熱門框架、並佐以一些如何選擇最適合框架的指引。最後,我們還會提供關於伺服器安全的進階介紹性文章。
-
-(譯者 iigmir 註:你可能常常聽到網路開發有前端與後端。在網路開發的脈落下,這裡講的伺服器端程式設計,就是俗稱的後端。)
-
-先決條件
-
-在開始本模組前,你不需要擁有任何與伺服器端、或其他種類的程式設計相關知識。
-
-你必須知道「網路如何運作」。關於此,我們推薦以下主題:
-
-
-
-有了基本理解後,你就可以透過本章節的模組來完成工作。
-
-指引
-
-
- 介紹伺服器端
- 歡迎來到 MDN 初學者的伺服器端程式設計課程!在這首篇文章中,我們將以很高的角度回答諸如「這是什麼?」、「它和用戶端程式設計有何不同?」、還有「為什麼它有用?」之類的問題。讀完以後,你會明白很多關於伺服器端程式設計的知識。
- 用戶端概覽
- 現在你知道了伺服器端程式設計的目標與益處,而我們現在要檢驗一些細節:當伺服器從瀏覽器那邊收到「動態請求」的時候,究竟發生了什麼事。因為大多數網站都用相近的方法處理請求與回應,所以這一點會幫助你理解自己在撰寫程式碼的時候要幹什麼。
- 伺服器端網路框架
- 最後一篇文章介紹了伺服器端網路程式,為了回應來自瀏覽器的請求,究竟需要些什麼。現在,我們會告訴你網路框架如何簡化那些工作,並幫助你選定自己的第一個網路程式,要用上什麼樣的框架。
- 網站安全
- 網站安全,有賴網頁設計時的高度警覺。這篇概要性的文章不是要讓你變成網站安全大神,而是幫你理解在強化網路程式免受大多數威脅時,第一要務為何。
-
-
-評估
-
-這份「概覽」模組不做任何評估,因為我們還沒有給你看過任何程式碼。我們希望到了這裡,你可以對伺服器端程式設計能提供什麼東西,有者良好的理解;我們也希望你能在建立第一個網站時要用什麼框架的方面,能夠下好決定。
diff --git a/files/zh-tw/learn/server-side/first_steps/index.md b/files/zh-tw/learn/server-side/first_steps/index.md
new file mode 100644
index 00000000000000..6f83acbb43c38c
--- /dev/null
+++ b/files/zh-tw/learn/server-side/first_steps/index.md
@@ -0,0 +1,37 @@
+---
+title: 伺服器端程式設計起步走
+slug: Learn/Server-side/First_steps
+translation_of: Learn/Server-side/First_steps
+---
+{{LearnSidebar}}
+
+在我們的伺服器端程式設計模組內,我們會回答一些關於伺服器端編程的問題 ──「那是什麼?」、「它和用戶端程式設計有何不同?」、還有「為什麼它有用?」。接著,我們會比較各大熱門框架、並佐以一些如何選擇最適合框架的指引。最後,我們還會提供關於伺服器安全的進階介紹性文章。
+
+(譯者 iigmir 註:你可能常常聽到網路開發有前端與後端。在網路開發的脈落下,這裡講的伺服器端程式設計,就是俗稱的後端。)
+
+## 先決條件
+
+在開始本模組前,你不需要擁有任何與伺服器端、或其他種類的程式設計相關知識。
+
+你必須知道「網路如何運作」。關於此,我們推薦以下主題:
+
+- [何謂網路伺服器](/zh-TW/docs/Learn/Common_questions/What_is_a_web_server)
+- [我需要什麼軟體來建立網站?](/zh-TW/docs/Learn/Common_questions/What_software_do_I_need)
+- [如何把檔案上傳到網路伺服器?](/zh-TW/docs/Learn/Common_questions/Upload_files_to_a_web_server)
+
+有了基本理解後,你就可以透過本章節的模組來完成工作。
+
+## 指引
+
+- [介紹伺服器端](/zh-TW/docs/Learn/Server-side/First_steps/Introduction)
+ - : 歡迎來到 MDN 初學者的伺服器端程式設計課程!在這首篇文章中,我們將以很高的角度回答諸如「這是什麼?」、「它和用戶端程式設計有何不同?」、還有「為什麼它有用?」之類的問題。讀完以後,你會明白很多關於伺服器端程式設計的知識。
+- [用戶端概覽](/zh-TW/docs/Learn/Server-side/First_steps/Client-Server_overview)
+ - : 現在你知道了伺服器端程式設計的目標與益處,而我們現在要檢驗一些細節:當伺服器從瀏覽器那邊收到「動態請求」的時候,究竟發生了什麼事。因為大多數網站都用相近的方法處理請求與回應,所以這一點會幫助你理解自己在撰寫程式碼的時候要幹什麼。
+- [伺服器端網路框架](/zh-TW/docs/Learn/Server-side/First_steps/Web_frameworks)
+ - : 最後一篇文章介紹了伺服器端網路程式,為了回應來自瀏覽器的請求,究竟需要些什麼。現在,我們會告訴你網路框架如何簡化那些工作,並幫助你選定自己的第一個網路程式,要用上什麼樣的框架。
+- [網站安全](/zh-TW/docs/Learn/Server-side/First_steps/Website_security)
+ - : 網站安全,有賴網頁設計時的高度警覺。這篇概要性的文章不是要讓你變成網站安全大神,而是幫你理解在強化網路程式免受大多數威脅時,第一要務為何。
+
+## 評估
+
+這份「概覽」模組不做任何評估,因為我們還沒有給你看過任何程式碼。我們希望到了這裡,你可以對伺服器端程式設計能提供什麼東西,有者良好的理解;我們也希望你能在建立第一個網站時要用什麼框架的方面,能夠下好決定。
diff --git a/files/zh-tw/learn/server-side/first_steps/introduction/index.html b/files/zh-tw/learn/server-side/first_steps/introduction/index.html
deleted file mode 100644
index f87bc928957f07..00000000000000
--- a/files/zh-tw/learn/server-side/first_steps/introduction/index.html
+++ /dev/null
@@ -1,226 +0,0 @@
----
-title: 伺服器端的介紹
-slug: Learn/Server-side/First_steps/Introduction
-translation_of: Learn/Server-side/First_steps/Introduction
-original_slug: Learn/Server-side/First_steps/介紹
----
-{{LearnSidebar}}
-
-{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
-
-歡迎來到MDN伺服器端程式設計的初學者課程 !在第一篇文章中,我們會用較為抽象的角度來探討 server-side programming,並且為你解答「這是什麼?」「這個和用戶端的程式有什麼不同?」以及「這個有什麼用?」 。在讀完這篇文章後,你將能明白如何透過 server-side coding 來為你的網站增添力量。
-
-
-
-
- 先決條件:
- 基本電腦知識、對網路伺服器有基本了解。
-
-
- 目標:
- 認識伺服器端的程式設計、它可以做什麼、它和用戶端的程式有什麼不一樣?
-
-
-
-
-大多數的大型網站使用伺服器端程式(server-side code)來動態地顯示各種所需的資料,普遍的做法為從伺服端的資料庫中取出資料,並送至用戶端,再透過一些 code 來顯示它們(例如:HTML 與 JavaScript)。
-
-也許,使用伺服器端程式的最大好處是為不同的瀏覽者量身打造網頁內容。動態網站根據使用者的偏好設定及興趣提供更為相關的內容,也可以儲存個人設定及資訊讓網站更易於使用 — 例如重複使用已儲存的信用卡資料來使付款流程更為順暢。
-
-它也能讓網站透過信件或其他方式來和使用者互動,如發送通知與更新。這一切的一切都讓網站更能牢牢抓住使用者的心。
-
-何謂伺服器端網站程式開發?
-
-網頁瀏覽器使用超文本傳輸協定(H yperT ext T ransfer P rotocol, {{glossary("HTTP")}})與網頁伺服器(web servers )溝通。當您點選網頁上的連結、送出表單,或者執行搜尋,一段 HTTP 請求 (request )會由您的瀏覽器送至目標伺服器。
-
-該請求(request)包含一個用來指定受影響資源的 URL、一個定義行為的請求方法(例如對資源進行get、delete或post)與當進行HTTP POST方法 時可能包含編碼於URL參數中的額外資訊(經由一段查詢字串 送出的各個鍵值對),或是在關聯的{{glossary("Cookie", "cookies")}}中。
-
-網頁伺服器等待用戶端的請求訊息、獲得後處理它們,並以一個HTTP回應 (response )訊息回覆至網頁瀏覽器。該回應包含一個狀態訊息說明本次請求是否達成(例如:"HTTP/1.1 200 OK"表示成功)。
-
-成功對應於一個請求的回應主體(response body)應包含請求的資源(例如:一份新的HTML頁面或一張圖片等),這些可能將被用來顯示在網頁瀏覽器中。
-
-靜態網站
-
-以下的靜態網站(static site)圖展示一個基本的網頁伺服器架構,其中靜態網站意謂當無論何時有個特定資源的請求,伺服器始終回傳相同的硬編碼內容(hard-coded content)。當一個使用者想要引導到一個網頁時,瀏覽器送出的HTTP "GET" 請求指的就是該資源的URL。
-
-此伺服器從它的檔案系統取回被請求的文件,並回傳一個包含此文件以及成功狀態碼 (通常為200 OK)的HTTP回應。若檔案因某些原因無法被取回,則回傳一個錯誤狀態(參見 用戶端錯誤回應 與 伺服器端錯誤回應 )。
-
-
-
-動態網站
-
-一個動態網站的回應內容是當需要時動態 產生的。在一個動態網站的HTML網頁通常是經由資料庫取得並插入資料至HTML範本的佔位符(placeholders)中而創造出來(相較於靜態網站,這對於儲存大量內容而言,這是一種相當有效率的做法)。
-
-一個動態網站可以根據使用者或已存偏好設定提供的URL資訊回傳不同的資料,也可以以其他的作用方式呈現回應(例如:發送通知)。
-
-用來支援一個動態網站的大部分的程式碼必須在伺服器執行。建立程式碼的方式稱為"伺服端程式設計(server-side programming) "或"後端腳本(back-end scripting) "。
-
-下圖為動態網站 (dynamic website )的基本架構。如同先前的圖說,瀏覽器發送HTTP請求至伺服器,接著伺服器處理請求後,回傳合適的HTTP回應。
-
-對於靜態 資源的請求處理方式如同靜態網站的方式(靜態資源為任何不會改變的檔案 — 通常為CSS、JavaScript、圖片、預產生的PDF檔案等)。
-
-
-
-對於動態資源的請求方式則為轉送(2)至伺服端程式碼(如圖中的網頁應用程式 Web Application )。對於"動態請求",伺服器解釋該請求、從資料庫讀取所需資訊(3)、與HTML範本結合取得的資料(4),最後送回一個包含已產生HTML的回應(5,6)。
-
-
-
伺服端與用戶端程式設計是相同的嗎?
-
-
-讓我們把注意力集中在伺服端與用戶端的程式設計吧!在以下的每個案例中,程式碼完全不一樣:
-
-
- 他們有不同的目的與考量。
- 一般而言,他們不使用相同的程式語言(除了JavaScript可以使用在伺服端與用戶端以外)。
- 他們在不同的作業系統環境下執行。
-
-
-執行在瀏覽器的程式碼被稱為用戶端程式碼 (client-side code ),它主要用來改善一個渲染的網頁外觀與行為。這包含選取與設定UI元件樣式、建立佈局、導覽、表格驗證等。相對的,伺服端網站程式設計大量涉及要回傳哪些內容 給瀏覽器做為對請求的回應。伺服端程式碼處理驗證已提交的資料與請求、使用資料庫儲存及取得資料,和按需求發送正確的資料給用戶等任務。
-
-用戶端程式碼以HTML 、CSS 與JavaScript 撰寫 — 它執行在網頁瀏覽器內,並且僅有或無訪問底層的作業系統(包含對檔案系統的有限存取)。
-
-網頁開發者不能控制使用者可能使用何種瀏覽器來檢視一個網站 — 瀏覽器與用戶端程式有著不同層度的相容性,並且用戶端程式的挑戰之一是如何妥善地處理瀏覽器支援的差異。
-
-伺服端程式碼可以為任何程式語言 — 例如有名的伺服端網頁語言包括PHP、Python、Ruby、C#與NodeJS(JavaScript)。該伺服端程式碼擁有完整的作業系統存取權限,而且開發者能夠選擇他們想要的程式語言(以及特定版本)。
-
-開發者們通常使用網頁框架 (web frameworks )撰寫程式碼。網頁框架為功能函式、物件、規則與其他程式碼的集合,旨在解決常見問題、加速開發並簡化在特定域中面臨到的不同類型的任務。
-
-再者,儘管用戶端與伺服端程式碼都使用框架,但會因為非常不同的域,而使得框架也不同。用戶端網頁框架簡化佈局與呈現的任務,而伺服端網頁框架則提供大量"通用"的網頁伺服器功能,否則你可能必須要自己實現(例如:對sessions的支援、對使用者認證的支援、簡易資料庫存取、樣板庫等)。
-
-
-
Note : Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand; in fact, writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.
-
-
In contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an HTTP server is really hard to do from scratch in say Python, but Python web frameworks like Django provide one out of the box, along with other very useful tools.
-
-
-
-
在伺服端,你能做什麼?
-
-
伺服端程式設計是非常有用的,因為它讓我們有效地遞送替單個使用者量身訂做的資訊,從而創造更棒的使用者體驗。
-
-
-如Amazon這樣的公司使用伺服端程式設計來建構產品搜尋結果、根據顧客偏好與過往購物習慣提供針對性的產品建議、簡化購物過程等。
-
-銀行使用伺服端程式設計來儲存帳號資訊,並讓已授權用戶檢視與進行交易。其他服務如Facebook、Twitter、Instagram與Wikipedia使用伺服端程式設計來突顯、分享與控制使用者存取到感興趣的內容。
-
-一些常見的伺服端程式設計使用案例與效益列舉如下。您將會注意到這當中會有些重疊的部分!
-
-高效率資訊儲存與遞送
-
-想像一下,在Amazon可以找到多少產品,或者說在Facebook上有多少文章?對各個產品或文章建立各別的靜態網頁完全是不切實際的。
-
-伺服端程式設計反而是可以讓我們將資訊儲存至資料庫,並且動態建構及回傳HTML與其他型態的檔案(例如:PDF、圖片等)。它也可以藉由合適的用戶端網頁框架(利用這個方式可以降低在伺服器的處理負擔,亦減少需要被送出的大量資料)僅回傳資料({{glossary("JSON")}}、{{glossary("XML")}}等)來進行畫面渲染。
-
-伺服器並不侷限於從資料庫發送資訊,還可以回傳軟體工具的結果或是來自通訊服務的資料。這些內容甚至可以針對到收到它的用戶裝置類型。
-
-由於資訊存在於資料庫中,它可以輕易地與其他商業系統進行分享與更新(例如:當產品在線上或在店家中售完,店家可能會更新該產品的庫存資料庫)。
-
-
-
Note : Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:
-
-
- Go to Amazon or some other e-commerce site.
- Search for a number of keywords and note how the page structure doesn't change, even though the results do.
- Open two or three different products. Note again how they have a common structure and layout, but the content for different products has been pulled from the database.
-
-
-
For a common search term ("fish", say) you can see literally millions of returned values. Using a database allows these to be stored and shared efficiently, and it allows the presentation of the information to be controlled in just one place.
-
-
-客製化的使用者體驗
-
-伺服器能保存及使用關於用戶的資訊,來提供一個方便且量身訂做的使用者體驗。例如,許多網站儲存信用卡資料讓這些資料無須再重新輸入。網站如Google Maps能使用已儲存或目前位置來提供導航資訊與搜尋或旅行歷史紀錄,以便於搜尋結果中突顯在地店家。
-
-一個使用者習慣更深層的分析,可以使用在預測他的興趣以及更進一步客製回應與提醒,例如在地圖中提供你可能想去看得過去遊歷過的或是熱門的地點列表。
-
-
-
Note: Google Maps saves your search and visit history. Frequently visited or frequently searched locations are highlighted more than others.
-
-
Google search results are optimized based on previous searches.
-
-
- Go to Google search .
- Search for "football".
- Now try typing "favourite" in the search box and observe the autocomplete search predictions.
-
-
-
Coincidence? Nada!
-
-
-控制內容存取
-
-伺服器端程式設計允許網站限制僅能由已授權的使用者存取,並提供資訊給那些只被允許觀看的使用者。
-
-真實世界案例包括:
-
-
-
-
-
Note : Consider other real examples where access to content is controlled. For example, what can you see if you go to the online site for your bank? Log in to your account — what additional information can you see and modify? What information can you see that only the bank can change?
-
-
-儲存session/state資訊
-
-伺服器端程式設計允許開發者利用sessions — 基本上,就是一個機制讓伺服器儲存目前的使用者資訊,並且基於這些資訊發送不同的回應。
-
-例如,這允許網站了解一個使用者先前已登入過,以及將訂購歷史紀錄在他們的電子郵件中顯示連結,或者也許會儲存一個基本的遊戲狀態,讓使用者能再次回到網站的同時,拿回他們留在網站的資訊。
-
-
-
Note : Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. The Age ). Continue to visit the site over a few hours/days. Eventually, you will start to be redirected to pages explaining how to subscribe, and you will be unable to access articles. This information is an example of session information stored in cookies.
-
-
-提醒與溝通
-
-伺服器能透過網站本身或經由電子郵件、SMS、即時通訊、影像或其他通訊服務,發送提醒訊息給一般或特定使用者。
-
-一些範例包括:
-
-
- Facebook與Twitter發送電子郵件與SMS訊息等新的通訊來提醒你。
- Amazon定期發送產品電子郵件來提供相近於曾經已購買或你可能有興趣瀏覽的產品。
- 一個網頁伺服器可能會發送警告訊息給網站管理員,以警示伺服器的記憶體過低或有嫌疑的使用者型為。
-
-
-
-
Note : The most common type of notification is a "confirmation of registration". Pick almost any large site that you are interested in (Google, Amazon, Instagram, etc.) and create a new account using your email address. You will shortly receive an email confirming your registration, or requiring acknowledgment to activate your account.
-
-
-資料分析
-
-一個網站可能會收集很多包括使用者的資料:他們所搜尋的、他們所買的、他們所推薦的、他們在每個網頁停留的時間。伺服器端程式設計能根據資料分析以完善回應。
-
-例如,Amazon與Google都根據過往搜尋(與購買)紀錄來廣告產品。
-
-
-
Note : If you're a Facebook user, go to your main feed and look at the stream of posts. Note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts.
-
-
Also look at what kind of ads you are being shown — you might see ads for things you looked at on other sites. Facebook's algorithm for highlighting content and advertising can be a bit of a mystery, but it is clear that it does depend on your likes and viewing habits!
-
-
-總結
-
-恭喜,你已經到達關於伺服器端程式設計的第一篇文章的結尾。
-
-現在你已經學到伺服器端程式碼運作於網頁伺服器,他的主要任務是控制哪些 資訊要發送給使用者(而用戶端程式碼主要掌握資料的結構與呈現給使用者)。
-
-你也應該了解這是很有用的,當你身為伺服器端開發者時,因為它允許我們創建有效 散播客製訊息與有些你可能會去做的好點子給單個使用者的網站。
-
-最後,你應該了解伺服器端程式碼可以用很多種程式語言來撰寫,以及你應該使用網頁框架來讓整個程序變得更簡便。
-
-在未來的文章,我們將協助你選擇最佳的網頁框架,做為你的第一個網站;接著,我們將帶你更詳細了解主要的用戶端-伺服端的互動。
-
-{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
-
-In this module
-
-
diff --git a/files/zh-tw/learn/server-side/first_steps/introduction/index.md b/files/zh-tw/learn/server-side/first_steps/introduction/index.md
new file mode 100644
index 00000000000000..12dbd5fa888a09
--- /dev/null
+++ b/files/zh-tw/learn/server-side/first_steps/introduction/index.md
@@ -0,0 +1,194 @@
+---
+title: 伺服器端的介紹
+slug: Learn/Server-side/First_steps/Introduction
+translation_of: Learn/Server-side/First_steps/Introduction
+original_slug: Learn/Server-side/First_steps/介紹
+---
+{{LearnSidebar}}{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+
+歡迎來到 MDN 伺服器端程式設計的初學者課程 !在第一篇文章中,我們會用較為抽象的角度來探討 server-side programming,並且為你解答「這是什麼?」「這個和用戶端的程式有什麼不同?」以及「這個有什麼用?」 。在讀完這篇文章後,你將能明白如何透過 server-side coding 來為你的網站增添力量。
+
+
+
+
+ 先決條件:
+ 基本電腦知識、對網路伺服器有基本了解。
+
+
+ 目標:
+
+ 認識伺服器端的程式設計、它可以做什麼、它和用戶端的程式有什麼不一樣?
+
+
+
+
+
+大多數的大型網站使用伺服器端程式(server-side code)來動態地顯示各種所需的資料,普遍的做法為從伺服端的資料庫中取出資料,並送至用戶端,再透過一些 code 來顯示它們(例如:HTML 與 JavaScript)。
+
+也許,使用伺服器端程式的最大好處是為不同的瀏覽者量身打造網頁內容。動態網站根據使用者的偏好設定及興趣提供更為相關的內容,也可以儲存個人設定及資訊讓網站更易於使用 — 例如重複使用已儲存的信用卡資料來使付款流程更為順暢。
+
+它也能讓網站透過信件或其他方式來和使用者互動,如發送通知與更新。這一切的一切都讓網站更能牢牢抓住使用者的心。
+
+## 何謂伺服器端網站程式開發?
+
+網頁瀏覽器使用超文本傳輸協定(**H**yper**T**ext **T**ransfer **P**rotocol, {{glossary("HTTP")}})與網頁伺服器([web servers](/zh-TW/docs/Learn/Common_questions/What_is_a_web_server))溝通。當您點選網頁上的連結、送出表單,或者執行搜尋,一段 **HTTP 請求**(**request**)會由您的瀏覽器送至目標伺服器。
+
+該請求(request)包含一個用來指定受影響資源的 URL、一個定義行為的請求方法(例如對資源進行 get、delete 或 post)與當進行[HTTP POST 方法](/zh-TW/docs/Web/HTTP/Methods/POST)時可能包含編碼於 URL 參數中的額外資訊(經由一段[查詢字串](https://en.wikipedia.org/wiki/Query_string)送出的各個鍵值對),或是在關聯的{{glossary("Cookie", "cookies")}}中。
+
+網頁伺服器等待用戶端的請求訊息、獲得後處理它們,並以一個**HTTP 回應**(**response**)訊息回覆至網頁瀏覽器。該回應包含一個狀態訊息說明本次請求是否達成(例如:"HTTP/1.1 200 OK"表示成功)。
+
+成功對應於一個請求的回應主體(response body)應包含請求的資源(例如:一份新的 HTML 頁面或一張圖片等),這些可能將被用來顯示在網頁瀏覽器中。
+
+### 靜態網站
+
+以下的靜態網站(static site)圖展示一個基本的網頁伺服器架構,其中靜態網站意謂當無論何時有個特定資源的請求,伺服器始終回傳相同的硬編碼內容(hard-coded content)。當一個使用者想要引導到一個網頁時,瀏覽器送出的 HTTP "GET" 請求指的就是該資源的 URL。
+
+此伺服器從它的檔案系統取回被請求的文件,並回傳一個包含此文件以及[成功狀態碼](/zh-TW/docs/Web/HTTP/Status#成功回應)(通常為 200 OK)的 HTTP 回應。若檔案因某些原因無法被取回,則回傳一個錯誤狀態(參見 [用戶端錯誤回應](/zh-TW/docs/Web/HTTP/Status#用戶端錯誤回應) 與 [伺服器端錯誤回應](/zh-TW/docs/Web/HTTP/Status#伺服器端錯誤回應))。
+
+![A simplified diagram of a static web server.](basic_static_app_server.png)
+
+### 動態網站
+
+一個動態網站的回應內容是當需要時*動態*產生的。在一個動態網站的 HTML 網頁通常是經由資料庫取得並插入資料至 HTML 範本的佔位符(placeholders)中而創造出來(相較於靜態網站,這對於儲存大量內容而言,這是一種相當有效率的做法)。
+
+一個動態網站可以根據使用者或已存偏好設定提供的 URL 資訊回傳不同的資料,也可以以其他的作用方式呈現回應(例如:發送通知)。
+
+用來支援一個動態網站的大部分的程式碼必須在伺服器執行。建立程式碼的方式稱為"**伺服端程式設計(server-side programming)**"或"**後端腳本(back-end scripting)**"。
+
+下圖為*動態網站*(_dynamic website_)的基本架構。如同先前的圖說,瀏覽器發送 HTTP 請求至伺服器,接著伺服器處理請求後,回傳合適的 HTTP 回應。
+
+對於*靜態*資源的請求處理方式如同靜態網站的方式(靜態資源為任何不會改變的檔案 — 通常為 CSS、JavaScript、圖片、預產生的 PDF 檔案等)。
+
+![A simplified diagram of a web server that uses server-side programming to get information from a database and construct HTML from templates. This is the same diagram as is in the Client-Server overview.](web_application_with_html_and_steps.png)
+
+對於動態資源的請求方式則為轉送(2)至伺服端程式碼(如圖中的*網頁應用程式 Web Application*)。對於"動態請求",伺服器解釋該請求、從資料庫讀取所需資訊(3)、與 HTML 範本結合取得的資料(4),最後送回一個包含已產生 HTML 的回應(5,6)。
+
+## 伺服端與用戶端程式設計是相同的嗎?
+
+讓我們把注意力集中在伺服端與用戶端的程式設計吧!在以下的每個案例中,程式碼完全不一樣:
+
+- 他們有不同的目的與考量。
+- 一般而言,他們不使用相同的程式語言(除了 JavaScript 可以使用在伺服端與用戶端以外)。
+- 他們在不同的作業系統環境下執行。
+
+執行在瀏覽器的程式碼被稱為**用戶端程式碼**(**client-side code**),它主要用來改善一個渲染的網頁外觀與行為。這包含選取與設定 UI 元件樣式、建立佈局、導覽、表格驗證等。相對的,伺服端網站程式設計大量涉及要回傳*哪些內容*給瀏覽器做為對請求的回應。伺服端程式碼處理驗證已提交的資料與請求、使用資料庫儲存及取得資料,和按需求發送正確的資料給用戶等任務。
+
+用戶端程式碼以[HTML](/zh-TW/docs/Learn/HTML)、[CSS](/zh-TW/docs/Learn/CSS)與[JavaScript](/zh-TW/docs/Learn/JavaScript)撰寫 — 它執行在網頁瀏覽器內,並且僅有或無訪問底層的作業系統(包含對檔案系統的有限存取)。
+
+網頁開發者不能控制使用者可能使用何種瀏覽器來檢視一個網站 — 瀏覽器與用戶端程式有著不同層度的相容性,並且用戶端程式的挑戰之一是如何妥善地處理瀏覽器支援的差異。
+
+伺服端程式碼可以為任何程式語言 — 例如有名的伺服端網頁語言包括 PHP、Python、Ruby、C#與 NodeJS(JavaScript)。該伺服端程式碼擁有完整的作業系統存取權限,而且開發者能夠選擇他們想要的程式語言(以及特定版本)。
+
+開發者們通常使用**網頁框架**(**web frameworks**)撰寫程式碼。網頁框架為功能函式、物件、規則與其他程式碼的集合,旨在解決常見問題、加速開發並簡化在特定域中面臨到的不同類型的任務。
+
+再者,儘管用戶端與伺服端程式碼都使用框架,但會因為非常不同的域,而使得框架也不同。用戶端網頁框架簡化佈局與呈現的任務,而伺服端網頁框架則提供大量"通用"的網頁伺服器功能,否則你可能必須要自己實現(例如:對 sessions 的支援、對使用者認證的支援、簡易資料庫存取、樣板庫等)。
+
+> **備註:** Client-side frameworks are often used to help speed up development of client-side code, but you can also choose to write all the code by hand; in fact, writing your code by hand can be quicker and more efficient if you only need a small, simple web site UI.
+>
+> In contrast, you would almost never consider writing the server-side component of a web app without a framework — implementing a vital feature like an HTTP server is really hard to do from scratch in say Python, but Python web frameworks like Django provide one out of the box, along with other very useful tools.
+
+## 在伺服端,你能做什麼?
+
+伺服端程式設計是非常有用的,因為它讓我們有效地遞送替單個使用者量身訂做的資訊,從而創造更棒的使用者體驗。
+
+如 Amazon 這樣的公司使用伺服端程式設計來建構產品搜尋結果、根據顧客偏好與過往購物習慣提供針對性的產品建議、簡化購物過程等。
+
+銀行使用伺服端程式設計來儲存帳號資訊,並讓已授權用戶檢視與進行交易。其他服務如 Facebook、Twitter、Instagram 與 Wikipedia 使用伺服端程式設計來突顯、分享與控制使用者存取到感興趣的內容。
+
+一些常見的伺服端程式設計使用案例與效益列舉如下。您將會注意到這當中會有些重疊的部分!
+
+### 高效率資訊儲存與遞送
+
+想像一下,在 Amazon 可以找到多少產品,或者說在 Facebook 上有多少文章?對各個產品或文章建立各別的靜態網頁完全是不切實際的。
+
+伺服端程式設計反而是可以讓我們將資訊儲存至資料庫,並且動態建構及回傳 HTML 與其他型態的檔案(例如:PDF、圖片等)。它也可以藉由合適的用戶端網頁框架(利用這個方式可以降低在伺服器的處理負擔,亦減少需要被送出的大量資料)僅回傳資料({{glossary("JSON")}}、{{glossary("XML")}}等)來進行畫面渲染。
+
+伺服器並不侷限於從資料庫發送資訊,還可以回傳軟體工具的結果或是來自通訊服務的資料。這些內容甚至可以針對到收到它的用戶裝置類型。
+
+由於資訊存在於資料庫中,它可以輕易地與其他商業系統進行分享與更新(例如:當產品在線上或在店家中售完,店家可能會更新該產品的庫存資料庫)。
+
+> **備註:** Your imagination doesn't have to work hard to see the benefit of server-side code for efficient storage and delivery of information:
+>
+> 1. Go to [Amazon](https://www.amazon.com) or some other e-commerce site.
+> 2. Search for a number of keywords and note how the page structure doesn't change, even though the results do.
+> 3. Open two or three different products. Note again how they have a common structure and layout, but the content for different products has been pulled from the database.
+>
+> For a common search term ("fish", say) you can see literally millions of returned values. Using a database allows these to be stored and shared efficiently, and it allows the presentation of the information to be controlled in just one place.
+
+### 客製化的使用者體驗
+
+伺服器能保存及使用關於用戶的資訊,來提供一個方便且量身訂做的使用者體驗。例如,許多網站儲存信用卡資料讓這些資料無須再重新輸入。網站如 Google Maps 能使用已儲存或目前位置來提供導航資訊與搜尋或旅行歷史紀錄,以便於搜尋結果中突顯在地店家。
+
+一個使用者習慣更深層的分析,可以使用在預測他的興趣以及更進一步客製回應與提醒,例如在地圖中提供你可能想去看得過去遊歷過的或是熱門的地點列表。
+
+> **備註:** [Google Maps](https://maps.google.com/) saves your search and visit history. Frequently visited or frequently searched locations are highlighted more than others.
+>
+> Google search results are optimized based on previous searches.
+>
+> 1. Go to [Google search](https:\\google.com).
+> 2. Search for "football".
+> 3. Now try typing "favourite" in the search box and observe the autocomplete search predictions.
+>
+> Coincidence? Nada!
+
+### 控制內容存取
+
+伺服器端程式設計允許網站限制僅能由已授權的使用者存取,並提供資訊給那些只被允許觀看的使用者。
+
+真實世界案例包括:
+
+- 社交網路如 Facebook 允許使用者全權控制他們自己的資料,但是只有允許他們的朋友檢視或評論資料。該使用者決定誰能看到他們的資料,並推廣到他們的動態中會呈現誰的資料 — 授權是使用者體驗的核心部分!
+- 你正所在的網站控制內容的存取:文章可被任何人看見,但是只有使用者登入才能編輯該內容。若要試試看,點擊本頁面上方的**編輯**按鈕 — 如果你已登入,你將會顯示編輯視窗;如果你沒有登入,你將會被導到註冊頁面。
+
+> **備註:** Consider other real examples where access to content is controlled. For example, what can you see if you go to the online site for your bank? Log in to your account — what additional information can you see and modify? What information can you see that only the bank can change?
+
+### 儲存 session/state 資訊
+
+伺服器端程式設計允許開發者利用**sessions** — 基本上,就是一個機制讓伺服器儲存目前的使用者資訊,並且基於這些資訊發送不同的回應。
+
+例如,這允許網站了解一個使用者先前已登入過,以及將訂購歷史紀錄在他們的電子郵件中顯示連結,或者也許會儲存一個基本的遊戲狀態,讓使用者能再次回到網站的同時,拿回他們留在網站的資訊。
+
+> **備註:** Visit a newspaper site that has a subscription model and open a bunch of tabs (e.g. [The Age](http://www.theage.com.au/)). Continue to visit the site over a few hours/days. Eventually, you will start to be redirected to pages explaining how to subscribe, and you will be unable to access articles. This information is an example of session information stored in cookies.
+
+### 提醒與溝通
+
+伺服器能透過網站本身或經由電子郵件、SMS、即時通訊、影像或其他通訊服務,發送提醒訊息給一般或特定使用者。
+
+一些範例包括:
+
+- Facebook 與 Twitter 發送電子郵件與 SMS 訊息等新的通訊來提醒你。
+- Amazon 定期發送產品電子郵件來提供相近於曾經已購買或你可能有興趣瀏覽的產品。
+- 一個網頁伺服器可能會發送警告訊息給網站管理員,以警示伺服器的記憶體過低或有嫌疑的使用者型為。
+
+> **備註:** The most common type of notification is a "confirmation of registration". Pick almost any large site that you are interested in (Google, Amazon, Instagram, etc.) and create a new account using your email address. You will shortly receive an email confirming your registration, or requiring acknowledgment to activate your account.
+
+### 資料分析
+
+一個網站可能會收集很多包括使用者的資料:他們所搜尋的、他們所買的、他們所推薦的、他們在每個網頁停留的時間。伺服器端程式設計能根據資料分析以完善回應。
+
+例如,Amazon 與 Google 都根據過往搜尋(與購買)紀錄來廣告產品。
+
+> **備註:** If you're a Facebook user, go to your main feed and look at the stream of posts. Note how some of the posts are out of numerical order - in particular, posts with more "likes" are often higher on the list than more recent posts.
+>
+> Also look at what kind of ads you are being shown — you might see ads for things you looked at on other sites. Facebook's algorithm for highlighting content and advertising can be a bit of a mystery, but it is clear that it does depend on your likes and viewing habits!
+
+## 總結
+
+恭喜,你已經到達關於伺服器端程式設計的第一篇文章的結尾。
+
+現在你已經學到伺服器端程式碼運作於網頁伺服器,他的主要任務是控制*哪些*資訊要發送給使用者(而用戶端程式碼主要掌握資料的結構與呈現給使用者)。
+
+你也應該了解這是很有用的,當你身為伺服器端開發者時,因為它允許我們創建*有效*散播客製訊息與有些你可能會去做的好點子給單個使用者的網站。
+
+最後,你應該了解伺服器端程式碼可以用很多種程式語言來撰寫,以及你應該使用網頁框架來讓整個程序變得更簡便。
+
+在未來的文章,我們將協助你選擇最佳的網頁框架,做為你的第一個網站;接著,我們將帶你更詳細了解主要的用戶端-伺服端的互動。
+
+{{NextMenu("Learn/Server-side/First_steps/Client-Server_overview", "Learn/Server-side/First_steps")}}
+
+## In this module
+
+- [Introduction to the server side](/en-US/docs/Learn/Server-side/First_steps/Introduction)
+- [Client-Server overview](/en-US/docs/Learn/Server-side/First_steps/Client-Server_overview)
+- [Server-side web frameworks](/en-US/docs/Learn/Server-side/First_steps/Web_frameworks)
+- [Website security](/en-US/docs/Learn/Server-side/First_steps/Website_security)
diff --git a/files/zh-tw/learn/server-side/index.html b/files/zh-tw/learn/server-side/index.html
deleted file mode 100644
index 253a8f1b3964b7..00000000000000
--- a/files/zh-tw/learn/server-side/index.html
+++ /dev/null
@@ -1,59 +0,0 @@
----
-title: 伺服端網站程式設計
-slug: Learn/Server-side
-tags:
- - Beginner
- - CodingScripting
- - Intro
- - Landing
- - Learn
- - NeedsTranslation
- - Server
- - Server-side programming
- - Topic
- - TopicStub
-translation_of: Learn/Server-side
----
-{{LearnSidebar}}
-
-動態網站 –伺服端網站程式設計 是一連串有關如何建立動態網站的模塊:動態網站可以針對 HTTP 請求,發送客製化的資訊。這些模塊將介紹伺服端網站程式設計:還有以初學者的角度,來教你怎麼使用 Django (Python) 與 Express (Node.js/JavaScript) 來架設基本的動態網路程式。
-
-大多數主流網站會使用伺服端技術,以根據需要呈現動態資料。例如說,來想想亞馬遜(Amazon)上架多少商品、還有臉書(Facebook)貼了多少動態。如果都用靜態頁面來呈現這些內容,開發就會毫無效率可言。因此,我們會使用靜態技術(HTML 、CSS 、JavaScript )來顯示靜態模板;並在需要時,動態更新模板內的資料。一如你在逛亞馬遜時,看著五花八門的產品一般。
-
-在當今的 Web development 的世界,我們強烈建議學習怎麼開發伺服端網站程式。
-
-學習路徑
-
-學習伺服端網站程式設計通常比用戶端網站程式設計簡單,因為動態網站比較傾向執行多次相似的操作(像是從資料庫擷取資料並放到頁面上、驗證用戶輸入的資料並存到資料庫、檢查登入用戶權限之類的)、使用框架建立網站能讓上述操作、以及其他常見操作變得簡單許多。
-
-基本的程式概念(或是理解特定的語言)會很有用,但不是必須的。同樣地,精於用戶端網站程式設計不是必須,但它能在前端開發時,幫你做得更好。
-
-首先你要知道「web 是怎麼作動的」。我們建議先看看這些文章:
-
-
-
-有了基本觀念後,就可以開始去學習模塊章節的東西了。
-
-模塊
-
-本章節包含了以下模塊。你首先要從第一個模塊開始,再循序漸進,學習接下來的模塊。這些模塊將告訴你如何與訪間最熱門的其中兩個伺服器端框架共事。
-
-
- 伺服器端程式設計起步走
- 本模塊會提供與技術無關的伺服器資訊,像是「那什麼?」、「和用戶端有啥不同?」、「有用嗎?」之類的。本模塊也會概述一些比較熱門的伺服器端 web 框架、並告訴你如何選擇。最後,我們還會概述有關伺服器服務的安全性問題。
- Django 網站框架 (Python)
- Django 以 Python 寫成,是個非常熱門的伺服器端 web 框架。本模塊會講解 Django 是好框架的理由、如何建立開發環境、還有如何處理常見工作。
- Express web framework (Node.js/JavaScript)
- Express 以 JavaScript 寫成、並在 node.js 執行環境執行。它也是個非常熱門的伺服器端 web 框架。本模塊會講解一些有關本框架的重要優點、也同樣會講解如何建立開發環境、還有如何處理常見工作。
-
-
-參見
-
-
- 不用框架的 Node 伺服器
- 如果不想用框架的話,這篇文章會告訴你如何使用純 Node.js 提供簡易的靜態檔案。
-
diff --git a/files/zh-tw/learn/server-side/index.md b/files/zh-tw/learn/server-side/index.md
new file mode 100644
index 00000000000000..23a9e4e981a331
--- /dev/null
+++ b/files/zh-tw/learn/server-side/index.md
@@ -0,0 +1,53 @@
+---
+title: 伺服端網站程式設計
+slug: Learn/Server-side
+tags:
+ - Beginner
+ - CodingScripting
+ - Intro
+ - Landing
+ - Learn
+ - NeedsTranslation
+ - Server
+ - Server-side programming
+ - Topic
+ - TopicStub
+translation_of: Learn/Server-side
+---
+{{LearnSidebar}}
+
+**_動態網站_**–**_伺服端網站程式設計_**是一連串有關如何建立動態網站的模塊:動態網站可以針對 HTTP 請求,發送客製化的資訊。這些模塊將介紹伺服端網站程式設計:還有以初學者的角度,來教你怎麼使用 Django (Python) 與 Express (Node.js/JavaScript) 來架設基本的動態網路程式。
+
+大多數主流網站會使用伺服端技術,以根據需要呈現動態資料。例如說,來想想亞馬遜(Amazon)上架多少商品、還有臉書(Facebook)貼了多少動態。如果都用靜態頁面來呈現這些內容,開發就會毫無效率可言。因此,我們會使用靜態技術([HTML](/zh-TW/docs/Learn/HTML)、[CSS](/zh-TW/docs/Learn/CSS)、[JavaScript](/zh-TW/docs/Learn/JavaScript))來顯示靜態模板;並在需要時,動態更新模板內的資料。一如你在逛亞馬遜時,看著五花八門的產品一般。
+
+在當今的 Web development 的世界,我們強烈建議學習怎麼開發伺服端網站程式。
+
+## 學習路徑
+
+學習伺服端網站程式設計通常比用戶端網站程式設計簡單,因為動態網站比較傾向執行多次相似的操作(像是從資料庫擷取資料並放到頁面上、驗證用戶輸入的資料並存到資料庫、檢查登入用戶權限之類的)、使用框架建立網站能讓上述操作、以及其他常見操作變得簡單許多。
+
+基本的程式概念(或是理解特定的語言)會很有用,但不是必須的。同樣地,精於用戶端網站程式設計不是必須,但它能在前端開發時,幫你做得更好。
+
+首先你要知道「web 是怎麼作動的」。我們建議先看看這些文章:
+
+- [何謂網路伺服器?](/zh-TW/docs/Learn/Common_questions/What_is_a_web_server)
+- [建立網站需要什麼軟體?](/zh-TW/docs/Learn/Common_questions/What_software_do_I_need)
+- [如何把檔案傳到伺服器?](/zh-TW/docs/Learn/Common_questions/Upload_files_to_a_web_server)
+
+有了基本觀念後,就可以開始去學習模塊章節的東西了。
+
+## 模塊
+
+本章節包含了以下模塊。你首先要從第一個模塊開始,再循序漸進,學習接下來的模塊。這些模塊將告訴你如何與訪間最熱門的其中兩個伺服器端框架共事。
+
+- [伺服器端程式設計起步走](/zh-TW/docs/Learn/Server-side/First_steps)
+ - : 本模塊會提供與技術無關的伺服器資訊,像是「那什麼?」、「和用戶端有啥不同?」、「有用嗎?」之類的。本模塊也會概述一些比較熱門的伺服器端 web 框架、並告訴你如何選擇。最後,我們還會概述有關伺服器服務的安全性問題。
+- [Django 網站框架 (Python)](/zh-TW/docs/Learn/Server-side/Django)
+ - : Django 以 Python 寫成,是個非常熱門的伺服器端 web 框架。本模塊會講解 Django 是好框架的理由、如何建立開發環境、還有如何處理常見工作。
+- [Express web framework (Node.js/JavaScript)](/zh-TW/docs/Learn/Server-side/Express_Nodejs)
+ - : Express 以 JavaScript 寫成、並在 node.js 執行環境執行。它也是個非常熱門的伺服器端 web 框架。本模塊會講解一些有關本框架的重要優點、也同樣會講解如何建立開發環境、還有如何處理常見工作。
+
+## 參見
+
+- [不用框架的 Node 伺服器](/zh-TW/docs/Learn/Server-side/Node_server_without_framework)
+ - : 如果不想用框架的話,這篇文章會告訴你如何使用純 Node.js 提供簡易的靜態檔案。