diff --git a/files/zh-tw/web/guide/ajax/getting_started/index.html b/files/zh-tw/web/guide/ajax/getting_started/index.html deleted file mode 100644 index 07f56d952d1ece..00000000000000 --- a/files/zh-tw/web/guide/ajax/getting_started/index.html +++ /dev/null @@ -1,287 +0,0 @@ ---- -title: 入門篇 -slug: Web/Guide/AJAX/Getting_Started -tags: - - AJAX - - API - - Advanced - - JavaScript - - WebMechanics - - XMLHttpRequest -translation_of: Web/Guide/AJAX/Getting_Started ---- -

這篇文章說明 AJAX 相關技術的基礎，並提供兩個簡單的實際操作範例供您入門。

- -

AJAX 是什麼？

- -

AJAX 代表 Asynchronous JavaScript And XML，即非同步 JavaScript 及 XML。簡單地說，AJAX 使用 {{domxref("XMLHttpRequest")}} 物件來與伺服器進行通訊。它可以傳送並接收多種格式的資訊，包括 JSON、XML、HTML、以及文字檔案。AJAX 最吸引人的特點是「非同步」的本質，這代表它可以與伺服溝通、交換資料、以及更新頁面，且無須重整網頁。

- -

有兩項即將討論到的特點如下︰

- - - -

第一步 – 如何發出 HTTP 請求

- -

為了使用 JavaScript 向伺服器發送 HTTP 請求，便需要一個能夠提供相關功能的類別實體（an instance of a class）。這樣的類別最初由 Internet Explorer 以 ActiveX 物件的方式引入，稱為 XMLHTTP。Mozilla、Safari 及其他瀏覽器則隨後跟進，實作了 XMLHttpRequest 類別，以提供微軟最初的 ActiveX 物件中的方法及屬性。

- -

因此，為了建立能夠跨瀏覽器的物件實體，可以這麼寫：

- -
// Old compatibility code, no longer needed.
-if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
-    httpRequest = new XMLHttpRequest();
-} else if (window.ActiveXObject) { // IE 6 and older
-    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
-}
-
- -
備註：出於解說上的需要，上述代碼使用最簡方式建立 XMLHTTP 的實體。較貼近實際運用的範例，見第三步。
- -

部分版本的 Mozilla 瀏覽器，在伺服器送回的資料未含 XML mime-type 標頭（header）時會出錯。為了避免這個問題，你可以用下列方法覆寫伺服器傳回的檔頭，以免傳回的不是 text/xml。

- -
httpRequest = new XMLHttpRequest();
-httpRequest.overrideMimeType('text/xml');
-
- -

接下來是要決定伺服器傳回資料後的處理方式，此時你只要以 onreadystatechange 這個屬性指明要處理傳回值的 JavaScript 函式名稱即可，例如：

- -
httpRequest.onreadystatechange = nameOfTheFunction;
- -

注意，指定的函式名稱後不加括號也沒有參數。這只是簡單的賦值，而非真的呼叫函數。除了指定函式名稱外，你也能用 Javascript 即時定義函式的技巧（稱為〝匿名函數〞）來定一個新的處理函式，如下：

- -
httpRequest.onreadystatechange = function(){
-    // 做些事
-};
-
- -

決定處理方式之後你得確實發出 request，此時需叫用 HTTP request 類別的 open() 及 send() 方法，如下：

- -
httpRequest.open('GET', 'http://www.example.org/some.file', true);
-httpRequest.send();
-
- - - -

send() 的參數在以 POST 發出 request 時，可以是任何想傳給伺服器的東西，而資料則以查詢字串的方式列出，例如：

- -
"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
- -

不過如果你想要以 POST 方式傳送資料，則必須先將 MIME 型態改好，如下：

- -
httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
- -

否則伺服器就不會理你傳過來的資料了。

- -

第二步 – 處理伺服器傳回的資料

- -

傳出 request 時必須提供處理傳回值的函數名稱，這個函數是用來處理伺服器的回應。

- -
httpRequest.onreadystatechange = nameOfTheFunction;
-
- -

那麼來看看這個函數該做些什麼。首先，它必須檢查 request 目前的狀態。如果狀態值為 4 代表伺服器已經傳回所有資訊了，便可以開始解析所得資訊。

- -
if (httpRequest.readyState === XMLHttpRequest.DONE) {
-    // 一切 ok, 繼續解析
-} else {
-    // 還沒完成
-}
-
- -

readyState 所有可能的值如下：

- - - -

（資料來源：MSDN）

- -

接下來要檢查伺服器傳回的 HTTP 狀態碼。所有狀態碼列表可於 W3C 網站上查到，但我們要管的是 200 OK 這種狀態。

- -
if (httpRequest.status === 200) {
-    // 萬事具備
-} else {
-    // 似乎有點問題。
-    // 或許伺服器傳回了 404（查無此頁）
-    // 或者 500（內部錯誤）什麼的。
-}
-
- -

檢查傳回的 HTTP 狀態碼後，要怎麼處理傳回的資料就由你決定了。有兩種存取資料的方式：

- - - -

第三步 – 簡單範例

- -

好，接著就做一次簡單的 HTTP 範例，演示方才的各項技巧。這段 JavaScript 會向伺服器要一份裡頭有「I'm a test.」字樣的 HTML 文件(test.html)，而後以 alert() 將文件內容列出。

- -
<button id="ajaxButton" type="button">Make a request</button>
-
-<script>
-(function() {
-  var httpRequest;
-  document.getElementById("ajaxButton").addEventListener('click', makeRequest);
-
-  function makeRequest() {
-    httpRequest = new XMLHttpRequest();
-
-    if (!httpRequest) {
-      alert('Giving up :( Cannot create an XMLHTTP instance');
-      return false;
-    }
-    httpRequest.onreadystatechange = alertContents;
-    httpRequest.open('GET', 'test.html');
-    httpRequest.send();
-  }
-
-  function alertContents() {
-    if (httpRequest.readyState === XMLHttpRequest.DONE) {
-      if (httpRequest.status === 200) {
-        alert(httpRequest.responseText);
-      } else {
-        alert('There was a problem with the request.');
-      }
-    }
-  }
-})();
-</script>
-
- -

在此範例中：

- - - -

你可以由此測試本例，也可以參考測試檔案。

- -
Note:如果你傳送一個要求到一段代碼，而這段代碼將回應XML而非靜態的HTML檔，那則必須要設定一個可以在IE中運作的header。如果我們不設定header Content-Type: application/xml，IE將會在我們試圖運作的XML項目行下，回應一個"Object Expected" 的錯誤。
- -
Note 2: 如果我們沒有設定header Cache-Control: no-cache，那瀏覽器將會藏匿response並且不再重新傳送request，造成除錯上的挑戰。我們也可以增加一個 always-different GET 參數，像是 timestamp 或 random number (詳見bypassing the cache)
- -
Note 3: If the httpRequest variable is used globally, competing functions calling makeRequest() can overwrite each other, causing a race condition. Declaring the httpRequest variable local to a closure containing the AJAX functions avoids this.
- -

In the event of a communication error (such as the server going down), an exception will be thrown in the onreadystatechange method when accessing the response status. To mitigate this problem, you could wrap your if...then statement in a try...catch:

- -
function alertContents() {
-  try {
-    if (httpRequest.readyState === XMLHttpRequest.DONE) {
-      if (httpRequest.status === 200) {
-        alert(httpRequest.responseText);
-      } else {
-        alert('There was a problem with the request.');
-      }
-    }
-  }
-  catch( e ) {
-    alert('Caught Exception: ' + e.description);
-  }
-}
-
- -

第四步 – 運用 XML 資料

- -

前面的例子中，在收到 HTTP 傳回值後我們以物件的 reponseText 屬性接收 test.html 檔案的內容，接著來試試 responseXML 屬性。

- -

首先，我們得做個格式正確的 XML 文件以便稍後取用。文件 (test.xml) 內容如下：

- -
<?xml version="1.0" ?>
-<root>
-    I'm a test.
-</root>
-
- -

在程式中，我們叫用檔案的地方只須略事修改如下：

- -
...
-onclick="makeRequest('test.xml')">
-...
-
- -

接著在 alertContents() 中，我們把 alert(http_request.responseText); 改成這樣：

- -
var xmldoc = httpRequest.responseXML;
-var root_node = xmldoc.getElementsByTagName('root').item(0);
-alert(root_node.firstChild.data);
-
- -

這樣一來我們便可取得 responseXML 所傳回的 XMLDocument 物件，而後以 DOM 方法取用 XML 文件的內容。你可以參考 test.xml 的原始碼 以及修改過後的測試程式。

- -

關於 DOM 方法，請參考 Mozilla DOM 文件。

- -

Step 5 – Working with data

- -

Finally, let's send some data to the server and receive a response. Our JavaScript will request a dynamic page this time, test.php, which will take the data we send and return a "computed" string - "Hello, [user data]!" - which we'll alert().

- -

First we'll add a text box to our HTML so the user can enter their name:

- -
<label>Your name:
-  <input type="text" id="ajaxTextbox" />
-</label>
-<span id="ajaxButton" style="cursor: pointer; text-decoration: underline">
-  Make a request
-</span>
- -

We'll also add a line to our event handler to get the user's data from the text box and send it to the makeRequest() function along with the URL of our server-side script:

- -
  document.getElementById("ajaxButton").onclick = function() {
-      var userName = document.getElementById("ajaxTextbox").value;
-      makeRequest('test.php',userName);
-  };
-
- -

We need to modify makeRequest() to accept the user data and pass it along to the server. We'll change the request method from GET to POST, and include our data as a parameter in the call to httpRequest.send():

- -
  function makeRequest(url, userName) {
-
-    ...
-
-    httpRequest.onreadystatechange = alertContents;
-    httpRequest.open('POST', url);
-    httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-    httpRequest.send('userName=' + encodeURIComponent(userName));
-  }
-
- -

The function alertContents() can be written the same way it was in Step 3 to alert our computed string, if that's all the server returns. However, let's say the server is going to return both the computed string and the original user data. So if our user typed "Jane" in the text box, the server's response would look like this:

- -

{"userData":"Jane","computedString":"Hi, Jane!"}

- -

To use this data within alertContents(), we can't just alert the responseText, we have to parse it and alert computedString, the property we want:

- -
function alertContents() {
-  if (httpRequest.readyState === XMLHttpRequest.DONE) {
-    if (httpRequest.status === 200) {
-      var response = JSON.parse(httpRequest.responseText);
-      alert(response.computedString);
-    } else {
-      alert('There was a problem with the request.');
-    }
-  }
-}
- -

The test.php file should contain the following:

- -
$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name';
-$computedString = "Hi, " . $name;
-$array = ['userName' => $name, 'computedString' => $computedString];
-echo json_encode($array);
- -

For more on DOM methods, be sure to check Mozilla's DOM implementation documents.

diff --git a/files/zh-tw/web/guide/ajax/getting_started/index.md b/files/zh-tw/web/guide/ajax/getting_started/index.md new file mode 100644 index 00000000000000..b8212fa25107d5 --- /dev/null +++ b/files/zh-tw/web/guide/ajax/getting_started/index.md @@ -0,0 +1,302 @@ +--- +title: 入門篇 +slug: Web/Guide/AJAX/Getting_Started +tags: + - AJAX + - API + - Advanced + - JavaScript + - WebMechanics + - XMLHttpRequest +translation_of: Web/Guide/AJAX/Getting_Started +--- +這篇文章說明 AJAX 相關技術的基礎，並提供兩個簡單的實際操作範例供您入門。 + +### AJAX 是什麼？ + +AJAX 代表 **A**synchronous **J**avaScript **A**nd **X**ML，即非同步 JavaScript 及 XML。簡單地說，AJAX 使用 {{domxref("XMLHttpRequest")}} 物件來與伺服器進行通訊。它可以傳送並接收多種格式的資訊，包括 JSON、XML、HTML、以及文字檔案。AJAX 最吸引人的特點是「非同步」的本質，這代表它可以與伺服溝通、交換資料、以及更新頁面，且無須重整網頁。 + +有兩項即將討論到的特點如下︰ + +- 無須重新載入整個頁面，便能對伺服器發送請求 +- 分析並運用 XML 文件 + +### 第一步 – 如何發出 HTTP 請求 + +為了使用 JavaScript 向伺服器發送 HTTP 請求，便需要一個能夠提供相關功能的類別實體（an instance of a class）。這樣的類別最初由 Internet Explorer 以 ActiveX 物件的方式引入，稱為 `XMLHTTP`。Mozilla、Safari 及其他瀏覽器則隨後跟進，實作了 `XMLHttpRequest` 類別，以提供微軟最初的 ActiveX 物件中的方法及屬性。 + +因此，為了建立能夠跨瀏覽器的物件實體，可以這麼寫： + +```js +// Old compatibility code, no longer needed. +if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ... + httpRequest = new XMLHttpRequest(); +} else if (window.ActiveXObject) { // IE 6 and older + httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); +} +``` + +> **備註：** 出於解說上的需要，上述代碼使用最簡方式建立 XMLHTTP 的實體。較貼近實際運用的範例，見第三步。 + +部分版本的 Mozilla 瀏覽器，在伺服器送回的資料未含 XML `mime-type` 標頭（header）時會出錯。為了避免這個問題，你可以用下列方法覆寫伺服器傳回的檔頭，以免傳回的不是 `text/xml`。 + +```plain +httpRequest = new XMLHttpRequest(); +httpRequest.overrideMimeType('text/xml'); +``` + +接下來是要決定伺服器傳回資料後的處理方式，此時你只要以 `onreadystatechange` 這個屬性指明要處理傳回值的 JavaScript 函式名稱即可，例如： + +```js +httpRequest.onreadystatechange = nameOfTheFunction; +``` + +注意，指定的函式名稱後不加括號也沒有參數。這只是簡單的賦值，而非真的呼叫函數。除了指定函式名稱外，你也能用 Javascript 即時定義函式的技巧（稱為〝匿名函數〞）來定一個新的處理函式，如下： + +```js +httpRequest.onreadystatechange = function(){ + // 做些事 +}; +``` + +決定處理方式之後你得確實發出 request，此時需叫用 HTTP request 類別的 `open()` 及 `send()` 方法，如下： + +```js +httpRequest.open('GET', 'http://www.example.org/some.file', true); +httpRequest.send(); +``` + +- `open()` 的第一個參數是 HTTP request 的方法，也就是從 GET、POST、HEAD 等伺服器支援的方法中擇一使用。為遵循 HTTP 標準，請記得這些方法都是大寫，否則有的瀏覽器（如 Firefox）不會處理這些請求。其他可用的 HTTP request 方法的列表請參考 [W3C 規格書](http://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html)。 +- 第二個參數是請求頁面的 URL。基於安全考量，你不能叫用同網域以外的網頁。如果網域不同，則叫用 `open()` 時會出現「權限不足，拒絕存取」那類的錯誤。常見的錯誤多為在 domain.tld 的網站下呼叫 www\.domain.tld 中的網頁，僅是一點點差別都不行。 +- 第三個參數決定此 request 是否不同步進行，如果設定為 `TRUE` 則即使伺服器尚未傳回資料也會繼續執行其餘的程式，這也就是 AJAX 中第一個 A 代表的意義。 + +`send()` 的參數在以 POST 發出 request 時，可以是任何想傳給伺服器的東西，而資料則以查詢字串的方式列出，例如： + +```plain +"name=value&anothername="+encodeURIComponent(myVar)+"&so=on" +``` + +不過如果你想要以 POST 方式傳送資料，則必須先將 MIME 型態改好，如下： + +```js +httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); +``` + +否則伺服器就不會理你傳過來的資料了。 + +### 第二步 – 處理伺服器傳回的資料 + +傳出 request 時必須提供處理傳回值的函數名稱，這個函數是用來處理伺服器的回應。 + +```js +httpRequest.onreadystatechange = nameOfTheFunction; +``` + +那麼來看看這個函數該做些什麼。首先，它必須檢查 request 目前的狀態。如果狀態值為 4 代表伺服器已經傳回所有資訊了，便可以開始解析所得資訊。 + +```js +if (httpRequest.readyState === XMLHttpRequest.DONE) { + // 一切 ok, 繼續解析 +} else { + // 還沒完成 +} +``` + +`readyState` 所有可能的值如下： + +- 0（還沒開始） +- 1（讀取中） +- 2（已讀取） +- 3（資訊交換中） +- 4（一切完成） + +（[資料來源：MSDN](http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/readystate_1.asp)） + +接下來要檢查伺服器傳回的 HTTP 狀態碼。所有狀態碼列表可於 [W3C 網站](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html)上查到，但我們要管的是 `200 OK` 這種狀態。 + +```js +if (httpRequest.status === 200) { + // 萬事具備 +} else { + // 似乎有點問題。 + // 或許伺服器傳回了 404（查無此頁） + // 或者 500（內部錯誤）什麼的。 +} +``` + +檢查傳回的 HTTP 狀態碼後，要怎麼處理傳回的資料就由你決定了。有兩種存取資料的方式： + +- `httpRequest.responseText` – 這樣會把傳回值視為字串用 +- `httpRequest.responseXML` – 這樣會把傳回值視為 `XMLDocument` 物件，而後可用 JavaScript DOM 相關函式處理 + +### 第三步 – 簡單範例 + +好，接著就做一次簡單的 HTTP 範例，演示方才的各項技巧。這段 JavaScript 會向伺服器要一份裡頭有「I'm a test.」字樣的 HTML 文件(`test.html`)，而後以 `alert()` 將文件內容列出。 + +```html + + + +``` + +在此範例中： + +- 首先使用者按下「Make a request」 +- 這麼一來就會呼叫 `makeRequest()` 函式，亦傳入參數值 `test.html` (也就是那份 HTML 檔的名稱，放在同目錄下) +- 接著發出 request，而後會將主導權交給 `onreadystatechange` 指定的 `alertContents()` 函式 +- `alertContents()` 檢查回應是否正常，而後以 `alert()` 將 `test.html` 的內容列出 + +你可以[由此測試本例](http://www.w3clubs.com/mozdev/httprequest_test.html)，也可以參考[測試檔案](http://www.w3clubs.com/mozdev/test.html)。 + +> **備註：** 如果你傳送一個要求到一段代碼，而這段代碼將回應 XML 而非靜態的 HTML 檔，那則必須要設定一個可以在 IE 中運作的 header。如果我們不設定 header `Content-Type: application/xml`，IE 將會在我們試圖運作的 XML 項目行下，回應一個"Object Expected" 的錯誤。 + +> **備註：** 如果我們沒有設定 header `Cache-Control: no-cache`，那瀏覽器將會藏匿 response 並且不再重新傳送 request，造成除錯上的挑戰。我們也可以增加一個 always-different GET 參數，像是 timestamp 或 random number (詳見[bypassing the cache](/en/DOM/XMLHttpRequest/Using_XMLHttpRequest#Bypassing_the_cache)) + +> **備註：** If the `httpRequest` variable is used globally, competing functions calling `makeRequest()` can overwrite each other, causing a race condition. Declaring the `httpRequest `variable local to a [closure](/en/JavaScript/Guide/Closures) containing the AJAX functions avoids this. + +In the event of a communication error (such as the server going down), an exception will be thrown in the `onreadystatechange` method when accessing the response status. To mitigate this problem, you could wrap your `if...then` statement in a `try...catch`: + +```js +function alertContents() { + try { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + alert(httpRequest.responseText); + } else { + alert('There was a problem with the request.'); + } + } + } + catch( e ) { + alert('Caught Exception: ' + e.description); + } +} +``` + +### 第四步 – 運用 XML 資料 + +前面的例子中，在收到 HTTP 傳回值後我們以物件的 `reponseText` 屬性接收 `test.html` 檔案的內容，接著來試試 `responseXML` 屬性。 + +首先，我們得做個格式正確的 XML 文件以便稍後取用。文件 (`test.xml`) 內容如下： + +```html + + + I'm a test. + +``` + +在程式中，我們叫用檔案的地方只須略事修改如下： + +```html +... +onclick="makeRequest('test.xml')"> +... +``` + +接著在 `alertContents()` 中，我們把 `alert(http_request.responseText);` 改成這樣： + +```js +var xmldoc = httpRequest.responseXML; +var root_node = xmldoc.getElementsByTagName('root').item(0); +alert(root_node.firstChild.data); +``` + +這樣一來我們便可取得 `responseXML` 所傳回的 `XMLDocument` 物件，而後以 DOM 方法取用 XML 文件的內容。你可以參考 [`test.xml` 的原始碼](http://www.w3clubs.com/mozdev/test.xml) 以及修改過後的[測試程式](http://www.w3clubs.com/mozdev/httprequest_test_xml.html)。 + +關於 DOM 方法，請參考 [Mozilla DOM](http://www.mozilla.org/docs/dom/) 文件。 + +### Step 5 – Working with data + +Finally, let's send some data to the server and receive a response. Our JavaScript will request a dynamic page this time, `test.php`, which will take the data we send and return a "computed" string - "Hello, \[user data]!" - which we'll `alert().` + +First we'll add a text box to our HTML so the user can enter their name: + +```html + + + Make a request + +``` + +We'll also add a line to our event handler to get the user's data from the text box and send it to the `makeRequest()` function along with the URL of our server-side script: + +```js + document.getElementById("ajaxButton").onclick = function() { + var userName = document.getElementById("ajaxTextbox").value; + makeRequest('test.php',userName); + }; +``` + +We need to modify `makeRequest()` to accept the user data and pass it along to the server. We'll change the request method from `GET` to `POST`, and include our data as a parameter in the call to `httpRequest.send()`: + +```js + function makeRequest(url, userName) { + + ... + + httpRequest.onreadystatechange = alertContents; + httpRequest.open('POST', url); + httpRequest.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); + httpRequest.send('userName=' + encodeURIComponent(userName)); + } +``` + +The function `alertContents()` can be written the same way it was in Step 3 to alert our computed string, if that's all the server returns. However, let's say the server is going to return both the computed string and the original user data. So if our user typed "Jane" in the text box, the server's response would look like this: + +`{"userData":"Jane","computedString":"Hi, Jane!"}` + +To use this data within `alertContents()`, we can't just alert the `responseText`, we have to parse it and alert `computedString`, the property we want: + +```js +function alertContents() { + if (httpRequest.readyState === XMLHttpRequest.DONE) { + if (httpRequest.status === 200) { + var response = JSON.parse(httpRequest.responseText); + alert(response.computedString); + } else { + alert('There was a problem with the request.'); + } + } +} +``` + +The `test.php file should contain the following:` + +```php +$name = (isset($_POST['userName'])) ? $_POST['userName'] : 'no name'; +$computedString = "Hi, " . $name; +$array = ['userName' => $name, 'computedString' => $computedString]; +echo json_encode($array); +``` + +`For more on DOM methods, be sure to check Mozilla's DOM implementation documents.` diff --git a/files/zh-tw/web/guide/ajax/index.html b/files/zh-tw/web/guide/ajax/index.html deleted file mode 100644 index c4ef2a5b9dbf6c..00000000000000 --- a/files/zh-tw/web/guide/ajax/index.html +++ /dev/null @@ -1,103 +0,0 @@ ---- -title: Ajax -slug: Web/Guide/AJAX -translation_of: Web/Guide/AJAX ---- -
入門篇
-Ajax 簡介。
- -
-

非同步 JavaScript 及 XML（Asynchronous JavaScript and XML，AJAX） 並不能稱做是種「技術」，而是 2005 年時由 Jesse James Garrett 所發明的術語，描述一種使用數個既有技術的「新」方法。這些技術包括 HTML 或 XHTML、層疊樣式表、JavaScript、文件物件模型、XML、XSLT 以及最重要的 XMLHttpRequest 物件。
- 當這些技術被結合在 Ajax 模型中，Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。

- -

雖然 X 在 Ajax 中代表 XML，但由於 JSON 的許多優點，如輕量以及其本身就是 JavaScript 的一部分等，讓現今 JSON 比起 XML 被更廣泛的使用。JSON 與 XML 兩者都被用來在 Ajax 模型中包裝資訊。

-
- -

文件

- -
-
入門篇
-
這篇文章會指引你瞭解 Ajax 的基礎知識並提供了兩個簡單的動手做範例來入門。
-
使用 XMLHttpRequest API
-
XMLHttpRequest API 是 Ajax 的核心。這篇文章將解釋如何使用一些 Ajax 技術，例如： - -
-
Fetch API
-
Fetch API 提供了取得資源（fetching resources）的介面（interface）。這似乎對於曾使用過 {{domxref("XMLHTTPRequest")}} 的人而言並不陌生，然而這個 API 提供一個更強大且彈性的功能集。
-
Server-sent events
-
傳統上來說，一個網頁必須送出 request 到伺服器來得到新的資料，也就是說，網頁藉由server-sent 事件從伺服器請求 (request) 資料，伺服器在任何時候都能送新的資料給網頁，藉由推送訊息到網頁。這些傳入的訊息可以被視為網頁中的 事件 + 資料，請參見 使用server-sent event 。
-
Pure-Ajax navigation example
-
This article provides a working (minimalist) example of a pure-Ajax website composed only of three pages.
-
Sending and Receiving Binary Data
-
The responseType property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), "arraybuffer", "blob", "document", "json", and "text". The response property will contain the entity body according to responseType, as an ArrayBuffer, Blob, Document, JSON, or string. This article will show some Ajax I/O techniques.
-
XML
-
可擴展標記語言（The Extensible Markup Language, XML）是W3C推薦的用於創建特殊用途標記語言的通用標記語言。它是SGML的簡化子集，能夠描述許多不同類型的數據。其主要目的是促進不同系統間的數據共享，特別是通過網際網路連接的系統。
-
JXON
-
JXON 代表無損耗 Javascript XML Object Notation, 是一個通用名稱，用來定義使用 XML 的 Javascript 物件樹(JSON) 的通用名稱。
-
解析和序列化 XML
-
如何從一串字串，一個檔案中透過 Javascript 解析一個 XML 文件 ，以及如何將 XML 檔案序列化成字串、Javascript 物件樹(JXON) 或檔案。
-
XPath
-
XPath stands for XML Path Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an XML document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not.
-
The FileReader API
-
The FileReader API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using File or Blob objects to specify the file or data to read. File objects may be obtained from a FileList object returned as a result of a user selecting files using the "><input> element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement.
-
HTML in XMLHttpRequest
-
The W3C XMLHttpRequest specification adds HTML parsing support to XMLHttpRequest, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using XMLHttpRequest.
-
Other resources
-
Other Ajax resources you may find useful.
-
- -

參見

- -
-
Alternate Ajax Techniques
-
Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods.
-
Ajax: A New Approach to Web Applications
-
Jesse James Garrett, of adaptive path, wrote this article in February 2005, introducing Ajax and its related concepts.
-
A Simpler Ajax Path
-
"As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input."
-
Ajax Mistakes
-
Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make.
-
Tutorial with examples.
-
-
XMLHttpRequest specification
-
W3C Working draft
-
- -

社群

- - - -

工具

- - - -

範例

- - - -

相關主題

- -

HTML, XHTML, CSS, DOM, JavaScript, XML, XMLHttpRequest, XSLT, DHTML, Same Origin Policy

- -

{{ListSubpages}}

diff --git a/files/zh-tw/web/guide/ajax/index.md b/files/zh-tw/web/guide/ajax/index.md new file mode 100644 index 00000000000000..dd5e69de8396fd --- /dev/null +++ b/files/zh-tw/web/guide/ajax/index.md @@ -0,0 +1,87 @@ +--- +title: Ajax +slug: Web/Guide/AJAX +translation_of: Web/Guide/AJAX +--- +**[入門篇](/zh-TW/docs/Web/Guide/AJAX/Getting_Started)** +Ajax 簡介。 + +非同步 JavaScript 及 XML（Asynchronous JavaScript and XML，AJAX）並不能稱做是種「技術」，而是 2005 年時由 Jesse James Garrett 所發明的術語，描述一種使用數個既有技術的「新」方法。這些技術包括 [HTML](/zh-TW/docs/HTML) 或 [XHTML](/zh-TW/docs/XHTML)、[層疊樣式表](/zh-TW/docs/CSS)、[JavaScript](/zh-TW/docs/JavaScript)、[文件物件模型](/zh-TW/docs/DOM)、[XML](/zh-TW/docs/XML)、[XSLT](/zh-TW/docs/XSLT) 以及最重要的 [XMLHttpRequest 物件](/zh-TW/docs/XMLHttpRequest)。 +當這些技術被結合在 Ajax 模型中，Web 應用程式便能快速、即時更動介面及內容，不需要重新讀取整個網頁，讓程式更快回應使用者的操作。 + +雖然 X 在 Ajax 中代表 XML，但由於 [JSON](/zh-TW/docs/JSON) 的許多優點，如輕量以及其本身就是 JavaScript 的一部分等，讓現今 JSON 比起 XML 被更廣泛的使用。JSON 與 XML 兩者都被用來在 Ajax 模型中包裝資訊。 + +## 文件 + +- [入門篇](/zh-TW/docs/AJAX/Getting_Started) + - : 這篇文章會指引你瞭解 Ajax 的基礎知識並提供了兩個簡單的動手做範例來入門。 +- [使用 XMLHttpRequest API](/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest) + - : [`XMLHttpRequest` API](/zh-TW/docs/DOM/XMLHttpRequest) 是 Ajax 的核心。這篇文章將解釋如何使用一些 Ajax 技術，例如： [分析及處理伺服器回應](/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Handling_responses) + - [監視請求進度](/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Monitoring_progress) + - [提交表單與上傳二進制檔案](/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Submitting_forms_and_uploading_files) – 使用*單純的* Ajax，或使用 [`FormData`](/zh-TW/docs/DOM/XMLHttpRequest/FormData) 物件 + - [建立同步或非同步請求](/zh-TW/docs/DOM/XMLHttpRequest/Using_XMLHttpRequest#Types_of_requests) + - 在 [Web workers](/zh-TW/docs/DOM/Worker) 中使用 Ajax +- [Fetch API](/zh-TW/docs/Web/API/Fetch_API) + - : Fetch API 提供了取得資源（fetching resources）的介面（interface）。這似乎對於曾使用過 {{domxref("XMLHTTPRequest")}} 的人而言並不陌生，然而這個 API 提供一個更強大且彈性的功能集。 +- [Server-sent events](/zh-TW/docs/Server-sent_events) + - : 傳統上來說，一個網頁必須送出 request 到伺服器來得到新的資料，也就是說，網頁藉由 server-sent 事件從伺服器請求 (request) 資料，伺服器在任何時候都能送新的資料給網頁，藉由推送訊息到網頁。這些傳入的訊息可以被視為網頁中的 _[事件](/zh-TW/docs/DOM/event)_ + 資料，請參見 [使用 server-sent event ](/zh-TW/docs/Server-sent_events/Using_server-sent_events)。 +- [_Pure-Ajax_ navigation example](/zh-TW/docs/Web/Guide/DOM/Manipulating_the_browser_history/Example) + - : This article provides a working (minimalist) example of a _pure-Ajax_ website composed only of three pages. +- [Sending and Receiving Binary Data](/zh-TW/docs/DOM/XMLHttpRequest/Sending_and_Receiving_Binary_Data) + - : The `responseType` property of the XMLHttpRequest object can be set to change the expected response type from the server. Possible values are the empty string (default), `"arraybuffer"`, `"blob"`, `"document"`, `"json"`, and `"text"`. The `response` property will contain the entity body according to `responseType`, as an `ArrayBuffer`, `Blob`, `Document`, `JSON`, or string. This article will show some Ajax I/O techniques. +- [XML](/zh-TW/docs/XML) + - : 可擴展標記語言（The Extensible Markup Language, XML）是 W3C 推薦的用於創建特殊用途標記語言的通用標記語言。它是 SGML 的簡化子集，能夠描述許多不同類型的數據。其主要目的是促進不同系統間的數據共享，特別是通過網際網路連接的系統。 +- [JXON](/zh-TW/docs/JXON) + - : JXON 代表無損耗 **J**avascript **X**ML **O**bject **N**otation, 是一個通用名稱，用來定義使用 XML 的 Javascript 物件樹(JSON) 的通用名稱。 +- [解析和序列化 XML](/zh-TW/docs/Parsing_and_serializing_XML) + - : 如何從一串字串，一個檔案中透過 Javascript 解析一個 XML 文件 ，以及如何將 XML 檔案序列化成字串、Javascript 物件樹(JXON) 或檔案。 +- [XPath](/zh-TW/docs/XPath) + - : XPath stands for **X**ML **Path** Language, it uses a non-XML syntax that provides a flexible way of addressing (pointing to) different parts of an [XML](/zh-TW/docs/XML) document. As well as this, it can also be used to test addressed nodes within a document to determine whether they match a pattern or not. +- [The `FileReader` API](/zh-TW/docs/DOM/FileReader) + - : The `FileReader` API lets web applications asynchronously read the contents of files (or raw data buffers) stored on the user's computer, using [`File`](/zh-TW/docs/DOM/File) or [`Blob`](/zh-TW/docs/DOM/Blob) objects to specify the file or data to read. File objects may be obtained from a [`FileList`](/zh-TW/docs/DOM/FileList) object returned as a result of a user selecting files using the [`">`](/en-US/docs/HTML/Element/input) element, from a drag and drop operation's [`DataTransfer`](/En/DragDrop/DataTransfer) object, or from the `mozGetAsFile()` API on an [`HTMLCanvasElement`](/zh-TW/docs/DOM/HTMLCanvasElement). +- [HTML in XMLHttpRequest](/zh-TW/docs/HTML_in_XMLHttpRequest) + - : The W3C [XMLHttpRequest](http://dvcs.w3.org/hg/xhr/raw-file/tip/Overview.html) specification adds HTML parsing support to [`XMLHttpRequest`](/en/DOM/XMLHttpRequest), which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed DOM using `XMLHttpRequest`. +- [Other resources](/zh-TW/docs/AJAX/Other_Resources) + - : Other Ajax resources you may find useful. + +## 參見 + +- [Alternate Ajax Techniques](http://www.webreference.com/programming/ajax_tech/) + - : Most articles on Ajax have focused on using XMLHttp as the means to achieving such communication, but Ajax techniques are not limited to just XMLHttp. There are several other methods. +- [Ajax: A New Approach to Web Applications](http://adaptivepath.org/ideas/ajax-new-approach-web-applications/) + - : Jesse James Garrett, of [adaptive path](http://www.adaptivepath.com), wrote this article in February 2005, introducing Ajax and its related concepts. +- [A Simpler Ajax Path](http://www.onlamp.com/pub/a/onlamp/2005/05/19/xmlhttprequest.html) + - : "As it turns out, it's pretty easy to take advantage of the XMLHttpRequest object to make a web app act more like a desktop app while still using traditional tools like web forms for collecting user input." +- [Ajax Mistakes](http://alexbosworth.backpackit.com/pub/67688) + - : Alex Bosworth has written this article outlining some of the mistakes Ajax application developers can make. +- [Tutorial](http://www.xul.fr/en-xml-ajax.html) with examples. + - : TBD +- [XMLHttpRequest specification](http://www.w3.org/TR/XMLHttpRequest/) + - : W3C Working draft + +## 社群 + +- [Ajax community links](/zh-TW/docs/AJAX/Community) + +## 工具 + +- [Toolkits and frameworks](http://www.ajaxprojects.com) +- [Firebug - Ajax/Web development tool](http://www.getfirebug.com/) +- [AJAX Debugging Tool](http://blog.monstuff.com/archives/000252.html) +- [Flash/AJAX Integration Kit](http://www.osflash.org/doku.php?id=flashjs) +- [A Simple XMLHTTP Interface Library](http://xkr.us/code/javascript/XHConn/) + +## 範例 + +- [Ajax poller script](http://www.dhtmlgoodies.com/index.html?whichScript=ajax-poller) +- [Ajax Chat Tutorial](http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=9) +- [RSS Ticker with Ajax](http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=13) +- [Create your own Ajax effects](http://www.thinkvitamin.com/features/ajax/create-your-own-ajax-effects) +- [Ajax: Creating Huge Bookmarklets](http://codinginparadise.org/weblog/2005/08/ajax-creating-huge-bookmarklets.html) +- [Ajax: Hot!Ajax There are many cool examples](http://www.hotajax.org) + +## 相關主題 + +[HTML](/zh-TW/docs/HTML), [XHTML](/zh-TW/docs/XHTML), [CSS](/zh-TW/docs/CSS), [DOM](/zh-TW/docs/DOM), [JavaScript](/zh-TW/docs/JavaScript), [XML](/zh-TW/docs/XML), [XMLHttpRequest](/zh-TW/docs/nsIXMLHttpRequest), [XSLT](/zh-TW/docs/XSLT), [DHTML](/zh-TW/docs/DHTML), [Same Origin Policy](/zh-TW/docs/JavaScript/Same_origin_policy_for_JavaScript) + +{{ListSubpages}} diff --git a/files/zh-tw/web/guide/graphics/index.html b/files/zh-tw/web/guide/graphics/index.html deleted file mode 100644 index 8e060ea1f06eb5..00000000000000 --- a/files/zh-tw/web/guide/graphics/index.html +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: 網頁上的圖像 -slug: Web/Guide/Graphics -translation_of: Web/Guide/Graphics ---- -

現代網站或應用程式通常都配有圖像。我們可以很容易地使用{{HTMLElement("img")}}元素呈現靜態圖像 , 或藉由使用{{cssxref("background-image")}} 設定HTML的背景元素性質。你常會想要建立動態圖像或在事後操縱圖像。這些文章將讓你知道如何達成這些效果。

- -

2D 圖像

- -
-
Canvas
-
{{HTMLElement("canvas")}} 元素提供 APIs讓開發者透過Javascript來繪製2D圖像.
-
SVG
-
可縮放向量圖像(SVG) 讓你可以使用直線，曲線以及其他幾何圖形來編寫圖像。避免使用點陣圖像(bitmaps)，你可以創造出適合任何大小的圖像。
-
- -
-

3D 圖像

- -
-
WebGL
-
一份WebGL初始指南，網頁用3D 圖像 API。這項技術讓你在網頁內容使用standard OpenGL ES。
-
- -

影片

- -
-
使用 HTML5 影音
-
在 HTML 檔案嵌入影片及控制播放。
-
WebRTC
-
在WebRTC 中 RTC 是 Real-Time Communications 的簡稱，讓瀏覽器客戶端之間(peers)串流影片/音效檔案與數據分享的技術。
-
diff --git a/files/zh-tw/web/guide/graphics/index.md b/files/zh-tw/web/guide/graphics/index.md new file mode 100644 index 00000000000000..840810e23e0148 --- /dev/null +++ b/files/zh-tw/web/guide/graphics/index.md @@ -0,0 +1,25 @@ +--- +title: 網頁上的圖像 +slug: Web/Guide/Graphics +translation_of: Web/Guide/Graphics +--- +現代網站或應用程式通常都配有圖像。我們可以很容易地使用{{HTMLElement("img")}}元素呈現靜態圖像 , 或藉由使用{{cssxref("background-image")}} 設定 HTML 的背景元素性質。你常會想要建立動態圖像或在事後操縱圖像。這些文章將讓你知道如何達成這些效果。 + +## 2D 圖像 + +- [Canvas](/zh-TW/docs/HTML/Canvas) + - : _{{HTMLElement("canvas")}} 元素提供_ _APIs 讓開發者透過 Javascript 來繪製 2D 圖像._ +- [SVG](/zh-TW/docs/Web/SVG) + - : _可縮放向量圖像(SVG) 讓你可以使用直線，曲線以及其他幾何圖形來編寫圖像。避免使用點陣圖像(bitmaps)，你可以創造出適合任何大小的圖像。_ + +## 3D 圖像 + +- [WebGL](/zh-TW/docs/Web/WebGL) + - : _一份 WebGL 初始指南，網頁用 3D 圖像 API。這項技術讓你在網頁內容使用 standard OpenGL ES。_ + +## 影片 + +- [使用 HTML5 影音](/zh-TW/docs/Web/Guide/HTML/Using_HTML5_audio_and_video) + - : _在 HTML 檔案嵌入影片及控制播放。_ +- [WebRTC](/zh-TW/docs/WebRTC) + - : _在 WebRTC 中 RTC 是 Real-Time Communications 的簡稱，讓瀏覽器客戶端之間(peers)串流影片/音效檔案與數據分享的技術。_ diff --git a/files/zh-tw/web/guide/html/content_categories/index.html b/files/zh-tw/web/guide/html/content_categories/index.html deleted file mode 100644 index 7734f9e1317725..00000000000000 --- a/files/zh-tw/web/guide/html/content_categories/index.html +++ /dev/null @@ -1,148 +0,0 @@ ---- -title: 內容類型 -slug: Web/Guide/HTML/Content_categories -translation_of: Web/Guide/HTML/Content_categories ---- -

每個 HTML 元素都要遵從該元素可擁有何種內容規則，這些規則被歸為幾種常用的內容模型（content model）。每個 HTML 元素都屬於零個、一個、或數個內容的模型，所有元素內容的設置規則都要遵從 HTML 一致性文件。

- -

內容類型有三種類型：

- - - -
Content_categories_venn.png
- -

主要內容類型

- -

資訊元內容（Metadata content）

- -

屬於元資訊內容類型的元素修飾該文件其餘部分的陳述或行為、與其他文件建立連結、或是傳達其他外來（out of band）訊息。

- -

屬於這個類型的元素有 {{HTMLElement("base")}}、{{Deprecated_Inline}}{{HTMLElement("command")}}、{{HTMLElement("link")}}、{{HTMLElement("meta")}}、{{HTMLElement("noscript")}}、{{HTMLElement("script")}}、{{HTMLElement("style")}} 與 {{HTMLElement("title")}}

- -

流內容（Flow content）

- -

屬於流內容的元素通常含有文字或嵌入內容。它們是：{{HTMLElement("a")}}、{{HTMLElement("abbr")}}、{{HTMLElement("address")}}、{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("audio")}}、{{HTMLElement("b")}},{{HTMLElement("bdo")}}、{{HTMLElement("bdi")}}、{{HTMLElement("blockquote")}}、{{HTMLElement("br")}}、{{HTMLElement("button")}}、{{HTMLElement("canvas")}}、{{HTMLElement("cite")}}、{{HTMLElement("code")}}、{{Deprecated_Inline}}{{HTMLElement("command")}}、{{HTMLElement("data")}}、{{HTMLElement("datalist")}}、{{HTMLElement("del")}}、{{HTMLElement("details")}}、{{HTMLElement("dfn")}}、{{HTMLElement("div")}}、{{HTMLElement("dl")}}、{{HTMLElement("em")}}、{{HTMLElement("embed")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("figure")}}、{{HTMLElement("footer")}}、{{HTMLElement("form")}}、{{HTMLElement("h1")}}、{{HTMLElement("h2")}}、{{HTMLElement("h3")}}、{{HTMLElement("h4")}}、{{HTMLElement("h5")}}、{{HTMLElement("h6")}}、{{HTMLElement("header")}}、{{HTMLElement("hgroup")}}、{{HTMLElement("hr")}}、{{HTMLElement("i")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{HTMLElement("input")}}、{{HTMLElement("ins")}}、{{HTMLElement("kbd")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("main")}}、{{HTMLElement("map")}}、{{HTMLElement("mark")}}、{{MathMLElement("math")}}、{{HTMLElement("menu")}}、{{HTMLElement("meter")}}、{{HTMLElement("nav")}}、{{HTMLElement("noscript")}}、{{HTMLElement("object")}}、{{HTMLElement("ol")}}、{{HTMLElement("output")}}、{{HTMLElement("p")}}、{{HTMLElement("pre")}}、{{HTMLElement("progress")}}、{{HTMLElement("q")}}、{{HTMLElement("ruby")}}、{{HTMLElement("s")}}、{{HTMLElement("samp")}}、{{HTMLElement("script")}}、{{HTMLElement("section")}}、{{HTMLElement("select")}}、{{HTMLElement("small")}}、{{HTMLElement("span")}}、{{HTMLElement("strong")}}、{{HTMLElement("sub")}}、{{HTMLElement("sup")}}、{{SVGElement("svg")}}、{{HTMLElement("table")}}、{{HTMLElement("template")}}、{{HTMLElement("textarea")}}、{{HTMLElement("time")}}、{{HTMLElement("ul")}}、{{HTMLElement("var")}}、{{HTMLElement("video")}}、{{HTMLElement("wbr")}} 還有文字。

- -

在滿足特定條件下，某些元素也屬這個類型：

- - - -

章節型內容（Sectioning content）

- -

屬於章節型內容模型的元素會在該大綱裡面創立章節，這個章節會定義{{HTMLElement("header")}}、{{HTMLElement("footer")}}、還有heading content的範圍。

- -

屬於這個類型的元素有{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("nav")}}還有{{HTMLElement("section")}}。

- -
-

注意：不要把這個內容模型，和把內容與常規大綱隔開的 sectioning root 類別搞混。

-
- -

標題型內容（Heading content）

- -

標題型內容定義了章節的標題，不論該章節由明確的章節型內容元素標記、抑或由標題本身隱式定義。

- -

屬於這個類型的元素有{{HTMLElement("h1")}}、{{HTMLElement("h2")}}、{{HTMLElement("h3")}}, {{HTMLElement("h4")}}、{{HTMLElement("h5")}}、{{HTMLElement("h6")}}還有{{HTMLElement("hgroup")}}.

- -
-

注意：儘管 {{HTMLElement("header")}} 可能含有某些標題型內容，但它本身並不是。

-
- -

段落型內容（Phrasing content）

- -

段落型內容定義了文字、還有它包含的標記。Runs of phrasing content make up paragraphs.

- -

屬於這個類型的元素有{{HTMLElement("abbr")}}、{{HTMLElement("audio")}}、{{HTMLElement("b")}}、{{HTMLElement("bdo")}}、{{HTMLElement("br")}}、{{HTMLElement("button")}}、{{HTMLElement("canvas")}}、{{HTMLElement("cite")}}、{{HTMLElement("code")}}、{{Deprecated_Inline}}{{HTMLElement("command")}}、{{HTMLElement("datalist")}}、{{HTMLElement("dfn")}}、{{HTMLElement("em")}}、{{HTMLElement("embed")}}、{{HTMLElement("i")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{HTMLElement("input")}}、{{HTMLElement("kbd")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("mark")}}、{{MathMLElement("math")}}、{{HTMLElement("meter")}}、{{HTMLElement("noscript")}}、{{HTMLElement("object")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("q")}}、{{HTMLElement("ruby")}}、{{HTMLElement("samp")}}、{{HTMLElement("script")}}、{{HTMLElement("select")}}、{{HTMLElement("small")}}、{{HTMLElement("span")}}、{{HTMLElement("strong")}}、{{HTMLElement("sub")}}、{{HTMLElement("sup")}}、{{SVGElement("svg")}}、{{HTMLElement("textarea")}}、{{HTMLElement("time")}}、{{HTMLElement("var")}}、{{HTMLElement("video")}}、{{HTMLElement("wbr")}}以及空白字符在內的純文本。

- -

在滿足特定條件下，某些元素也屬這個類型：

- - - -

嵌入型內容（Embedded content）

- -

嵌入型內容從其他標記語言或文件命名空間，導入資源或插入內容。 屬於這個類型的元素有{{HTMLElement("audio")}}、{{HTMLElement("canvas")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{MathMLElement("math")}}、{{HTMLElement("object")}}、{{SVGElement("svg")}}、{{HTMLElement("video")}}。

- -

互動型內容（Interactive content）

- -

互動型內容包含專為用戶互動設計的元素。屬於這個類型的元素有 {{HTMLElement("a")}}、{{HTMLElement("button")}}、{{HTMLElement("details")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("select")}} 還有 {{HTMLElement("textarea")}}。

- -

在滿足特定條件下，某些元素也屬這個類型：

- - - -

捫及內容（Palpable content）

- -

不是空白或隱藏的內容稱為捫及。屬於流內容或是Phrasing content模型的元素最少要有一個捫及的節點。

- -

表單相關內容（Form-associated content）

- -

表單相關內容包含了由 form 屬性顯露的 form owner 元素。form owner 是本身包含於 {{HTMLElement("form")}}、或 id 由 form 屬性指定的元素。

- - - -

本類型包含某些子類別:

- -
-
listed
-
Elements that are listed in the form.elements and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
-
labelable
-
與元素 {{HTMLElement("label")}} 相關的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("meter")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。
-
submittable
-
用在建構送出時，資料就設定好的表單元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("object")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。
-
resettable
-
當表單重設時會受影響的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("output")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。
-
- -

透明內容模型（Transparent content model）

- -

如果一個元素是透明內容模型，then its contents must be structured such that they would be valid HTML 5，就算該透明元素被移除、並由子元素取代。

- -

例如，{{HTMLElement("del")}} 與 {{HTMLELement("ins")}} 元素都是透明的：

- -
<p>我們認為下面這些真理是<del><em>神聖不可否認</em></del><ins>不言而喻的。</ins></p>
-
- -

這果這些元素被刪掉的話，這個分段依然在 HTML 有效（if not correct English）

- -
<p>我們認為下面這些真理是<em>神聖不可否認</em>不言而喻的。</p>
-
- - -

其他內容模型

- -

章節根（Sectioning root）

diff --git a/files/zh-tw/web/guide/html/content_categories/index.md b/files/zh-tw/web/guide/html/content_categories/index.md new file mode 100644 index 00000000000000..a16b3308cc5341 --- /dev/null +++ b/files/zh-tw/web/guide/html/content_categories/index.md @@ -0,0 +1,133 @@ +--- +title: 內容類型 +slug: Web/Guide/HTML/Content_categories +translation_of: Web/Guide/HTML/Content_categories +--- +每個 HTML 元素都要遵從該元素可擁有何種內容規則，這些規則被歸為幾種常用的內容模型（content model）。每個 HTML 元素都屬於零個、一個、或數個內容的模型，所有元素內容的設置規則都要遵從 HTML 一致性文件。 + +內容類型有三種類型： + +- 主要內容類型（Main content categories）描述了許多元素共享的常見內容規則（content rule）。 +- 表單相關內容類型（Form-related content categories）描述了表單相關元素的內容規則。 +- 特別內容類型（Specific content categories） 描述了只有少數元素共享的內容規則，有時甚至只有特定上下文。 + +![Content_categories_venn.png](content_categories_venn.png) + +## 主要內容類型 + +### 資訊元內容（Metadata content） + +屬於*元資訊內容*類型的元素修飾該文件其餘部分的陳述或行為、與其他文件建立連結、或是傳達其他*外來*（out of band）訊息。 + +屬於這個類型的元素有 {{HTMLElement("base")}}、{{Deprecated_Inline}}{{HTMLElement("command")}}、{{HTMLElement("link")}}、{{HTMLElement("meta")}}、{{HTMLElement("noscript")}}、{{HTMLElement("script")}}、{{HTMLElement("style")}} 與 {{HTMLElement("title")}} + +### 流內容（Flow content） + +屬於流內容的元素通常含有文字或嵌入內容。它們是：{{HTMLElement("a")}}、{{HTMLElement("abbr")}}、{{HTMLElement("address")}}、{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("audio")}}、{{HTMLElement("b")}},{{HTMLElement("bdo")}}、{{HTMLElement("bdi")}}、{{HTMLElement("blockquote")}}、{{HTMLElement("br")}}、{{HTMLElement("button")}}、{{HTMLElement("canvas")}}、{{HTMLElement("cite")}}、{{HTMLElement("code")}}、{{Deprecated_Inline}}{{HTMLElement("command")}}、{{HTMLElement("data")}}、{{HTMLElement("datalist")}}、{{HTMLElement("del")}}、{{HTMLElement("details")}}、{{HTMLElement("dfn")}}、{{HTMLElement("div")}}、{{HTMLElement("dl")}}、{{HTMLElement("em")}}、{{HTMLElement("embed")}}、{{HTMLElement("fieldset")}}、{{HTMLElement("figure")}}、{{HTMLElement("footer")}}、{{HTMLElement("form")}}、{{HTMLElement("h1")}}、{{HTMLElement("h2")}}、{{HTMLElement("h3")}}、{{HTMLElement("h4")}}、{{HTMLElement("h5")}}、{{HTMLElement("h6")}}、{{HTMLElement("header")}}、{{HTMLElement("hgroup")}}、{{HTMLElement("hr")}}、{{HTMLElement("i")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{HTMLElement("input")}}、{{HTMLElement("ins")}}、{{HTMLElement("kbd")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("main")}}、{{HTMLElement("map")}}、{{HTMLElement("mark")}}、{{MathMLElement("math")}}、{{HTMLElement("menu")}}、{{HTMLElement("meter")}}、{{HTMLElement("nav")}}、{{HTMLElement("noscript")}}、{{HTMLElement("object")}}、{{HTMLElement("ol")}}、{{HTMLElement("output")}}、{{HTMLElement("p")}}、{{HTMLElement("pre")}}、{{HTMLElement("progress")}}、{{HTMLElement("q")}}、{{HTMLElement("ruby")}}、{{HTMLElement("s")}}、{{HTMLElement("samp")}}、{{HTMLElement("script")}}、{{HTMLElement("section")}}、{{HTMLElement("select")}}、{{HTMLElement("small")}}、{{HTMLElement("span")}}、{{HTMLElement("strong")}}、{{HTMLElement("sub")}}、{{HTMLElement("sup")}}、{{SVGElement("svg")}}、{{HTMLElement("table")}}、{{HTMLElement("template")}}、{{HTMLElement("textarea")}}、{{HTMLElement("time")}}、{{HTMLElement("ul")}}、{{HTMLElement("var")}}、{{HTMLElement("video")}}、{{HTMLElement("wbr")}} 還有文字。 + +在滿足特定條件下，某些元素也屬這個類型： + +- {{HTMLElement("area")}}，如果它是 {{HTMLElement("map")}} 元素的後代。 +- {{HTMLElement("link")}}，如果[**itemprop**](/zh-TW/docs/HTML/Global_attributes#attr-itemprop) 屬性存在。 +- {{HTMLElement("meta")}}，如果[**itemprop**](/zh-TW/docs/HTML/Global_attributes#attr-itemprop) 屬性存在。 +- {{HTMLElement("style")}}，如果 {{htmlattrxref("scoped","style")}} 屬性存在。 + +### 章節型內容（Sectioning content） + +屬於章節型內容模型的元素會[在該大綱裡面創立章節](/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document)，這個章節會定義{{HTMLElement("header")}}、{{HTMLElement("footer")}}、還有[heading content](#Heading_content)的範圍。 + +屬於這個類型的元素有{{HTMLElement("article")}}、{{HTMLElement("aside")}}、{{HTMLElement("nav")}}還有{{HTMLElement("section")}}。 + +> **備註：** 不要把這個內容模型，和把內容與常規大綱隔開的 [sectioning root](/zh-TW/docs/Sections_and_Outlines_of_an_HTML5_document#sectioning_root) 類別搞混。 + +### 標題型內容（Heading content） + +標題型內容定義了章節的標題，不論該章節由明確的[章節型內容](#Sectioning_content)元素標記、抑或由標題本身隱式定義。 + +屬於這個類型的元素有{{HTMLElement("h1")}}、{{HTMLElement("h2")}}、{{HTMLElement("h3")}}, {{HTMLElement("h4")}}、{{HTMLElement("h5")}}、{{HTMLElement("h6")}}還有{{HTMLElement("hgroup")}}. + +> **備註：** 儘管 {{HTMLElement("header")}} 可能含有某些標題型內容，但它本身並不是。 + +### 段落型內容（Phrasing content） + +段落型內容定義了文字、還有它包含的標記。Runs of phrasing content make up paragraphs. + +屬於這個類型的元素有{{HTMLElement("abbr")}}、{{HTMLElement("audio")}}、{{HTMLElement("b")}}、{{HTMLElement("bdo")}}、{{HTMLElement("br")}}、{{HTMLElement("button")}}、{{HTMLElement("canvas")}}、{{HTMLElement("cite")}}、{{HTMLElement("code")}}、{{Deprecated_Inline}}{{HTMLElement("command")}}、{{HTMLElement("datalist")}}、{{HTMLElement("dfn")}}、{{HTMLElement("em")}}、{{HTMLElement("embed")}}、{{HTMLElement("i")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{HTMLElement("input")}}、{{HTMLElement("kbd")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("mark")}}、{{MathMLElement("math")}}、{{HTMLElement("meter")}}、{{HTMLElement("noscript")}}、{{HTMLElement("object")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("q")}}、{{HTMLElement("ruby")}}、{{HTMLElement("samp")}}、{{HTMLElement("script")}}、{{HTMLElement("select")}}、{{HTMLElement("small")}}、{{HTMLElement("span")}}、{{HTMLElement("strong")}}、{{HTMLElement("sub")}}、{{HTMLElement("sup")}}、{{SVGElement("svg")}}、{{HTMLElement("textarea")}}、{{HTMLElement("time")}}、{{HTMLElement("var")}}、{{HTMLElement("video")}}、{{HTMLElement("wbr")}}以及空白字符在內的純文本。 + +在滿足特定條件下，某些元素也屬這個類型： + +- {{HTMLElement("a")}}，如果它只包含段落型內容。 +- {{HTMLElement("area")}}，如果它是 {{HTMLElement("map")}} 元素的後代。 +- {{HTMLElement("del")}}，如果它只包含段落型內容。 +- {{HTMLElement("ins")}}, 如果它只包含段落型內容。 +- {{HTMLElement("link")}}, 如果 [**itemprop**](/zh-TW/docs/HTML/Global_attributes#itemprop) 屬性存在。 +- {{HTMLElement("map")}}, 如果它只包含段落型內容。 +- {{HTMLElement("meta")}}, 如果 [**itemprop**](/zh-TW/docs/HTML/Global_attributes#itemprop) 屬性存在。 + +### 嵌入型內容（Embedded content） + +嵌入型內容從其他標記語言或文件命名空間，導入資源或插入內容。 屬於這個類型的元素有{{HTMLElement("audio")}}、{{HTMLElement("canvas")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{HTMLElement("img")}}、{{MathMLElement("math")}}、{{HTMLElement("object")}}、{{SVGElement("svg")}}、{{HTMLElement("video")}}。 + +### 互動型內容（Interactive content） + +互動型內容包含專為用戶互動設計的元素。屬於這個類型的元素有 {{HTMLElement("a")}}、{{HTMLElement("button")}}、{{HTMLElement("details")}}、{{HTMLElement("embed")}}、{{HTMLElement("iframe")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("label")}}、{{HTMLElement("select")}} 還有 {{HTMLElement("textarea")}}。 + +在滿足特定條件下，某些元素也屬這個類型： + +- {{HTMLElement("audio")}}，如果 {{htmlattrxref("controls", "audio")}} 元素存在。 +- {{HTMLElement("img")}}，如果 {{htmlattrxref("usemap", "img")}} 元素存在。 +- {{HTMLElement("input")}}，如果 {{htmlattrxref("type", "input")}} 元素不是隱藏狀態。 +- {{HTMLElement("menu")}}，如果 {{htmlattrxref("type", "menu")}} 元素處於 toolbar 狀態。 +- {{HTMLElement("object")}}，如果 {{htmlattrxref("usemap", "object")}} 元素存在。 +- {{HTMLElement("video")}}，如果 {{htmlattrxref("controls", "video")}} 元素存在。 + +### 捫及內容（Palpable content） + +不是空白或隱藏的內容稱為捫及。屬於流內容或是 Phrasing content 模型的元素最少要有一個捫及的節點。 + +### 表單相關內容（Form-associated content） + +表單相關內容包含了由 **form** 屬性顯露的 form owner 元素。form owner 是本身包含於 {{HTMLElement("form")}}、或 id 由 **form** 屬性指定的元素。 + +- {{HTMLElement("button")}} +- {{HTMLElement("fieldset")}} +- {{HTMLElement("input")}} +- {{deprecated_inline()}}{{HTMLElement("keygen")}} +- {{HTMLElement("label")}} +- {{HTMLElement("meter")}} +- {{HTMLElement("object")}} +- {{HTMLElement("output")}} +- {{HTMLElement("progress")}} +- {{HTMLElement("select")}} +- {{HTMLElement("textarea")}} + +本類型包含某些子類別: + +- listed + - : Elements that are listed in the [form.elements](/zh-TW/docs/DOM/form.elements) and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{deprecated_inline()}}{{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}. +- labelable + - : 與元素 {{HTMLElement("label")}} 相關的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("meter")}}、{{HTMLElement("output")}}、{{HTMLElement("progress")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。 +- submittable + - : 用在建構送出時，資料就設定好的表單元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("object")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。 +- resettable + - : 當表單重設時會受影響的元素。包含 {{HTMLElement("button")}}、{{HTMLElement("input")}}、{{deprecated_inline()}}{{HTMLElement("keygen")}}、{{HTMLElement("output")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}}。 + +## 透明內容模型（Transparent content model） + +如果一個元素是透明內容模型，then its contents must be structured such that they would be valid HTML 5，就算該透明元素被移除、並由子元素取代。 + +例如，{{HTMLElement("del")}} 與 {{HTMLELement("ins")}} 元素都是透明的： + +```plain +

我們認為下面這些真理是神聖不可否認不言而喻的。

+``` + +這果這些元素被刪掉的話，這個分段依然在 HTML 有效（if not correct English） + +```plain +

我們認為下面這些真理是神聖不可否認不言而喻的。

+``` + +## 其他內容模型 + +章節根（Sectioning root） diff --git a/files/zh-tw/web/guide/index.html b/files/zh-tw/web/guide/index.html deleted file mode 100644 index 2b46129d510fde..00000000000000 --- a/files/zh-tw/web/guide/index.html +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: Web 開發者指引 -slug: Web/Guide -tags: - - Guide - - Landing - - NeedsTranslation - - TopicStub - - Web -translation_of: Web/Guide ---- -

這些文章提供了如何幫助你使用特定技術和 APIs 的資訊。

- -
-

注意: 很抱歉。這個頁面在我們完成內容遷移之前會很混亂。

-
- -
{{LandingPageListSubpages}}
- -
-
JavaScript
-
JavaScript 是用來創造網頁應用程式的腳本化語言.
-
- -

參見

- - diff --git a/files/zh-tw/web/guide/index.md b/files/zh-tw/web/guide/index.md new file mode 100644 index 00000000000000..d2651c1f147fc7 --- /dev/null +++ b/files/zh-tw/web/guide/index.md @@ -0,0 +1,23 @@ +--- +title: Web 開發者指引 +slug: Web/Guide +tags: + - Guide + - Landing + - NeedsTranslation + - TopicStub + - Web +translation_of: Web/Guide +--- +這些文章提供了如何幫助你使用特定技術和 APIs 的資訊。 + +> **備註：** 很抱歉。這個頁面在我們完成內容遷移之前會很混亂。 + +{{LandingPageListSubpages}} + +- [JavaScript](/zh-TW/docs/JavaScript) + - : JavaScript 是用來創造網頁應用程式的腳本化語言. + +## 參見 + +- [Web Developer Reference](/zh-TW/docs/Web/Reference) diff --git a/files/zh-tw/web/guide/introduction_to_web_development/index.html b/files/zh-tw/web/guide/introduction_to_web_development/index.html deleted file mode 100644 index 68b8af6167071e..00000000000000 --- a/files/zh-tw/web/guide/introduction_to_web_development/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Web開發入門 -slug: Web/Guide/Introduction_to_Web_development -translation_of: Web/Guide/Introduction_to_Web_development ---- -

不論你是否是剛入門的 Web 開發者，或者只是為了拓寬視野而進入全新的 Web 領域，這裡的連結應該幫得上你。至少，我們在此有很多的連結。

-
附註: 本頁明顯還是個片斷，我們需要在此產生一些內容。
- -

文件主題

在此我們還沒有任何文章，但很需要。

資源

-
W3Schools（簡體中文版）
免費的 Web 開發教學，從提供給初學者的 HTML，到高級的 Web 技術。
-
diff --git a/files/zh-tw/web/guide/introduction_to_web_development/index.md b/files/zh-tw/web/guide/introduction_to_web_development/index.md new file mode 100644 index 00000000000000..6f18b58287d5e8 --- /dev/null +++ b/files/zh-tw/web/guide/introduction_to_web_development/index.md @@ -0,0 +1,17 @@ +--- +title: Web開發入門 +slug: Web/Guide/Introduction_to_Web_development +translation_of: Web/Guide/Introduction_to_Web_development +--- +不論你是否是剛入門的 Web 開發者，或者只是為了拓寬視野而進入全新的 Web 領域，這裡的連結應該幫得上你。至少，我們在此有很多的連結。 + +> **備註：** 本頁明顯還是個片斷，我們需要在此產生一些內容。 + +## 文件主題 + +在此我們還沒有任何文章，但很需要。 + +## 資源 + +- [W3Schools](http://www.w3schools.com/)（[簡體中文版](http://www.w3school.com.cn/)） + - : 免費的 Web 開發教學，從提供給初學者的 HTML，到高級的 Web 技術。 diff --git a/files/zh-tw/web/html/attributes/index.html b/files/zh-tw/web/html/attributes/index.html deleted file mode 100644 index 916a2c273a3637..00000000000000 --- a/files/zh-tw/web/html/attributes/index.html +++ /dev/null @@ -1,643 +0,0 @@ ---- -title: HTML attribute reference -slug: Web/HTML/Attributes -translation_of: Web/HTML/Attributes ---- -

HTML 中的元素具有屬性 ; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。

- -

屬性列表

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
屬性名稱元素描述
hiddenGlobal attribute避免呈現給定的元素，並且保持子元素，例如 script elements、active。
high{{ HTMLElement("meter") }}指示下界的上限範圍。
href{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }}連結資源的 URL。
hreflang{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}指定連結資源的語言。
http-equiv{{ HTMLElement("meta") }}
icon{{ HTMLElement("command") }}指定呈現指令的圖片。
idGlobal attribute經常和 CSS 一起被用來設計特定元素。這個屬性的值必須是唯一的。
ismap{{ HTMLElement("img") }}指示該圖像是伺服器端之影像地圖的一部分。
itempropGlobal attribute
keytype{{ HTMLElement("keygen") }}指定所生成密鑰的類型。
kind{{ HTMLElement("track") }}指明文章 track 的類型。
label{{ HTMLElement("track") }}指明文章 track 的使用者可讀之標題。
langGlobal attribute定義該元素中所使用的語言。
language{{ HTMLElement("script") }}定義該元素中所使用的腳本語言。
list{{ HTMLElement("input") }}指示一串預先定義的選項供使用者參考。
loop{{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }}指示當媒體完成時，是否應該從一開始的時候播放。
low{{ HTMLElement("meter") }}指示上界的下限範圍。
manifest{{ HTMLElement("html") }}指定文件中緩存清單的 URL。
max{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}指示所允許的最大值。
maxlength{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}定義該元素中所允許的最大字元數目。
media{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}指定一些連接資源已經被設計的媒體。
method{{ HTMLElement("form") }}定義當呈交該格式時，哪個 HTTP 方法要被使用。可以用 GET（預設）或是 POST。
min{{ HTMLElement("input") }}, {{ HTMLElement("meter") }}指示所允許的最小值。
multiple{{ HTMLElement("input") }}, {{ HTMLElement("select") }}指示多個值是否可以進入單一輸入的 email 或是 file 之類別。
name{{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }} -

元素的名字。例如被伺服器所使用時，來識別格式提交的現場。

-
novalidate{{ HTMLElement("form") }}該屬性指示當本格式被提交時，並無法通過驗證。
open{{ HTMLElement("details") }}指示是否細節顯示於加載頁面上。
optimum{{ HTMLElement("meter") }}指示最佳化數值。
pattern{{ HTMLElement("input") }}定義一個元素值將被驗證的正規表達式。
ping{{ HTMLElement("a") }}, {{ HTMLElement("area") }}
placeholder{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}提示使用者什麼可以被輸入進該區。
poster{{ HTMLElement("video") }} -

顯現一個指示 poster frame 的 URL，直到使用者撥放或是搜索。

-
preload{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}指示是否整個資源、一部分的資源、或是沒有資源應該被預先裝載。
pubdate{{ HTMLElement("time") }}指示該日期和時間，是否和距離最近的 {{ HTMLElement("article") }} 舊元素的日期一樣。
radiogroup{{ HTMLElement("command") }}
readonly{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}指示是否該元素可以被編輯。
rel{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}指定目標物件和連結物驗的關係。
required{{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}指示該元素是否被要求填寫。
reversed{{ HTMLElement("ol") }}指示該目錄是否應以降序展出而不是升序。
rows{{ HTMLElement("textarea") }}定義 textarea 的行數。
rowspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}定義表格單元的行數應該被 span over。
sandbox{{ HTMLElement("iframe") }}
spellcheckGlobal attribute指示為該元素的拼字檢查是否允許。
scope{{ HTMLElement("th") }}
scoped{{ HTMLElement("style") }}
seamless{{ HTMLElement("iframe") }}
selected{{ HTMLElement("option") }}定義一個值將被選擇到上載頁面中。
shape{{ HTMLElement("a") }}, {{ HTMLElement("area") }}
size{{ HTMLElement("input") }}, {{ HTMLElement("select") }}定義元素的寬度 (以 pixel 為單位) 。如果該元素之類型的屬性是文本或是密碼，那麼它就是字元的數目。
sizes{{ HTMLElement("link") }}
span{{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}
src{{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }}可嵌入內容的網址。
srcdoc{{ HTMLElement("iframe") }}
srclang{{ HTMLElement("track") }}
srcset{{ HTMLElement("img") }}
start{{ HTMLElement("ol") }}如果第一個數字不是 1 的話，則定義該數。
step{{ HTMLElement("input") }}
styleGlobal attribute定義多載先前的樣式設定之 CSS 樣式。
summary{{ HTMLElement("table") }}
tabindexGlobal attribute多載瀏覽器的預設頁面標籤之順序並且遵守指定的那個。
target{{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }}
titleGlobal attribute當滑鼠標停在元素時，文本會顯示在工具提示中。
type{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }}定義元素的類型。
usemap{{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}
value{{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }}定義將顯示在加載頁面上元素的預設值。
width{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("width") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }} ，寬度必須用該屬性來指定。
wrap{{ HTMLElement("textarea") }}指定文章是否要被掩飾。
border{{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} -

邊界寬度。

- -

注意 : 這是一個傳統的屬性。請利用 CSS {{ Cssxref("border") }} 特性。

-
buffered{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}包含被緩衝之媒體的時間範圍。
challenge{{ HTMLElement("keygen") }}隨著公共密鑰提交的挑戰字串。
charset{{ HTMLElement("meta") }}, {{ HTMLElement("script") }}聲明頁面或腳本的字元編碼。
checked{{ HTMLElement("command") }}, {{ HTMLElement("input") }}指定在加載頁面上的元素是否要被檢查。
cite{{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }}包含一個 URL，用來指出引用或是改變的來源地址。
classGlobal attribute經常使用共同屬性和 CSS 一起設計元素。
code{{ HTMLElement("applet") }}指明被加載與執行的 applet 類別文件之 URL。
codebase{{ HTMLElement("applet") }}This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored.
color{{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} -

該屬性使用命名顏色或十六進制 #RRGGBB 格式來設置文本顏色。

- -

注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("color") }} 特性。

-
cols{{ HTMLElement("textarea") }}定義在一個 textarea 中有多少欄位。
colspan{{ HTMLElement("td") }}, {{ HTMLElement("th") }}colspan 屬性定義一個單元格之欄位的數量。
content{{ HTMLElement("meta") }}一個有關於 http-equiv 或是根據上下文 name 的值 。
contenteditableGlobal attribute指定元素的內容是否可以被編輯。
contextmenuGlobal attribute定義將作為元素上下文選項單的 {{ HTMLElement("menu") }} 元素之 ID。
controls{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}指定瀏覽器是否應該顯示錄放控制給使用者。
coords{{ HTMLElement("area") }}一組值指明熱點區域的座標。
-

data

- 		-

{{ HTMLElement("object") }}

- 		-

指明 URL 的資源。

-
-

data-*

- 		-

Global attribute

- 		-

讓您可以將自行定義屬性附加在 HTML 元素上。

-
datetime{{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }}指定元素所相關的日期與時間。
default{{ HTMLElement("track") }}指定 track 應被啟用，除非使用者的偏好表示不同。
defer{{ HTMLElement("script") }}指定該頁面被瀏覽完後腳本應被執行。
dirGlobal attribute定義文章的方向。被允許的值有 ltr (Left-To-Right) 或 rtl (Right-To-Left)。
dirname{{ HTMLElement("input") }}, {{ HTMLElement("textarea") }}
disabled{{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}指名使用者是否可以與元素互動。
download{{ HTMLElement("a") }}, {{ HTMLElement("area") }} -

指定該超連結是用於下載的資源。

-
draggableGlobal attribute定義元素是否可以拖曳。
dropzoneGlobal attribute指定該元素接受它內容的滑鼠落下物。
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") }} -

指定元素之所有者的格式。

-
formaction{{ HTMLElement("input") }}, {{ HTMLElement("button") }}指定元素的作用，多載的動作被定義在 {{ HTMLElement("form") }}。
headers{{ HTMLElement("td") }}, {{ HTMLElement("th") }}對適用於該元素的 <th> 元素之 ID。
height{{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }}注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("height") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }}，高度必須用該屬性來指定。
accept{{ HTMLElement("form") }}, {{ HTMLElement("input") }}伺服器接受的類型之列表，通常是文件類型。
accept-charset{{ HTMLElement("form") }}支持字元集的列表。
accesskeyGlobal attribute定義鍵盤快捷鍵來啟動或添加焦點到該元素。
action{{ HTMLElement("form") }}一個程序處理經由該格式提交信息的 URI。
align{{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }}指定元素的水平對齊方式。
alt -

{{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}

- 		在圖像無法顯示的情況下，顯示代替文本。
async{{ HTMLElement("script") }}指定該腳本應該被不同步得執行。
autocomplete{{ HTMLElement("form") }}, {{ HTMLElement("input") }}指定是否以該格式控制，可以在默認情況下由瀏覽器自動完成其值。
autofocus{{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}該元素應該在頁面加載後自動焦距。
autoplay{{ HTMLElement("audio") }}, {{ HTMLElement("video") }}音頻或視頻應該越早撥放越好。
autosave{{ HTMLElement("input") }}上一個值應該持續存在到跨頁面加載的可選值之下拉列表中。
bgcolor{{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} -

元素的背景顏色。

- -

注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("background-color") }} 特性。

-
- -

內容與IDL屬性

- -

在 HTML 中，大部分的屬性有兩種面向 : 內容屬性與 IDL 屬性。

- -

內容屬性是您可以從內容中設定的屬性 (HTML 程式碼) 而且您可以藉由 {{domxref("element.setAttribute()")}} 或是 {{domxref("element.getAttribute()")}} 來設定它或得到它。內容屬性永遠都是字串，即便我們所期望的值是一個整數。舉例來說，假設今天要用內容屬性去設定一個 {{HTMLElement("input")}} 元素的最大長度是42，您必須在該元素上呼叫 setAttribute("maxlength", "42")。

- -

IDL 屬性也被稱為 JavaScript 特性。您可以使用 JavaScript 特性的 element.foo 以閱讀或是設定這些屬性。當您要得到 IDL 屬性時，它總是要使用 (但可能改變) 基本的內容屬性以返回值，而當您要設定 IDL 屬性時，它需要儲存資料在內容屬性中。換句話說，IDL 屬性在本質上反映了內容屬性。

- -

在大部分的時間中，當 IDL 屬性真正被使用時，將會返回它們的值。舉例而言，{{HTMLElement("input")}} 元素的預設型態是 "text"，所以如果您設定 input.type="foobar"，<input> 元素一樣是 text 的型態 (在外觀和行為上而言)，但是 "type" 內容屬性的值將會變成 "foobar"。然而，IDL 屬性的型態將會回傳 "text" 字串。

- -

IDL 屬性並非永遠的字串 ; 舉例來說，input.maxlength 便是一個數字(型態為 signed long)。當使用 IDL 屬性，您會閱讀或是設定所需的型態，而當您設定 input.maxlength 時，它總是回傳一個數字，因為它正需要一個數字。如果您傳入別的型態，它會依照標準 JavaScript 型態轉換規則，將傳入值轉成一個數字。

- -

IDL 屬性可以 反應其他型態，例如 unsigned long、URLs、booleans，等等。不幸的是，並沒有明確的規則來規範，而且與 IDL 屬性行為相對應的內容屬性連結中，也沒有取決於該屬性的方式。在大部分的時間裡，它會遵守 規範中所制定的規則，但有時候它並不會。HTML 規範嘗試讓它變得容易使用，但由於各種原因 (大多是因為歷史)，有些屬性表現得很奇怪 (舉例來說，select.size)，而您應該詳細閱讀規範以了解各個屬性的行為。

- -

另請參見

- - diff --git a/files/zh-tw/web/html/attributes/index.md b/files/zh-tw/web/html/attributes/index.md new file mode 100644 index 00000000000000..b3bd3aebc2f8cc --- /dev/null +++ b/files/zh-tw/web/html/attributes/index.md @@ -0,0 +1,142 @@ +--- +title: HTML attribute reference +slug: Web/HTML/Attributes +translation_of: Web/HTML/Attributes +--- +HTML 中的元素具有**屬性** ; 而這些屬性可以藉由各種方式去設定元素或調整它們的行為，以符合使用者的期待。 + +## 屬性列表 + +| 屬性名稱 | 元素 | 描述 | +| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| `hidden` | [Global attribute](/en/HTML/Global_attributes) | 避免呈現給定的元素，並且保持子元素，例如 script elements、active。 | +| `high` | {{ HTMLElement("meter") }} | 指示下界的上限範圍。 | +| `href` | {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("link") }} | 連結資源的 URL。 | +| `hreflang` | {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} | 指定連結資源的語言。 | +| `http-equiv` | {{ HTMLElement("meta") }} | | +| `icon` | {{ HTMLElement("command") }} | 指定呈現指令的圖片。 | +| `id` | [Global attribute](/en/HTML/Global_attributes) | 經常和 CSS 一起被用來設計特定元素。這個屬性的值必須是唯一的。 | +| `ismap` | {{ HTMLElement("img") }} | 指示該圖像是伺服器端之影像地圖的一部分。 | +| `itemprop` | [Global attribute](/en/HTML/Global_attributes) | | +| `keytype` | {{ HTMLElement("keygen") }} | 指定所生成密鑰的類型。 | +| `kind` | {{ HTMLElement("track") }} | 指明文章 track 的類型。 | +| `label` | {{ HTMLElement("track") }} | 指明文章 track 的使用者可讀之標題。 | +| `lang` | [Global attribute](/en/HTML/Global_attributes) | 定義該元素中所使用的語言。 | +| `language` | {{ HTMLElement("script") }} | 定義該元素中所使用的腳本語言。 | +| `list` | {{ HTMLElement("input") }} | 指示一串預先定義的選項供使用者參考。 | +| `loop` | {{ HTMLElement("audio") }}, {{ HTMLElement("bgsound") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("video") }} | 指示當媒體完成時，是否應該從一開始的時候播放。 | +| `low` | {{ HTMLElement("meter") }} | 指示上界的下限範圍。 | +| `manifest` | {{ HTMLElement("html") }} | 指定文件中緩存清單的 URL。 | +| `max` | {{ HTMLElement("input") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }} | 指示所允許的最大值。 | +| `maxlength` | {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} | 定義該元素中所允許的最大字元數目。 | +| `media` | {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }} | 指定一些連接資源已經被設計的媒體。 | +| `method` | {{ HTMLElement("form") }} | 定義當呈交該格式時，哪個 HTTP 方法要被使用。可以用 GET（預設）或是 POST。 | +| `min` | {{ HTMLElement("input") }}, {{ HTMLElement("meter") }} | 指示所允許的最小值。 | +| `multiple` | {{ HTMLElement("input") }}, {{ HTMLElement("select") }} | 指示多個值是否可以進入單一輸入的 `email` 或是 `file` 之類別。 | +| `name` | {{ HTMLElement("button") }}, {{ HTMLElement("form") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("object") }}, {{ HTMLElement("output") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }}, {{ HTMLElement("map") }}, {{ HTMLElement("meta") }}, {{ HTMLElement("param") }} | 元素的名字。例如被伺服器所使用時，來識別格式提交的現場。 | +| `novalidate` | {{ HTMLElement("form") }} | 該屬性指示當本格式被提交時，並無法通過驗證。 | +| `open` | {{ HTMLElement("details") }} | 指示是否細節顯示於加載頁面上。 | +| `optimum` | {{ HTMLElement("meter") }} | 指示最佳化數值。 | +| `pattern` | {{ HTMLElement("input") }} | 定義一個元素值將被驗證的正規表達式。 | +| `ping` | {{ HTMLElement("a") }}, {{ HTMLElement("area") }} | | +| `placeholder` | {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} | 提示使用者什麼可以被輸入進該區。 | +| `poster` | {{ HTMLElement("video") }} | 顯現一個指示 poster frame 的 URL，直到使用者撥放或是搜索。 | +| `preload` | {{ HTMLElement("audio") }}, {{ HTMLElement("video") }} | 指示是否整個資源、一部分的資源、或是沒有資源應該被預先裝載。 | +| `pubdate` | {{ HTMLElement("time") }} | 指示該日期和時間，是否和距離最近的 {{ HTMLElement("article") }} 舊元素的日期一樣。 | +| `radiogroup` | {{ HTMLElement("command") }} | | +| `readonly` | {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} | 指示是否該元素可以被編輯。 | +| `rel` | {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("link") }} | 指定目標物件和連結物驗的關係。 | +| `required` | {{ HTMLElement("input") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} | 指示該元素是否被要求填寫。 | +| `reversed` | {{ HTMLElement("ol") }} | 指示該目錄是否應以降序展出而不是升序。 | +| `rows` | {{ HTMLElement("textarea") }} | 定義 textarea 的行數。 | +| `rowspan` | {{ HTMLElement("td") }}, {{ HTMLElement("th") }} | 定義表格單元的行數應該被 span over。 | +| `sandbox` | {{ HTMLElement("iframe") }} | | +| `spellcheck` | [Global attribute](/en/HTML/Global_attributes) | 指示為該元素的拼字檢查是否允許。 | +| `scope` | {{ HTMLElement("th") }} | | +| `scoped` | {{ HTMLElement("style") }} | | +| `seamless` | {{ HTMLElement("iframe") }} | | +| `selected` | {{ HTMLElement("option") }} | 定義一個值將被選擇到上載頁面中。 | +| `shape` | {{ HTMLElement("a") }}, {{ HTMLElement("area") }} | | +| `size` | {{ HTMLElement("input") }}, {{ HTMLElement("select") }} | 定義元素的寬度 (以 pixel 為單位) 。如果該元素之類型的屬性是文本或是密碼，那麼它就是字元的數目。 | +| `sizes` | {{ HTMLElement("link") }} | | +| `span` | {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }} | | +| `src` | {{ HTMLElement("audio") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("track") }}, {{ HTMLElement("video") }} | 可嵌入內容的網址。 | +| `srcdoc` | {{ HTMLElement("iframe") }} | | +| `srclang` | {{ HTMLElement("track") }} | | +| `srcset` | {{ HTMLElement("img") }} | | +| `start` | {{ HTMLElement("ol") }} | 如果第一個數字不是 1 的話，則定義該數。 | +| `step` | {{ HTMLElement("input") }} | | +| `style` | [Global attribute](/en/HTML/Global_attributes) | 定義多載先前的樣式設定之 CSS 樣式。 | +| `summary` | {{ HTMLElement("table") }} | | +| `tabindex` | [Global attribute](/en/HTML/Global_attributes) | 多載瀏覽器的預設頁面標籤之順序並且遵守指定的那個。 | +| `target` | {{ HTMLElement("a") }}, {{ HTMLElement("area") }}, {{ HTMLElement("base") }}, {{ HTMLElement("form") }} | | +| `title` | [Global attribute](/en/HTML/Global_attributes) | 當滑鼠標停在元素時，文本會顯示在工具提示中。 | +| `type` | {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("command") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("object") }}, {{ HTMLElement("script") }}, {{ HTMLElement("source") }}, {{ HTMLElement("style") }}, {{ HTMLElement("menu") }} | 定義元素的類型。 | +| `usemap` | {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }} | | +| `value` | {{ HTMLElement("button") }}, {{ HTMLElement("option") }}, {{ HTMLElement("input") }}, {{ HTMLElement("li") }}, {{ HTMLElement("meter") }}, {{ HTMLElement("progress") }}, {{ HTMLElement("param") }} | 定義將顯示在加載頁面上元素的預設值。 | +| `width` | {{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} | 注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("width") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }} ，寬度必須用該屬性來指定。 | +| `wrap` | {{ HTMLElement("textarea") }} | 指定文章是否要被掩飾。 | +| `border` | {{ HTMLElement("img") }}, {{ HTMLElement("object") }}, {{ HTMLElement("table") }} | 邊界寬度。注意 : 這是一個傳統的屬性。請利用 CSS {{ Cssxref("border") }} 特性。 | +| `buffered` | {{ HTMLElement("audio") }}, {{ HTMLElement("video") }} | 包含被緩衝之媒體的時間範圍。 | +| `challenge` | {{ HTMLElement("keygen") }} | 隨著公共密鑰提交的挑戰字串。 | +| `charset` | {{ HTMLElement("meta") }}, {{ HTMLElement("script") }} | 聲明頁面或腳本的字元編碼。 | +| `checked` | {{ HTMLElement("command") }}, {{ HTMLElement("input") }} | 指定在加載頁面上的元素是否要被檢查。 | +| `cite` | {{ HTMLElement("blockquote") }}, {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("q") }} | 包含一個 URL，用來指出引用或是改變的來源地址。 | +| `class` | [Global attribute](/en/HTML/Global_attributes) | 經常使用共同屬性和 CSS 一起設計元素。 | +| `code` | {{ HTMLElement("applet") }} | 指明被加載與執行的 applet 類別文件之 URL。 | +| `codebase` | {{ HTMLElement("applet") }} | This attribute gives the absolute or relative URL of the directory where applets' .class files referenced by the code attribute are stored. | +| `color` | {{ HTMLElement("basefont") }}, {{ HTMLElement("font") }}, {{ HTMLElement("hr") }} | 該屬性使用命名顏色或十六進制 #RRGGBB 格式來設置文本顏色。注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("color") }} 特性。 | +| `cols` | {{ HTMLElement("textarea") }} | 定義在一個 textarea 中有多少欄位。 | +| `colspan` | {{ HTMLElement("td") }}, {{ HTMLElement("th") }} | colspan 屬性定義一個單元格之欄位的數量。 | +| `content` | {{ HTMLElement("meta") }} | 一個有關於 `http-equiv` 或是根據上下文 `name` 的值 。 | +| `contenteditable` | [Global attribute](/en/HTML/Global_attributes) | 指定元素的內容是否可以被編輯。 | +| `contextmenu` | [Global attribute](/en/HTML/Global_attributes) | 定義將作為元素上下文選項單的 {{ HTMLElement("menu") }} 元素之 ID。 | +| `controls` | {{ HTMLElement("audio") }}, {{ HTMLElement("video") }} | 指定瀏覽器是否應該顯示錄放控制給使用者。 | +| `coords` | {{ HTMLElement("area") }} | 一組值指明熱點區域的座標。 | +| `data` | {{ HTMLElement("object") }} | 指明 URL 的資源。 | +| `data-*` | [Global attribute](/en/HTML/Global_attributes) | 讓您可以將自行定義屬性附加在 HTML 元素上。 | +| `datetime` | {{ HTMLElement("del") }}, {{ HTMLElement("ins") }}, {{ HTMLElement("time") }} | 指定元素所相關的日期與時間。 | +| `default` | {{ HTMLElement("track") }} | 指定 track 應被啟用，除非使用者的偏好表示不同。 | +| `defer` | {{ HTMLElement("script") }} | 指定該頁面被瀏覽完後腳本應被執行。 | +| `dir` | [Global attribute](/en/HTML/Global_attributes) | 定義文章的方向。被允許的值有 ltr (Left-To-Right) 或 rtl (Right-To-Left)。 | +| `dirname` | {{ HTMLElement("input") }}, {{ HTMLElement("textarea") }} | | +| `disabled` | {{ HTMLElement("button") }}, {{ HTMLElement("command") }}, {{ HTMLElement("fieldset") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("optgroup") }}, {{ HTMLElement("option") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} | 指名使用者是否可以與元素互動。 | +| `download` | {{ HTMLElement("a") }}, {{ HTMLElement("area") }} | 指定該超連結是用於下載的資源。 | +| `draggable` | [Global attribute](/en/HTML/Global_attributes) | 定義元素是否可以拖曳。 | +| `dropzone` | [Global attribute](/en/HTML/Global_attributes) | 指定該元素接受它內容的滑鼠落下物。 | +| `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") }} | 指定元素之所有者的格式。 | +| `formaction` | {{ HTMLElement("input") }}, {{ HTMLElement("button") }} | 指定元素的作用，多載的動作被定義在 {{ HTMLElement("form") }}。 | +| `headers` | {{ HTMLElement("td") }}, {{ HTMLElement("th") }} | 對適用於該元素的 元素之 ID。 | +| `height` | {{ HTMLElement("canvas") }}, {{ HTMLElement("embed") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }}, {{ HTMLElement("object") }}, {{ HTMLElement("video") }} | 注意 : 在有些情況中，例如 {{ HTMLElement("div") }}，這是傳統的屬性，而 CSS {{ Cssxref("height") }} 特性應當被使用。在其他的情況中，例如 {{ HTMLElement("canvas") }}，高度必須用該屬性來指定。 | +| `accept` | {{ HTMLElement("form") }}, {{ HTMLElement("input") }} | 伺服器接受的類型之列表，通常是文件類型。 | +| `accept-charset` | {{ HTMLElement("form") }} | 支持字元集的列表。 | +| `accesskey` | [Global attribute](/en/HTML/Global_attributes) | 定義鍵盤快捷鍵來啟動或添加焦點到該元素。 | +| `action` | {{ HTMLElement("form") }} | 一個程序處理經由該格式提交信息的 URI。 | +| `align` | {{ HTMLElement("applet") }}, {{ HTMLElement("caption") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("hr") }}, {{ HTMLElement("iframe") }}, {{ HTMLElement("img") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("td") }}, {{ HTMLElement("tfoot") }} , {{ HTMLElement("th") }}, {{ HTMLElement("thead") }}, {{ HTMLElement("tr") }} | 指定元素的水平對齊方式。 | +| `alt` | {{ HTMLElement("applet") }}, {{ HTMLElement("area") }}, {{ HTMLElement("img") }}, {{ HTMLElement("input") }} | 在圖像無法顯示的情況下，顯示代替文本。 | +| `async` | {{ HTMLElement("script") }} | 指定該腳本應該被不同步得執行。 | +| `autocomplete` | {{ HTMLElement("form") }}, {{ HTMLElement("input") }} | 指定是否以該格式控制，可以在默認情況下由瀏覽器自動完成其值。 | +| `autofocus` | {{ HTMLElement("button") }}, {{ HTMLElement("input") }}, {{ HTMLElement("keygen") }}, {{ HTMLElement("select") }}, {{ HTMLElement("textarea") }} | 該元素應該在頁面加載後自動焦距。 | +| `autoplay` | {{ HTMLElement("audio") }}, {{ HTMLElement("video") }} | 音頻或視頻應該越早撥放越好。 | +| `autosave` | {{ HTMLElement("input") }} | 上一個值應該持續存在到跨頁面加載的可選值之下拉列表中。 | +| `bgcolor` | {{ HTMLElement("body") }}, {{ HTMLElement("col") }}, {{ HTMLElement("colgroup") }}, {{ HTMLElement("marquee") }}, {{ HTMLElement("table") }}, {{ HTMLElement("tbody") }}, {{ HTMLElement("tfoot") }}, {{ HTMLElement("td") }}, {{ HTMLElement("th") }}, {{ HTMLElement("tr") }} | 元素的背景顏色。注意 : 這是一個傳統的屬性。請使用 CSS {{ Cssxref("background-color") }} 特性。 | + +## 內容與 IDL 屬性 + +在 HTML 中，大部分的屬性有兩種面向 : **內容屬性**與 **IDL 屬性**。 + +內容屬性是您可以從內容中設定的屬性 (HTML 程式碼) 而且您可以藉由 {{domxref("element.setAttribute()")}} 或是 {{domxref("element.getAttribute()")}} 來設定它或得到它。內容屬性永遠都是字串，即便我們所期望的值是一個整數。舉例來說，假設今天要用內容屬性去設定一個 {{HTMLElement("input")}} 元素的最大長度是 42，您必須在該元素上呼叫 setAttribute("maxlength", "42")。 + +IDL 屬性也被稱為 JavaScript 特性。您可以使用 JavaScript 特性的 element.foo 以閱讀或是設定這些屬性。當您要得到 IDL 屬性時，它總是要使用 (但可能改變) 基本的內容屬性以返回值，而當您要設定 IDL 屬性時，它需要儲存資料在內容屬性中。換句話說，IDL 屬性在本質上反映了內容屬性。 + +在大部分的時間中，當 IDL 屬性真正被使用時，將會返回它們的值。舉例而言，{{HTMLElement("input")}} 元素的預設型態是 "text"，所以如果您設定 input.type="foobar"，\ 元素一樣是 text 的型態 (在外觀和行為上而言)，但是 "type" 內容屬性的值將會變成 "foobar"。然而，IDL 屬性的型態將會回傳 "text" 字串。 + +IDL 屬性並非永遠的字串 ; 舉例來說，input.maxlength 便是一個數字(型態為 signed long)。當使用 IDL 屬性，您會閱讀或是設定所需的型態，而當您設定 input.maxlength 時，它總是回傳一個數字，因為它正需要一個數字。如果您傳入別的型態，它會依照標準 JavaScript 型態轉換規則，將傳入值轉成一個數字。 + +IDL 屬性可以 [反應其他型態](http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes)，例如 unsigned long、URLs、booleans，等等。不幸的是，並沒有明確的規則來規範，而且與 IDL 屬性行為相對應的內容屬性連結中，也沒有取決於該屬性的方式。在大部分的時間裡，它會遵守 [規範中所制定的規則](http://www.whatwg.org/specs/web-apps/current-work/multipage/urls.html#reflecting-content-attributes-in-idl-attributes)，但有時候它並不會。HTML 規範嘗試讓它變得容易使用，但由於各種原因 (大多是因為歷史)，有些屬性表現得很奇怪 (舉例來說，select.size)，而您應該詳細閱讀規範以了解各個屬性的行為。 + +## 另請參見 + +- [HTML 元素](/zh-TW/docs/HTML/Element) diff --git a/files/zh-tw/web/html/block-level_elements/index.html b/files/zh-tw/web/html/block-level_elements/index.html deleted file mode 100644 index 9fbfdd1ac0533c..00000000000000 --- a/files/zh-tw/web/html/block-level_elements/index.html +++ /dev/null @@ -1,113 +0,0 @@ ---- -title: 區塊級元素 -slug: Web/HTML/Block-level_elements -translation_of: Web/HTML/Block-level_elements ---- -

HTML (超文字標記語言, Hypertext Markup Language) 元素通常為 "區塊級" 元素或是 "行內" 元素。 一個區塊級元素會藉由建立"區塊"的動作, 完全佔滿其父元素(容器)的空間。本文將為您說明其意涵.

- -

瀏覽器預設以在元素前後換行的方式, 表現區塊級元素. 視覺上會呈現為一排縱向堆疊的方塊。

- -
-

區塊級元素必定以換行方式, 取得完整寬度的空間(向左右兩側儘可能地延伸出去)。

-
- -

以下範例將展示區塊級元素的影響:

- -

區塊級元素

- -

HTML

- -
<p>This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.</p>
- -

CSS

- -
p { background-color: #8ABB55; }
-
- -

{{ EmbedLiveSample('Block-level_Example') }}

- -

用法

- - - -

區塊級 vs. 行內元素

- -

There are a couple of key differences between block-level elements and inline elements:

- -
-
Formatting
-
By default, block-level elements begin on new lines, but inline elements can start anywhere in a line.
-
Content model
-
Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements.
-
- -

The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of content categories. The "block-level" category roughly corresponds to the category of flow content in HTML5, while "inline" corresponds to phrasing content, but there are additional categories.

- -

相關元素

- -

The following is a complete list of all HTML block level elements (although "block-level" is not technically defined for elements that are new in HTML5).

- -
-
{{ HTMLElement("address") }}
-
Contact information.
-
{{ HTMLElement("article") }}
-
Article content.
-
{{ HTMLElement("aside") }}
-
Aside content.
-
{{ HTMLElement("blockquote") }}
-
Long ("block") quotation.
-
{{ HTMLElement("dialog") }}
-
Dialog box.
-
{{ HTMLElement("dd") }}
-
Describes a term in a description list.
-
{{ HTMLElement("div") }}
-
Document division.
-
{{ HTMLElement("dl") }}
-
Description list.
-
{{ HTMLElement("dt") }}
-
Description list term.
-
{{ HTMLElement("fieldset") }}
-
Field set label.
-
{{ HTMLElement("figcaption") }}
-
Figure caption.
-
{{ HTMLElement("figure") }}
-
Groups media content with a caption (see {{ HTMLElement("figcaption") }}).
-
{{ HTMLElement("footer") }}
-
Section or page footer.
-
{{ HTMLElement("form") }}
-
Input form.
-
{{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }}
-
Heading levels 1-6.
-
{{ HTMLElement("header") }}
-
Section or page header.
-
{{ HTMLElement("hgroup") }}
-
Groups header information.
-
{{ HTMLElement("hr") }}
-
Horizontal rule (dividing line).
-
{{ HTMLElement("li") }}
-
List item.
-
{{ HTMLElement("main") }}
-
Contains the central content unique to this document.
-
{{ HTMLElement("nav") }}
-
Contains navigation links.
-
{{ HTMLElement("ol") }}
-
Ordered list.
-
{{ HTMLElement("p") }}
-
Paragraph.
-
{{ HTMLElement("pre") }}
-
Preformatted text.
-
{{ HTMLElement("section") }}
-
Section of a web page.
-
{{ HTMLElement("table") }}
-
Table.
-
{{ HTMLElement("ul") }}
-
Unordered list.
-
- -

參閱

- - diff --git a/files/zh-tw/web/html/block-level_elements/index.md b/files/zh-tw/web/html/block-level_elements/index.md new file mode 100644 index 00000000000000..41fb3fae643783 --- /dev/null +++ b/files/zh-tw/web/html/block-level_elements/index.md @@ -0,0 +1,106 @@ +--- +title: 區塊級元素 +slug: Web/HTML/Block-level_elements +translation_of: Web/HTML/Block-level_elements +--- +HTML (超文字標記語言, **Hypertext Markup Language**) 元素通常為 "區塊級" 元素或是 ["行內" 元素](/zh-TW/docs/HTML/Inline_elements)。 一個區塊級元素會藉由建立"區塊"的動作, 完全佔滿其父元素(容器)的空間。本文將為您說明其意涵. + +瀏覽器預設以在元素前後換行的方式, 表現區塊級元素. 視覺上會呈現為一排縱向堆疊的方塊。 + +> **備註：** 區塊級元素必定以換行方式, 取得完整寬度的空間(向左右兩側儘可能地延伸出去)。 + +以下範例將展示區塊級元素的影響: + +## 區塊級元素 + +### HTML + +```html +

This paragraph is a block-level element; its background has been colored to display the paragraph's parent element.

+``` + +### CSS + +```css +p { background-color: #8ABB55; } +``` + +{{ EmbedLiveSample('Block-level_Example') }} + +## 用法 + +- 區塊級元素只能出現於 {{ HTMLElement("body") }} 元素之內. + +## 區塊級 vs. 行內元素 + +There are a couple of key differences between block-level elements and inline elements: + +- Formatting + - : By default, block-level elements begin on new lines, but inline elements can start anywhere in a line. +- Content model + - : Generally, block-level elements may contain inline elements and other block-level elements. Inherent in this structural distinction is the idea that block elements create "larger" structures than inline elements. + +The distinction of block-level vs. inline elements is used in HTML specifications up to 4.01. In HTML5, this binary distinction is replaced with a more complex set of [content categories](/zh-TW/docs/HTML/Content_categories). The "block-level" category roughly corresponds to the category of [flow content](/zh-TW/docs/HTML/Content_categories#Flow_content) in HTML5, while "inline" corresponds to [phrasing content](/zh-TW/docs/HTML/Content_categories#Phrasing_content), but there are additional categories. + +## 相關元素 + +The following is a complete list of all HTML block level elements (although "block-level" is not technically defined for elements that are new in HTML5). + +- {{ HTMLElement("address") }} + - : Contact information. +- {{ HTMLElement("article") }} + - : Article content. +- {{ HTMLElement("aside") }} + - : Aside content. +- {{ HTMLElement("blockquote") }} + - : Long ("block") quotation. +- {{ HTMLElement("dialog") }} + - : Dialog box. +- {{ HTMLElement("dd") }} + - : Describes a term in a description list. +- {{ HTMLElement("div") }} + - : Document division. +- {{ HTMLElement("dl") }} + - : Description list. +- {{ HTMLElement("dt") }} + - : Description list term. +- {{ HTMLElement("fieldset") }} + - : Field set label. +- {{ HTMLElement("figcaption") }} + - : Figure caption. +- {{ HTMLElement("figure") }} + - : Groups media content with a caption (see {{ HTMLElement("figcaption") }}). +- {{ HTMLElement("footer") }} + - : Section or page footer. +- {{ HTMLElement("form") }} + - : Input form. +- {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, {{ HTMLElement("h3") }}, {{ HTMLElement("h4") }}, {{ HTMLElement("h5") }}, {{ HTMLElement("h6") }} + - : Heading levels 1-6. +- {{ HTMLElement("header") }} + - : Section or page header. +- {{ HTMLElement("hgroup") }} + - : Groups header information. +- {{ HTMLElement("hr") }} + - : Horizontal rule (dividing line). +- {{ HTMLElement("li") }} + - : List item. +- {{ HTMLElement("main") }} + - : Contains the central content unique to this document. +- {{ HTMLElement("nav") }} + - : Contains navigation links. +- {{ HTMLElement("ol") }} + - : Ordered list. +- {{ HTMLElement("p") }} + - : Paragraph. +- {{ HTMLElement("pre") }} + - : Preformatted text. +- {{ HTMLElement("section") }} + - : Section of a web page. +- {{ HTMLElement("table") }} + - : Table. +- {{ HTMLElement("ul") }} + - : Unordered list. + +### 參閱 + +- [行內元素](/zh-TW/docs/Web/HTML/Inline_elements) diff --git a/files/zh-tw/web/html/element/a/index.html b/files/zh-tw/web/html/element/a/index.html deleted file mode 100644 index 9c299eb2b10f79..00000000000000 --- a/files/zh-tw/web/html/element/a/index.html +++ /dev/null @@ -1,283 +0,0 @@ ---- -title: -slug: Web/HTML/Element/a -translation_of: Web/HTML/Element/a ---- -

HTML <a> 元素（意為 Anchor）建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
內容類型流型內容、phrasing content, interactive content, palpable content.
內容省略Transparent, containing either flow content (excluding interactive content) or phrasing content.
標籤省略{{no_tag_omission}}
允許的父元素任何允許 phrasing content 或 flow content 的內容，但 <a> 永遠例外（according to the logical principle of symmetry, if <a> tag, as a parent, can not have interactive content, then the same <a> content can not have <a> tag as its parent）
Permitted ARIA roles{{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}}
DOM 介面{{domxref("HTMLAnchorElement")}}
- -

屬性

- -

本元素包含全域屬性。

- -
-
{{htmlattrdef("download")}}
-
This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). There are no restrictions on allowed values, though / and \ are converted to underscores. Most file systems limit some punctuation in file names, and browsers will adjust the suggested name accordingly. -
Notes: -
    -
  • This attribute only works for same-origin URLs.
    • -
  • This attribute can be used with blob: URLs and data: URLs to download content generated by JavaScript, such as pictures created in an image-editor Web app.
    • -
  • If the HTTP header Content-Disposition: gives a different filename than this attribute, the HTTP header takes priority over this attribute.
    • -
  • If Content-Disposition: is set to inline, Firefox prioritizes Content-Disposition, like the filename case, while Chrome prioritizes the download attribute.
    • -
-
-
-
{{htmlattrdef("href")}}
-
Contains a URL or a URL fragment that the hyperlink points to.
-
A URL fragment is a name preceded by a hash mark (#), which specifies an internal target location (an ID of an HTML element) within the current document. URLs are not restricted to Web (HTTP)-based documents, but can use any protocol supported by the browser. For example, file:, ftp:, and mailto: work in most browsers.
-
This attribute may be omitted (as of HTML5) to create a placeholder link. A placeholder link resembles a traditional hyperlink, but does not lead anywhere. -
-

Note: You can use href="#top" or the empty fragment href="#" to link to the top of the current page. This behavior is specified by HTML5.

-
-
-
{{htmlattrdef("hreflang")}}
-
This attribute indicates the human language of the linked resource. It is purely advisory, with no built-in functionality. Allowed values are determined by BCP47.
-
{{htmlattrdef("ping")}}
-
Contains a space-separated list of URLs to which, when the hyperlink is followed, {{HTTPMethod("POST")}} requests with the body PING will be sent by the browser (in the background). Typically used for tracking.
-
{{htmlattrdef("referrerpolicy")}} {{experimental_inline}}
-
Indicates which referrer to send when fetching the URL: -
    -
  • 'no-referrer' means the Referer: header will not be sent.
    • -
  • 'no-referrer-when-downgrade' means no Referer: header will be sent when navigating to an origin without HTTPS. This is the default behavior.
    • -
  • 'origin' means the referrer will be the origin of the page, not including information after the domain.
    • -
  • 'origin-when-cross-origin' meaning that navigations to other origins will be limited to the scheme, the host and the port, while navigations on the same origin will include the referrer's path.
    • -
  • 'unsafe-url' means the referrer will include the origin and path, but not the fragment, password, or username. This is unsafe because it can leak data from secure URLs to insecure ones.
    • -
-
-
{{htmlattrdef("rel")}}
-
Specifies the relationship of the target object to the link object. The value is a space-separated list of link types.
-
{{htmlattrdef("target")}}
-
Specifies where to display the linked URL. It is a name of, or keyword for, a browsing context: a tab, window, or <iframe>. The following keywords have special meanings: -
    -
  • _self: Load the URL into the same browsing context as the current one. This is the default behavior.
    • -
  • _blank: Load the URL into a new browsing context. This is usually a tab, but users can configure browsers to use new windows instead.
    • -
  • _parent: Load the URL into the parent browsing context of the current one. If there is no parent, this behaves the same way as _self.
    • -
  • _top: Load the URL into the top-level browsing context (that is, the "highest" browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this behaves the same way as _self.
    • -
- -
-

Note: When using target, consider adding rel="noopener noreferrer" to avoid exploitation of the window.opener API.

-
-
-
{{htmlattrdef("type")}}
-
Specifies the media type in the form of a {{Glossary("MIME type")}} for the linked URL. It is purely advisory, with no built-in functionality.
-
- -

Obsolete

- -
-
{{htmlattrdef("charset")}} {{Deprecated_inline}}
-
This attribute defined the character encoding of the linked URL. The value should be a space- and/or comma-delimited list of character sets defined in RFC 2045. The default value is ISO-8859-1. -
-

Usage note: This attribute is obsolete in HTML5 and should not be used by authors. To achieve its effect, use the HTTP Content-Type: header on the linked URL.

-
-
-
{{htmlattrdef("coords")}} {{Deprecated_Inline}}
-
For use with the below shape attribute, this attribute used a comma-separated list of numbers to define the coordinates of the link on the page.
-
{{htmlattrdef("name")}} {{Deprecated_Inline}}
-
This attribute was required for anchors defining a possible target location within a page. In HTML 4.01, id and name could be used simultaneously on a <a> element as long as they have identical values. -
-

Usage note: This attribute is obsolete in HTML5, use the global attribute id instead.

-
-
-
{{htmlattrdef("rev")}} {{Deprecated_Inline}}
-
This attribute specified a reverse link, the inverse relationship of the rel attribute. It was deprecated for being very confusing.
-
{{htmlattrdef("shape")}} {{Deprecated_Inline}}
-
This attribute was used to define a region for hyperlinks to create an image map. The values are circle, default, polygon, and rect. The format of the coords attribute depends on the value of shape. For circle, the value is x,y,r where x and y are the pixel coordinates for the center of the circle and r is the radius value in pixels. For rect, the coords attribute should be x,y,w,h. The x,y values define the upper-left-hand corner of the rectangle, while w and h define the width and height respectively. A value of polygon for shape requires x1,y1,x2,y2,... values for coords. Each of the x,y pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value default for shape requires that the entire enclosed area, typically an image, be used. -
Note: Use the usemap attribute for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the shape attribute.
-
-
- -

Examples

- -

Linking to an external location

- -
<!-- anchor linking to external file -->
-<a href="https://www.mozilla.com/">
-External Link
-</a>
-
- -

Result

- -

External Link

- -

Linking to another section on the same page

- -
<!-- links to element on this page with id="attr-href" -->
-<a href="#attr-href">
-Description of Same-Page Links
-</a>
-
- -

Result

- -

Description of Same Page Links

- -

Creating a clickable image

- -

This example uses an image to link to the MDN home page. The home page will open in a new browsing context, that is, a new page or a new tab.

- -
<a href="https://developer.mozilla.org/en-US/" target="_blank">
-  <img src="https://mdn.mozillademos.org/files/6851/mdn_logo.png"
-       alt="MDN logo" />
-</a>
-
- -

Result

- -
-

{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}}

-
- - - -

It's common to create links that open in the user's email program to allow them to send a new message. This is done with a mailto: link. Here's a simple example:

- -
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>
- -

Result

- -

Send email to nowhere

- -

For additional details about the mailto URL scheme, such as including the subject, body, or other predetermined content, see Email links or {{RFC(6068)}}.

- - - -

Offering phone links is helpful for users viewing web documents and laptops connected to phones.

- -
<a href="tel:+491570156">+49 157 0156</a>
- -

For additional details about the tel URL scheme, see {{RFC(3966)}}.

- -

Using the download attribute to save a <canvas> as a PNG

- -

If you want to let users download an HTML {{HTMLElement("canvas")}} element as an image, you can create a link with a download attribute and the canvas data as a file URL:

- -
var link = document.createElement('a');
-link.textContent = 'download image';
-
-link.addEventListener('click', function(ev) {
-    link.href = canvas.toDataURL();
-    link.download = "mypainting.png";
-}, false);
-
-document.body.appendChild(link);
- -

You can see this in action at jsfiddle.net/codepo8/V6ufG/2/.

- -

Notes

- -

HTML 3.2 defines only the name, href, rel, rev, and title attributes.

- -

Accessibility recommendations

- -

Anchor tags are often abused with the onclick event to create pseudo-buttons by setting href to "#" or "javascript:void(0)" to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a {{HTMLElement("button")}} instead. In general you should only use an anchor for navigation using a proper URL.

- -

Clicking and focus

- -

Whether clicking on an {{HTMLElement("a")}} causes it to become focused varies by browser and OS.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Does clicking on an {{HTMLElement("a")}} give it focus?
Desktop BrowsersWindows 8.1OS X 10.9
Firefox 30.0YesYes
Chrome ≥39
- (Chromium bug 388666)		YesYes
Safari 7.0.5N/AOnly when it has a tabindex
Internet Explorer 11YesN/A
Presto (Opera 12)YesYes
- - - - - - - - - - - - - - - - - - - - -
Does tapping on an {{HTMLElement("a")}} give it focus?
Mobile BrowsersiOS 7.1.2Android 4.4.4
Safari MobileOnly when it has a tabindexN/A
Chrome 35???Only when it has a tabindex
- -

Specifications

- -{{Specifications}} - -

Browser compatibility

- - - -

{{Compat("html.elements.a")}}

- -

See also

- - - -
{{HTMLRef}}
diff --git a/files/zh-tw/web/html/element/a/index.md b/files/zh-tw/web/html/element/a/index.md new file mode 100644 index 00000000000000..8f0b849e1c49de --- /dev/null +++ b/files/zh-tw/web/html/element/a/index.md @@ -0,0 +1,225 @@ +--- +title: +slug: Web/HTML/Element/a +translation_of: Web/HTML/Element/a +--- +**HTML `` 元素**（意為 Anchor）建立了通往其他頁面、檔案、Email 地址、或其他 URL 的超連結。 + +| [內容類型](/zh-TW/docs/HTML/Content_categories) | [流型內容](/zh-TW/docs/HTML/Content_categories#Flow_content)、[phrasing content](/zh-TW/docs/HTML/Content_categories#Phrasing_content), [interactive content](/zh-TW/docs/Web/Guide/HTML/Content_categories#interactive_content), palpable content. | +| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 內容省略 | [Transparent](/zh-TW/docs/HTML/Content_categories#Transparent_content_model), containing either [flow content](/zh-TW/docs/HTML/Content_categories#Flow_content) (excluding [interactive content](/zh-TW/docs/Web/Guide/HTML/Content_categories#interactive_content)) or [phrasing content](/zh-TW/docs/HTML/Content_categories#Phrasing_content). | +| 標籤省略 | {{no_tag_omission}} | +| 允許的父元素 | 任何允許 [phrasing content](/zh-TW/docs/HTML/Content_categories#Phrasing_content) 或 [flow content](/zh-TW/docs/HTML/Content_categories#Flow_content) 的內容，但 永遠例外（according to the logical principle of symmetry, if tag, as a parent, can not have [interactive content](/zh-TW/docs/Web/Guide/HTML/Content_categories#interactive_content), then the same content can not have tag as its parent） | +| Permitted ARIA roles | {{ARIARole("button")}}, {{ARIARole("checkbox")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("option")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}, {{ARIARole("treeitem")}} | +| DOM 介面 | {{domxref("HTMLAnchorElement")}} | + +## 屬性 + +本元素包含[全域屬性](/zh-TW/docs/HTML/Global_attributes)。 + +- {{HTMLAttrDef("download")}} + + - : Causes the browser to treat the linked URL as a download. Can be used with or without a value: + + - Without a value, the browser will suggest a filename/extension, generated from various sources: + + - The {{HTTPHeader("Content-Disposition")}} HTTP header + - The final segment in the URL [path](/en-US/docs/Web/API/URL/pathname) + - The {{Glossary("MIME_type", "media type")}} (from the {{HTTPHeader("Content-Type")}} header, the start of a [`data:` URL](/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URLs), or {{domxref("Blob.type")}} for a [`blob:` URL](/en-US/docs/Web/API/URL/createObjectURL)) + + - Defining a value suggests it as the filename. `/` and `\` characters are converted to underscores (`_`). Filesystems may forbid other characters in filenames, so browsers will adjust the suggested name if necessary. + + > **Note:** + > + > - `download` only works for [same-origin URLs](/en-US/docs/Web/Security/Same-origin_policy), or the `blob:` and `data:` schemes. + > - How browsers treat downloads varies by browser, user settings, and other factors. The user may be prompted before a download starts, or the file may be saved automatically, or it may open automatically, either in an external application or in the browser itself. + > - If the `Content-Disposition` header has different information from the `download` attribute, resulting behavior may differ: + > + > - If the header specifies a `filename`, it takes priority over a filename specified in the `download` attribute. + > - If the header specifies a disposition of `inline`, Chrome and Firefox prioritize the attribute and treat it as a download. Old Firefox versions (before 82) prioritize the header and will display the content inline. + +- {{HTMLAttrDef("href")}} + + - : The URL that the hyperlink points to. Links are not restricted to HTTP-based URLs — they can use any URL scheme supported by browsers: + + - Sections of a page with fragment URLs + - Pieces of media files with media fragments + - Telephone numbers with `tel:` URLs + - Email addresses with `mailto:` URLs + - While web browsers may not support other URL schemes, web sites can with [`registerProtocolHandler()`](/en-US/docs/Web/API/Navigator/registerProtocolHandler) + +- {{HTMLAttrDef("hreflang")}} + - : Hints at the human language of the linked URL. No built-in functionality. Allowed values are the same as [the global `lang` attribute](/en-US/docs/Web/HTML/Global_attributes/lang). +- {{HTMLAttrDef("ping")}} + - : A space-separated list of URLs. When the link is followed, the browser will send {{HTTPMethod("POST")}} requests with the body `PING` to the URLs. Typically for tracking. +- {{HTMLAttrDef("referrerpolicy")}} + + - : How much of the [referrer](/en-US/docs/Web/HTTP/Headers/Referer) to send when following the link. + + - `no-referrer`: The {{HTTPHeader("Referer")}} header will not be sent. + - `no-referrer-when-downgrade`: The {{HTTPHeader("Referer")}} header will not be sent to {{Glossary("origin")}}s without {{Glossary("TLS")}} ({{Glossary("HTTPS")}}). + - `origin`: The sent referrer will be limited to the origin of the referring page: its [scheme](/en-US/docs/Learn/Common_questions/What_is_a_URL), {{Glossary("host")}}, and {{Glossary("port")}}. + - `origin-when-cross-origin`: The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path. + - `same-origin`: A referrer will be sent for {{Glossary("Same-origin policy", "same origin")}}, but cross-origin requests will contain no referrer information. + - `strict-origin`: Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP). + - `strict-origin-when-cross-origin` (default): Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP). + - `unsafe-url`: The referrer will include the origin _and_ the path (but not the [fragment](/en-US/docs/Web/API/HTMLAnchorElement/hash), [password](/en-US/docs/Web/API/HTMLAnchorElement/password), or [username](/en-US/docs/Web/API/HTMLAnchorElement/username)). **This value is unsafe**, because it leaks origins and paths from TLS-protected resources to insecure origins. + +- {{HTMLAttrDef("rel")}} + - : The relationship of the linked URL as space-separated [link types](/en-US/docs/Web/HTML/Link_types). +- {{HTMLAttrDef("target")}} + + - : Where to display the linked URL, as the name for a _browsing context_ (a tab, window, or {{HTMLElement("iframe")}}). The following keywords have special meanings for where to load the URL: + + - `_self`: the current browsing context. (Default) + - `_blank`: usually a new tab, but users can configure browsers to open a new window instead. + - `_parent`: the parent browsing context of the current one. If no parent, behaves as `_self`. + - `_top`: the topmost browsing context (the "highest" context that's an ancestor of the current one). If no ancestors, behaves as `_self`. + + > **Note:** Setting `target="_blank"` on `` elements implicitly provides the same `rel` behavior as setting [`rel="noopener"`](/en-US/docs/Web/HTML/Link_types/noopener) which does not set `window.opener`. See [browser compatibility](#browser_compatibility) for support status. + +- {{HTMLAttrDef("type")}} + - : Hints at the linked URL's format with a {{Glossary("MIME type")}}. No built-in functionality. + +### Obsolete + +- {{htmlattrdef("charset")}} {{Deprecated_inline}} + - : This attribute defined the [character encoding](/zh-TW/docs/Glossary/character_encoding) of the linked URL. The value should be a space- and/or comma-delimited list of character sets defined in [RFC 2045](https://tools.ietf.org/html/rfc2045). The default value is `ISO-8859-1`. + + > **備註：** This attribute is obsolete in HTML5 and **should not be used by authors**. To achieve its effect, use the HTTP [`Content-Type:`](/zh-TW/docs/Web/HTTP/Headers/Content-Type) header on the linked URL. +- {{htmlattrdef("coords")}} {{Deprecated_Inline}} + - : For use with the below `shape` attribute, this attribute used a comma-separated list of numbers to define the coordinates of the link on the page. +- {{htmlattrdef("name")}} {{Deprecated_Inline}} + - : This attribute was required for anchors defining a possible target location within a page. In HTML 4.01, `id` and `name` could be used simultaneously on a `` element as long as they have identical values. + + > **備註：** This attribute is obsolete in HTML5, use the [global attribute `id`](/zh-TW/docs/HTML/Global_attributes#attr-id) instead. +- {{htmlattrdef("rev")}} {{Deprecated_Inline}} + - : This attribute specified a reverse link, the inverse relationship of the **rel** attribute. It was deprecated for being very confusing. +- {{htmlattrdef("shape")}} {{Deprecated_Inline}} + - : This attribute was used to define a region for hyperlinks to create an image map. The values are `circle`, `default`, `polygon`, and `rect`. The format of the **coords** attribute depends on the value of shape. For `circle`, the value is `x,y,r` where `x` and `y` are the pixel coordinates for the center of the circle and `r` is the radius value in pixels. For `rect`, the **coords** attribute should be `x,y,w,h`. The `x,y` values define the upper-left-hand corner of the rectangle, while `w` and `h` define the width and height respectively. A value of `polygon` for **shape** requires `x1,y1,x2,y2,...` values for **coords**. Each of the `x,y` pairs defines a point in the polygon, with successive points being joined by straight lines and the last point joined to the first. The value `default` for shape requires that the entire enclosed area, typically an image, be used. + + > **備註：** Use the [`usemap` attribute](/zh-TW/docs/Web/HTML/Element/img#attr-usemap) for the {{HTMLElement("img")}} element and the associated {{HTMLElement("map")}} element to define hotspots instead of the `shape` attribute. + +## Examples + +### Linking to an external location + +```html + + +External Link + +``` + +#### Result + +[External Link](https://www.mozilla.com/) + +### Linking to another section on the same page + +```html + + +Description of Same-Page Links + +``` + +#### Result + +[Description of Same Page Links](#attr-href) + +### Creating a clickable image + +This example uses an image to link to the MDN home page. The home page will open in a new browsing context, that is, a new page or a new tab. + +```html + + MDN logo + +``` + +#### Result + +{{EmbedLiveSample("Creating_a_clickable_image", "320", "64")}} + +### Creating an email link + +It's common to create links that open in the user's email program to allow them to send a new message. This is done with a `mailto:` link. Here's a simple example: + +```html +Send email to nowhere +``` + +#### Result + +[Send email to nowhere](mailto:nowhere@mozilla.org) + +For additional details about the `mailto` URL scheme, such as including the subject, body, or other predetermined content, see [Email links](/zh-TW/docs/Web/Guide/HTML/Email_links) or {{RFC(6068)}}. + +### Creating a phone link + +Offering phone links is helpful for users viewing web documents and laptops connected to phones. + +```html ++49 157 0156 +``` + +For additional details about the `tel` URL scheme, see {{RFC(3966)}}. + +### Using the `download` attribute to save a `` as a PNG + +If you want to let users download an HTML {{HTMLElement("canvas")}} element as an image, you can create a link with a `download` attribute and the canvas data as a file URL: + +```js +var link = document.createElement('a'); +link.textContent = 'download image'; + +link.addEventListener('click', function(ev) { + link.href = canvas.toDataURL(); + link.download = "mypainting.png"; +}, false); + +document.body.appendChild(link); +``` + +You can see this in action at [jsfiddle.net/codepo8/V6ufG/2/](https://jsfiddle.net/codepo8/V6ufG/2/). + +## Notes + +HTML 3.2 defines only the `name`, `href`, `rel`, `rev`, and `title` attributes. + +### Accessibility recommendations + +Anchor tags are often abused with the `onclick` event to create pseudo-buttons by setting **href** to `"#"` or `"javascript:void(0)"` to prevent the page from refreshing. These values cause unexpected behavior when copying/dragging links, opening links in a new tabs/windows, bookmarking, and when JavaScript is still downloading, errors out, or is disabled. This also conveys incorrect semantics to assistive technologies (e.g., screen readers). In these cases, it is recommended to use a {{HTMLElement("button")}} instead. In general you should only use an anchor for navigation using a proper URL. + +### Clicking and focus + +Whether clicking on an {{HTMLElement("a")}} causes it to become focused varies by browser and OS. + +| Desktop Browsers | Windows 8.1 | OS X 10.9 | +| ---------------------------------------------------------------------------------------------- | ----------- | ----------------------------- | +| Firefox 30.0 | Yes | Yes | +| Chrome ≥39 ([Chromium bug 388666](https://code.google.com/p/chromium/issues/detail?id=388666)) | Yes | Yes | +| Safari 7.0.5 | N/A | Only when it has a `tabindex` | +| Internet Explorer 11 | Yes | N/A | +| Presto (Opera 12) | Yes | Yes | + +| Mobile Browsers | iOS 7.1.2 | Android 4.4.4 | +| --------------- | ----------------------------- | ----------------------------- | +| Safari Mobile | Only when it has a `tabindex` | N/A | +| Chrome 35 | ??? | Only when it has a `tabindex` | + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat("html.elements.a")}} + +## See also + +- Other elements conveying [text-level semantics](/zh-TW/docs/HTML/Text_level_semantics_conveying_elements): {{HTMLElement("abbr")}}, {{HTMLElement("em")}}, {{HTMLElement("strong")}}, {{HTMLElement("small")}}, {{HTMLElement("cite")}}, {{HTMLElement("q")}}, {{HTMLElement("dfn")}}, {{HTMLElement("time")}}, {{HTMLElement("code")}}, {{HTMLElement("var")}}, {{HTMLElement("samp")}}, {{HTMLElement("kbd")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{HTMLElement("b")}}, {{HTMLElement("i")}}, {{HTMLElement("mark")}}, {{HTMLElement("ruby")}}, {{HTMLElement("rp")}}, {{HTMLElement("rt")}}, {{HTMLElement("bdo")}}, {{HTMLElement("span")}}, {{HTMLElement("br")}}, {{HTMLElement("wbr")}}. + +{{HTMLRef}} diff --git a/files/zh-tw/web/html/element/blink/index.html b/files/zh-tw/web/html/element/blink/index.html deleted file mode 100644 index 064c37344f8ec2..00000000000000 --- a/files/zh-tw/web/html/element/blink/index.html +++ /dev/null @@ -1,75 +0,0 @@ ---- -title: ：文字閃爍元素（已過時） -slug: Web/HTML/Element/blink -translation_of: Web/HTML/Element/blink ---- -
{{Deprecated_header}}
- -

非標準元素 HTML Blink（<blink>）可以讓該元素裡面的文字緩慢閃爍。

- -
不要使用這個元素，因為它已經被棄用，而且是糟糕的設計。無障礙標準不會接受閃爍文字、而 CSS 規範上允許瀏覽器忽略閃爍效果。
- -

DOM 介面

- -

此元素並未被支援，因此是透過 {{domxref("HTMLUnknownElement")}} 介面實做。

- -

示例

- -
<blink>Why would somebody use this?</blink>
-
- -

結果（已經過淡化！）

- -

Image:HTMLBlinkElement.gif

- -

規範

- -

此元素並非標準元素，也不屬於任何規範。不信的話，你自己來看 HTML 規範。

- -

CSS Polyfill

- -

如果真的需要 polyfill，請使用以下的 CSS。它支援 IE10 以上。

- -
blink {
-    -webkit-animation: 2s linear infinite condemned_blink_effect; // for android
-    animation: 2s linear infinite condemned_blink_effect;
-}
-@-webkit-keyframes condemned_blink_effect { // for android
-    0% {
-        visibility: hidden;
-    }
-    50% {
-        visibility: hidden;
-    }
-    100% {
-        visibility: visible;
-    }
-}
-@keyframes condemned_blink_effect {
-    0% {
-        visibility: hidden;
-    }
-    50% {
-        visibility: hidden;
-    }
-    100% {
-        visibility: visible;
-    }
-}
- -

瀏覽器相容性

- - - -

{{Compat("html.elements.blink")}}

- -

參見

- -
    -
  • HTML <blink> 元素的創建史。
    • -
  • {{cssxref("text-decoration")}}，儘管有 blink 值，多數瀏覽器並不需要實做閃爍效果。
    • -
  • {{htmlelement("marquee")}}，類似的非標準元素。
    • -
  • CSS 動畫能得出與此元素相同的效果。
    • -
- -

{{HTMLRef}}

diff --git a/files/zh-tw/web/html/element/blink/index.md b/files/zh-tw/web/html/element/blink/index.md new file mode 100644 index 00000000000000..1824a194f0dc0f --- /dev/null +++ b/files/zh-tw/web/html/element/blink/index.md @@ -0,0 +1,74 @@ +--- +title: ：文字閃爍元素（已過時） +slug: Web/HTML/Element/blink +translation_of: Web/HTML/Element/blink +--- +{{Deprecated_header}} + +非標準元素 **HTML Blink**（``）可以讓該元素裡面的文字緩慢閃爍。 + +> **警告：** 不要使用這個元素，因為它已經**被棄用**，而且是糟糕的設計。無障礙標準不會接受閃爍文字、而 CSS 規範上允許瀏覽器忽略閃爍效果。 + +## DOM 介面 + +此元素並未被支援，因此是透過 {{domxref("HTMLUnknownElement")}} 介面實做。 + +## 示例 + +```html +Why would somebody use this? +``` + +### 結果（已經過淡化！） + +![Image:HTMLBlinkElement.gif](/@api/deki/files/247/=HTMLBlinkElement.gif) + +## 規範 + +此元素並非標準元素，也不屬於任何規範。不信的話，[你自己來看 HTML 規範](http://www.whatwg.org/specs/web-apps/current-work/multipage/obsolete.html#non-conforming-features)。 + +## CSS Polyfill + +如果真的需要 polyfill，請使用以下的 CSS。它支援 IE10 以上。 + +```html +blink { + -webkit-animation: 2s linear infinite condemned_blink_effect; // for android + animation: 2s linear infinite condemned_blink_effect; +} +@-webkit-keyframes condemned_blink_effect { // for android + 0% { + visibility: hidden; + } + 50% { + visibility: hidden; + } + 100% { + visibility: visible; + } +} +@keyframes condemned_blink_effect { + 0% { + visibility: hidden; + } + 50% { + visibility: hidden; + } + 100% { + visibility: visible; + } +} +``` + +## 瀏覽器相容性 + +{{Compat("html.elements.blink")}} + +## 參見 + +- [HTML `` 元素的創建史](http://www.montulli.org/theoriginofthe%3Cblink%3Etag)。 +- {{cssxref("text-decoration")}}，儘管有 blink 值，多數瀏覽器並不需要實做閃爍效果。 +- {{htmlelement("marquee")}}，類似的非標準元素。 +- [CSS 動畫](/zh-TW/docs/Web/Guide/CSS/Using_CSS_animations)能得出與此元素相同的效果。 + +{{HTMLRef}} diff --git a/files/zh-tw/web/html/element/blockquote/index.html b/files/zh-tw/web/html/element/blockquote/index.html deleted file mode 100644 index 4f525a9a8c7d51..00000000000000 --- a/files/zh-tw/web/html/element/blockquote/index.html +++ /dev/null @@ -1,78 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/blockquote -translation_of: Web/HTML/Element/blockquote ---- -

摘要

- -

HTML <blockquote> 元素（HTML 區塊引言元素）定義一段文字屬於引用。通常，這元素會透過縮排來呈現（要知道如何改變，請參考備註）。引言的 URL 來源可透過 cite 屬性賦予，而來源的文本形式可以使用 {{HTMLElement("cite")}} 元素。

- - - - - - - - - - - - - - - - - - - - - - - - -
內容類別流內容、sectioning root、捫及內容。
允許內容內容流.
Tag 省略{{no_tag_omission}}
允許父元素任何允許內容流的元素
DOM 介面{{domxref("HTMLQuoteElement")}}
- -

屬性

- -

這個屬性包含全局屬性。

- -
-
{{htmlattrdef("cite")}}
-
一個指向被引用的原始文件或訊息的 URL 。這個屬性預期要指引到解釋內容的資訊，或是引言的援引。
-
- -

範例

- -
<blockquote cite="http://developer.mozilla.org">
-  <p>這是取自於 Mozilla Developer Center 的引言。</p>
-</blockquote>
-
- -

以上的 HTML 原始碼會輸出：

- -
-

這是取自於 Mozilla Developer Center 的引言。

-
- -

規範

- -{{Specifications}} - -

瀏覽器相容性

- -{{Compat("html.elements.blockquote")}} - -

備註

- -

要改變<blockquote>的縮進，請使用 CSS 的 {{cssxref("margin")}} 屬性。

- -

針對短篇引文請使用 {{HTMLElement("q")}} 元素。

- -

延伸閱讀

- -
    -
  • {{HTMLElement("q")}} 元素：用以表示單行的引用內容。
    • -
  • {{HTMLElement("cite")}} 元素：用以表示引用來源。
    • -
- -

{{HTMLRef}}

diff --git a/files/zh-tw/web/html/element/blockquote/index.md b/files/zh-tw/web/html/element/blockquote/index.md new file mode 100644 index 00000000000000..50f3a31b024abb --- /dev/null +++ b/files/zh-tw/web/html/element/blockquote/index.md @@ -0,0 +1,55 @@ +--- +title:
+slug: Web/HTML/Element/blockquote +translation_of: Web/HTML/Element/blockquote +--- +## 摘要 + +**HTML `
` 元素**（_HTML 區塊引言元素_）定義一段文字屬於引用。通常，這元素會透過縮排來呈現（要知道如何改變，請參考[備註](#Notes)）。引言的 URL 來源可透過 **cite** 屬性賦予，而來源的文本形式可以使用 {{HTMLElement("cite")}} 元素。 + +| [內容類別](/zh-TW/docs/HTML/Content_categories) | [流內容](/zh-TW/docs/HTML/Content_categories#Flow_content)、sectioning root、捫及內容。 | +| ----------------------------------------------- | --------------------------------------------------------------------------------------- | +| 允許內容 | [內容流](/zh-TW/docs/HTML/Content_categories#Flow_content). | +| Tag 省略 | {{no_tag_omission}} | +| 允許父元素 | 任何允許[內容流](/zh-TW/docs/HTML/Content_categories#Flow_content)的元素 | +| DOM 介面 | {{domxref("HTMLQuoteElement")}} | + +## 屬性 + +這個屬性包含[全局屬性](/zh-TW/docs/HTML/Global_attributes)。 + +- {{htmlattrdef("cite")}} + - : 一個指向被引用的原始文件或訊息的 URL 。這個屬性預期要指引到解釋內容的資訊，或是引言的援引。 + +## 範例 + +```html +
+

這是取自於 Mozilla Developer Center 的引言。

+
+``` + +以上的 HTML 原始碼會輸出： + +{{EmbedLiveSample('範例')}} + +## 規範 + +{{Specifications}} + +## 瀏覽器相容性 + +{{Compat("html.elements.blockquote")}} + +## 備註 + +要改變`
`的縮進，請使用 [CSS](/zh-TW/docs/CSS) 的 {{cssxref("margin")}} 屬性。 + +針對短篇引文請使用 {{HTMLElement("q")}} 元素。 + +## 延伸閱讀 + +- {{HTMLElement("q")}} 元素：用以表示單行的引用內容。 +- {{HTMLElement("cite")}} 元素：用以表示引用來源。 + +{{HTMLRef}} diff --git a/files/zh-tw/web/html/element/br/index.html b/files/zh-tw/web/html/element/br/index.html deleted file mode 100644 index c0791c46d48ef4..00000000000000 --- a/files/zh-tw/web/html/element/br/index.html +++ /dev/null @@ -1,104 +0,0 @@ ---- -title:
（斷行元素） -slug: Web/HTML/Element/br -translation_of: Web/HTML/Element/br ---- -
{{HTMLRef}}
- -

HTML <br> 元素會產生文字的斷行（carriage-return、CR 或是確認鍵）。此元素主要用於斷行有所意義的時候，像是寫詩或寫住址。

- -
{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}}
- - -

如上所示，<br> 元素會在需要斷行的時候出現。在 <br> 之後的文字會從文字區域的下一行出現。

- -
-

注意：不要用 <br> 建立段落間距：這種情況下要用 {{htmlelement("p")}} 把它們包起來，並使用 CSS {{cssxref('margin')}} 屬性控制間距大小。

-
- -

屬性

- -

這個元件屬性含有全域屬性。

- -

棄用屬性

- -
-
{{htmlattrdef("clear")}}
-
指示中斷後下一行的開始位置。
-
- -

使用 CSS 樣式化

- -

<br> 元素有一個定義明確的用途：在文字區塊裡面建立斷行。因此它本身沒有尺寸或視覺輸出，基本上你做不了任何樣式化。

- -

你可以給 <br> 元素設置 {{cssxref("margin")}} 以增加文字之間的斷行大小，但這並不是正確的作法：你應該用 {{cssxref("line-height")}} 屬性做這件事情。

- -

示例

- -
Mozilla Foundation<br>
-1981 Landings Drive<br>
-Building K<br>
-Mountain View, CA 94043-0801<br>
-USA
-
- -

以上 HTML 將顯示

- -

{{ EmbedLiveSample('示例', '100%', '90') }}

- -

無障礙議題

- -

使用 <br> 元素分段不只作法不佳，對於使用輔具的人來說，也會是有問題的。螢幕閱讀器會念出該元素，但 <br> 裡面的內容是念不出來的。對於使用螢幕閱讀器的人來說，這可能是困惑與沮喪的體驗。

- -

請使用 <p> 元素搭配 CSS 屬性如 {{cssxref("margin")}} 來控制間距大小。

- -

技術摘要

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
內容類型流型內容、段落型內容。
允許內容無，這是個{{Glossary("空元素")}}.
標籤省略絕對要有開啟標籤，也絕不能關閉標籤。在 XHTML 文件內，要把這個元素寫成 <br />.
允許父元素任何接受段落型內容的元素
允許的 ARIA roles所有
DOM 介面{{domxref("HTMLBRElement")}}
- -

規範

- -{{Specifications}} - -

瀏覽器相容性

- - - -

{{Compat("html.elements.br")}}

- -

參見

- -
    -
  • {{HTMLElement("address")}} 元素
    • -
  • {{HTMLElement("p")}} 元素
    • -
  • {{HTMLElement("wbr")}} 元素
    • -
- -
{{HTMLRef}}
diff --git a/files/zh-tw/web/html/element/br/index.md b/files/zh-tw/web/html/element/br/index.md new file mode 100644 index 00000000000000..89f853685c8bef --- /dev/null +++ b/files/zh-tw/web/html/element/br/index.md @@ -0,0 +1,75 @@ +--- +title:
（斷行元素） +slug: Web/HTML/Element/br +translation_of: Web/HTML/Element/br +--- +{{HTMLRef}} + +**HTML `
` 元素**會產生文字的斷行（carriage-return、CR 或是確認鍵）。此元素主要用於斷行有所意義的時候，像是寫詩或寫住址。 + +{{EmbedInteractiveExample("pages/tabbed/br.html", "tabbed-standard")}} + +如上所示，`
` 元素會在需要斷行的時候出現。在 `
` 之後的文字會從文字區域的下一行出現。 + +> **備註：** 不要用 `
` 建立段落間距：這種情況下要用 {{htmlelement("p")}} 把它們包起來，並使用 [CSS](/zh-TW/docs/CSS) {{cssxref('margin')}} 屬性控制間距大小。 + +## 屬性 + +這個元件屬性含有[全域屬性](/zh-TW/docs/HTML/Global_attributes)。 + +### 棄用屬性 + +- {{htmlattrdef("clear")}} + - : 指示中斷後下一行的開始位置。 + +## 使用 CSS 樣式化 + +`
` 元素有一個定義明確的用途：在文字區塊裡面建立斷行。因此它本身沒有尺寸或視覺輸出，基本上你做不了任何樣式化。 + +你可以給 `
` 元素設置 {{cssxref("margin")}} 以增加文字之間的斷行大小，但這並不是正確的作法：你應該用 {{cssxref("line-height")}} 屬性做這件事情。 + +## 示例 + +```html +Mozilla Foundation
+1981 Landings Drive
+Building K
+Mountain View, CA 94043-0801
+USA +``` + +以上 HTML 將顯示 + +{{ EmbedLiveSample('示例', '100%', '90') }} + +## 無障礙議題 + +使用 `
` 元素*分段*不只作法不佳，對於使用輔具的人來說，也會是有問題的。螢幕閱讀器會念出該元素，但 `
` 裡面的內容是念不出來的。對於使用螢幕閱讀器的人來說，這可能是困惑與沮喪的體驗。 + +請使用 `

` 元素搭配 CSS 屬性如 {{cssxref("margin")}} 來控制間距大小。 + +## 技術摘要 + +| [內容類型](/zh-TW/docs/HTML/Content_categories) | [流型內容](/zh-TW/docs/HTML/Content_categories#Flow_content)、[段落型內容](/zh-TW/docs/HTML/Content_categories#Phrasing_content)。 | +| ----------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- | +| 允許內容 | 無，這是個{{Glossary("空元素")}}. | +| 標籤省略 | 絕對要有開啟標籤，也絕不能關閉標籤。在 XHTML 文件內，要把這個元素寫成 `
`. | +| 允許父元素 | 任何接受[段落型內容](/zh-TW/docs/HTML/Content_categories#Phrasing_content)的元素 | +| 允許的 ARIA roles | 所有 | +| DOM 介面 | {{domxref("HTMLBRElement")}} | + +## 規範 + +{{Specifications}} + +## 瀏覽器相容性 + +{{Compat("html.elements.br")}} + +## 參見 + +- {{HTMLElement("address")}} 元素 +- {{HTMLElement("p")}} 元素 +- {{HTMLElement("wbr")}} 元素 + +{{HTMLRef}} diff --git a/files/zh-tw/web/html/element/button/index.html b/files/zh-tw/web/html/element/button/index.html deleted file mode 100644 index c15ce66d8bc6cc..00000000000000 --- a/files/zh-tw/web/html/element/button/index.html +++ /dev/null @@ -1,197 +0,0 @@ ---- -title: `, the `POST` data sent will result in `myButton=Click me` instead of `myButton=foo`. +IE6 has an even worse bug where submitting a form through a button will submit ALL buttons of the form, with the same bug as IE7. +This bug has been fixed in IE8. + +Firefox will add, for accessibility purposes, a small dotted border on a focused button. This border is declared through CSS, in the browser stylesheet, but you can override it if necessary to add your own focused style using `button{{cssxref("::-moz-focus-inner")}} { }` + +Firefox will, unlike other browsers, by default, [persist the dynamic disabled state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of a {{HTMLElement("button")}} across page loads. Setting the value of the {{htmlattrxref("autocomplete","button")}} attribute to `off` disables this feature. See {{bug(654072)}}. + +Firefox <35 for Android sets a default {{ cssxref("background-image") }} gradient on all buttons (see {{bug(763671)}}). This can be disabled using `background-image: none`. + +### Clicking and focus + +Whether clicking on a {{HTMLElement("button")}} causes it to (by default) become focused varies by browser and OS. The results for {{HTMLElement("input")}} of `type="button"` and `type="submit"` were the same. + +| Desktop Browsers | Windows 8.1 | OS X 10.9 | +| -------------------- | ----------- | --------------------------- | +| Firefox 30.0 | Yes | No (even with a `tabindex`) | +| Chrome 35 | Yes | Yes | +| Safari 7.0.5 | N/A | No (even with a `tabindex`) | +| Internet Explorer 11 | Yes | N/A | +| Presto (Opera 12) | Yes | Yes | + +| Mobile Browsers | iOS 7.1.2 | Android 4.4.4 | +| --------------- | --------------------------- | ------------- | +| Safari Mobile | No (even with a `tabindex`) | N/A | +| Chrome 35 | No (even with a `tabindex`) | Yes | + +## Example + +```html + +``` + +{{ EmbedLiveSample('Example', 200, 64) }} + +Please note that this button has CSS applied. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat("html.elements.button")}} + +## See also + +Other elements that are used for creating forms: {{HTMLElement("form")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}. + +{{HTMLRef}} diff --git a/files/zh-tw/web/html/element/canvas/index.html b/files/zh-tw/web/html/element/canvas/index.html deleted file mode 100644 index 8fd82373791f07..00000000000000 --- a/files/zh-tw/web/html/element/canvas/index.html +++ /dev/null @@ -1,97 +0,0 @@ ---- -title: -slug: Web/HTML/Element/canvas -translation_of: Web/HTML/Element/canvas ---- -

這個 HTML <canvas> 元素 可以被使用於對腳本程式(JaveScript) 繪圖 .舉例來說, 它能用來畫圖,組合照片,甚至作動畫. 你也許(應該) 在<canvas>區段內提供替代方案的內容 .這內容將能被一些不支援<canvas>以及無法使用Javescript功能的瀏覽器所渲染 .

- -

更多文章關於canvas, 請參考 canvas 主題

- - - - - - - - - - - - - - - - - - - - - - - - -
Content 分類流程式content, 段落式content, 強調式content, 可見式 content.
-

被允許通過的內容

- 		-

除了子元素不是 <a>的元素、 <button>的元素、<input>的元素屬性是checkbox, radio, 或 button 之外且是透明內容模型但不是互動式content

-
Tag 省略不能省略標籤<canvas> </canvas>
被允許通過的父親元素 -

任何強調式content的元素皆可通過

-
DOM 介面HTMLCanvasElement
- -

屬性

- -

這個元素的屬性包含全域屬性

- -
-
{{htmlattrdef("height")}}
-
在CSS 中以 pixels 表示 座標的空間高度（預設是150）
-
{{htmlattrdef("moz-opaque")}} {{non-standard_inline}}
-
讓canvas知道這個因素是否為半透明的。如果 canvas 知道不是半透明，則提高繪畫的效能
-
{{htmlattrdef("width")}}
-
在CSS 中以 pixels 表示 座標的空間寬度（預設是300）
-
- -

描述

- -

需要 </canvas> 結尾

- -

與<img>不同之處,<canvas>需要</canvas> 結尾

- -

canvas的大小設置

- -

canvas的大小設置可透過樣式表（stylesheet）被改變。可經由樣式修改圖像的縮放大小。

- -

若呈現的效果圖似乎是扭曲變形的，可試著先修改<canvas>標籤中的width和height的屬性，而不建議使用css去控制。

- -

範例

- -

將下面這條範例加到你的HTML文件。如果你的瀏覽器並不支援canvas 或不能讀取canvas 時，則會回報canvas中的訊息。若想知道更多有用的回應訊息或替代DOM的註文，可以參考更多相似的註文。

- -
<canvas id="canvas" width="300" height="300">
-  抱歉，你的瀏覽器並不支援<canvas>元素
-</canvas>
-
- -

如果你的canvas沒有使用透明度，可在<canvas>標籤設立moz-opaque屬性，提升它的繪圖效果。moz-opaque 尚未標準化，所以只適用在 Mozilla 的 效能引擎。

- -
<canvas id="mycanvas" moz-opaque></canvas>
- -

規範

- -{{Specifications}} - -

瀏覽器相容性

- -{{Compat("html.elements.canvas")}} - -

延伸閱讀

- - - -
{{HTMLRef}}
diff --git a/files/zh-tw/web/html/element/canvas/index.md b/files/zh-tw/web/html/element/canvas/index.md new file mode 100644 index 00000000000000..5be3e67f526837 --- /dev/null +++ b/files/zh-tw/web/html/element/canvas/index.md @@ -0,0 +1,72 @@ +--- +title: +slug: Web/HTML/Element/canvas +translation_of: Web/HTML/Element/canvas +--- +這個 **HTML `` 元素** 可以被使用於對腳本程式(JaveScript) 繪圖 .舉例來說, 它能用來畫圖,組合照片,甚至作動畫. 你也許(應該) 在\區段內提供替代方案的內容 .這內容將能被一些不支援\以及無法使用 Javescript 功能的瀏覽器所渲染 . + +更多文章關於 canvas, 請參考 [canvas 主題](/zh-TW/docs/Web/API/Canvas_API) + +| [Content 分類](/zh-TW/docs/HTML/Content_categories) | [流程式 content](/zh-TW/docs/HTML/Content_categories#Flow_content), [段落式 content](/zh-TW/docs/HTML/Content_categories#Phrasing_content), [強調式 content](/zh-TW/docs/HTML/Content_categories#Embedded_content), 可見式 content. | +| --------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| 被允許通過的內容 | 除了子元素不是 \的元素、 \ + + + +
+ + +
+ + +
+
+ Title + +
+
+``` + +{{ EmbedLiveSample('Examples', '100%', 110) }} + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat("html.elements.form")}} + +## See also + +- [HTML forms guide](/zh-TW/docs/Web/Guide/HTML/Forms) +- Other elements that are used when creating forms: {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}},{{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("legend")}}, {{HTMLElement("meter")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, {{HTMLElement("textarea")}}. +- Getting a list of the elements in the form: {{domxref("HTMLFormElement.elements")}} +- [ARIA: Form role](/zh-TW/docs/Web/Accessibility/ARIA/Roles/Form_Role) +- [ARIA: Search role](/zh-TW/docs/Web/Accessibility/ARIA/Roles/Search_role) diff --git a/files/zh-tw/web/html/element/frameset/index.html b/files/zh-tw/web/html/element/frameset/index.html deleted file mode 100644 index 53e07d8c1fe63c..00000000000000 --- a/files/zh-tw/web/html/element/frameset/index.html +++ /dev/null @@ -1,39 +0,0 @@ ---- -title: -slug: Web/HTML/Element/frameset -translation_of: Web/HTML/Element/frameset ---- -
{{Deprecated_header}}
- -

概要

- -

<frameset> 是用以包含 {{HTMLElement("frame")}} 元素的元素。

- -
注意：因為使用框架的推薦是 {{HTMLElement("iframe")}}，這個元素一般不會在現在的網站出現。
- -

屬性

- -

如同其他 HTML 元素，這個元素支持全域屬性。

- -
-
{{htmlattrdef("cols")}}
-
這個屬性指定了橫向框架的數量和尺寸。
-
{{htmlattrdef("rows")}}
-
這個屬性指定了直向框架的數量和尺寸。
-
- -

範例

- -
<frameset cols="50%,50%">
-  <frame src="https://developer.mozilla.org/en/HTML/Element/frameset" />
-  <frame src="https://developer.mozilla.org/en/HTML/Element/frame" />
-</frameset>
- -

參見

- -
    -
  • {{HTMLElement("frame")}}
    • -
  • {{HTMLElement("iframe")}}
    • -
- -

{{HTMLRef}}

diff --git a/files/zh-tw/web/html/element/frameset/index.md b/files/zh-tw/web/html/element/frameset/index.md new file mode 100644 index 00000000000000..2953b828395d45 --- /dev/null +++ b/files/zh-tw/web/html/element/frameset/index.md @@ -0,0 +1,37 @@ +--- +title: +slug: Web/HTML/Element/frameset +translation_of: Web/HTML/Element/frameset +--- +{{Deprecated_header}} + +## 概要 + +`` 是用以包含 {{HTMLElement("frame")}} 元素的元素。 + +> **備註：** 因為使用框架的推薦是 {{HTMLElement("iframe")}}，這個元素一般不會在現在的網站出現。 + +## 屬性 + +如同其他 HTML 元素，這個元素支持[全域屬性](/zh-TW/HTML/Global_attributes)。 + +- {{htmlattrdef("cols")}} + - : 這個屬性指定了橫向框架的數量和尺寸。 +- {{htmlattrdef("rows")}} + - : 這個屬性指定了直向框架的數量和尺寸。 + +## 範例 + +```html + + + + +``` + +## 參見 + +- {{HTMLElement("frame")}} +- {{HTMLElement("iframe")}} + +{{HTMLRef}} diff --git a/files/zh-tw/web/html/element/hr/index.html b/files/zh-tw/web/html/element/hr/index.html deleted file mode 100644 index 23c12590c76bac..00000000000000 --- a/files/zh-tw/web/html/element/hr/index.html +++ /dev/null @@ -1,90 +0,0 @@ ---- -title:
-slug: Web/HTML/Element/hr -tags: - - HTML - - 元素 - - 參考 -translation_of: Web/HTML/Element/hr ---- -

{{HTMLRef}}

- -

HTML 的 <hr> 元素代表在段落層級的焦點轉換（如故事中的場景轉換或某個小節裡的主題移轉）。在之前的 HTML 版本，它代表著一條水平標線。在視覺瀏覽器裡，它現在可能還是以水平標線的型式呈現；但它已經被重新定義為一個語義上的用詞，而不是呈現上的。

- - - - - - - - - - - - - - - - - - - - - - - - -
內容類型流內容.
Permitted content否。這是個 {{Glossary("empty element")}}.
標籤省略一定要有起始標籤、同時絕不能有結束標籤
Permitted parent elements任何允許流內容的元素。
DOM interface{{domxref("HTMLHRElement")}}
- -

屬性

- -

這個元素支持全域屬性。

- -
-
{{htmlattrdef("align")}} {{deprecated_inline}}
-
設罝頁面上標線的對齊方式。如果沒有指定，預設值是：left。
-
{{htmlattrdef("color")}} {{Non-standard_inline}}
-
用色彩名或16進位值設罝標線的顏色。
-
{{htmlattrdef("noshade")}} {{deprecated_inline}}
-
設置這個標線沒有陰影。
-
{{htmlattrdef("size")}} {{deprecated_inline}}
-
設置標線的高度，單位是 px。.
-
{{htmlattrdef("width")}} {{deprecated_inline}}
-
設置標線的長度，單位是 px；或者也可以用頁面寛度的百分比 (%)表示。
-
- -

範例

- -
<p>This is the first paragraph of text.
-This is the first paragraph of text.
-This is the first paragraph of text.
-This is the first paragraph of text.
-
-<hr>
-
-<p>This is second paragraph of text.
-This is second paragraph of text.
-This is second paragraph of text.
-This is second paragraph of text.
-
- -

上面的 HTML會輸出：

- -

This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.

- -
-

This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. This is second paragraph of text.

- -

規範

- -{{Specifications}} - -

瀏覽器相容性

- -{{Compat("html.elements.hr")}} - -

參照 （see also)

- -
    -
  • {{HTMLElement('p')}}
    • -
diff --git a/files/zh-tw/web/html/element/hr/index.md b/files/zh-tw/web/html/element/hr/index.md new file mode 100644 index 00000000000000..8be9739d733b1d --- /dev/null +++ b/files/zh-tw/web/html/element/hr/index.md @@ -0,0 +1,70 @@ +--- +title:
+slug: Web/HTML/Element/hr +tags: + - HTML + - 元素 + - 參考 +translation_of: Web/HTML/Element/hr +--- +{{HTMLRef}} + +**HTML** 的** `
` 元素**代表在段落層級的焦點轉換（如故事中的場景轉換或某個小節裡的主題移轉）。在之前的 HTML 版本，它代表著一條水平標線。在視覺瀏覽器裡，它現在可能還是以水平標線的型式呈現；但它已經被重新定義為一個語義上的用詞，而不是呈現上的。 + +| [內容類型](/zh-TW/docs/HTML/Content_categories) | [流內容](/zh-TW/docs/HTML/Content_categories#流內容（Flow_content）). | +| ----------------------------------------------- | ------------------------------------------------------------------------------------ | +| Permitted content | 否。這是個 {{Glossary("empty element")}}. | +| 標籤省略 | 一定要有起始標籤、同時絕不能有結束標籤 | +| Permitted parent elements | 任何允許[流內容](/zh-TW/docs/HTML/Content_categories#流內容（Flow_content）)的元素。 | +| DOM interface | {{domxref("HTMLHRElement")}} | + +## 屬性 + +這個元素支持[全域屬性](/zh-TW/docs/HTML/Global_attributes)。 + +- {{htmlattrdef("align")}} {{deprecated_inline}} + - : 設罝頁面上標線的對齊方式。如果沒有指定，預設值是：`left。` +- {{htmlattrdef("color")}} {{Non-standard_inline}} + - : 用色彩名或 16 進位值設罝標線的顏色。 +- {{htmlattrdef("noshade")}} {{deprecated_inline}} + - : 設置這個標線沒有陰影。 +- {{htmlattrdef("size")}} {{deprecated_inline}} + - : 設置標線的高度，單位是 px。. +- {{htmlattrdef("width")}} {{deprecated_inline}} + - : 設置標線的長度，單位是 px；或者也可以用頁面寛度的百分比 (%)表示。 + +## 範例 + +```html +

This is the first paragraph of text. +This is the first paragraph of text. +This is the first paragraph of text. +This is the first paragraph of text. + +

+ +

This is second paragraph of text. +This is second paragraph of text. +This is second paragraph of text. +This is second paragraph of text. +``` + +上面的 HTML 會輸出： + +This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. + +--- + +This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. This is second paragraph of text. + +## 規範 + +{{Specifications}} + +## 瀏覽器相容性 + +{{Compat("html.elements.hr")}} + +## 參照 （see also) + +- {{HTMLElement('p')}} diff --git a/files/zh-tw/web/html/element/index.html b/files/zh-tw/web/html/element/index.html deleted file mode 100644 index d7ae45cbe466f7..00000000000000 --- a/files/zh-tw/web/html/element/index.html +++ /dev/null @@ -1,106 +0,0 @@ ---- -title: HTML 元素 -slug: Web/HTML/Element -tags: - - Basic - - Element - - HTML - - Reference - - Web -translation_of: Web/HTML/Element ---- -

{{HTMLSidebar("Elements")}}
- -

本頁列出了所有 {{Glossary("HTML")}} 元素（{{Glossary("Element")}}），他們可以透過標籤（{{Glossary("Tags", "tags")}}）建立。這些元素會以功能來分組，讓你更容易尋找。在本頁及每一個元素的頁面的側邊欄都提供了以英文字母排序的所有元素清單。

- -
-

更多關於基本 HTML 元素及屬性（attribute）可參考HTML 介紹一文中的元素小節。

-
- -

主要根元素

- -

{{HTMLRefTable("HTML Root Element")}}

- -

文件詮釋資料（metadata）

- -

Metadata 是一些外部資料，不會被使用者看到。Metadata 記錄了頁面的訊息給其他軟體利用，像是瀏覽器會讀取 metadata 去決定這個頁面應該要使用哪種編碼顯示以避免亂碼。另外，有時候一個網頁的原始碼會被分散的檔案中，所以一個網頁的 Metameta 可以被定義在別份檔案中。

- -

{{HTMLRefTable("HTML Document Metadata")}}

- -

Sectioning root

- -

{{HTMLRefTable("Sectioning Root Element")}}

- -

Content sectioning

- -

Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.

- -

{{HTMLRefTable("HTML Sections")}}

- -

文字內容

- -

使用 HTML 文字內容元素，來組織放在 {{HTMLElement("body")}} 與 </body> 之間的區塊或章節內容。這對 {{Glossary("Accessibility")}} 與 {{Glossary("SEO")}} 至關重要。這些元素確立了內容的目的或結構。

- -

{{HTMLRefTable("HTML Grouping Content")}}

- -

行內文字語義化

- -

Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.

- -

{{HTMLRefTable("HTML Text-Level Semantics")}}

- -

圖片與多媒體

- -

HTML supports various multimedia resources such as images, audio, and video.

- -

{{HTMLRefTable("multimedia")}}

- -

嵌入內容

- -

In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with.

- -

{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}}

- -

腳本

- -

In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability.

- -

{{HTMLRefTable("HTML Scripting")}}

- -

Demarcating edits

- -

These elements let you provide indications that specific parts of the text have been altered.

- -

{{HTMLRefTable("HTML Edits")}}

- -

表格

- -

The elements here are used to create and handle tabular data.

- -

{{HTMLRefTable("HTML tabular data")}}

- -

表單

- -

HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the HTML forms guide.

- -

{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}}

- -

互動元素

- -

HTML offers a selection of elements which help to create interactive user interface objects.

- -

{{HTMLRefTable("HTML interactive elements")}}

- -

Web Components

- -

Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements.

- -

{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}}

- -

過時與棄用的元素

- -
-

Warning: These are old HTML elements which are deprecated and should not be used. You should never use them in new projects, and should replace them in old projects as soon as you can. They are listed here for informational purposes only.

-
- -

{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}}

diff --git a/files/zh-tw/web/html/element/index.md b/files/zh-tw/web/html/element/index.md new file mode 100644 index 00000000000000..e467a610d7f3ec --- /dev/null +++ b/files/zh-tw/web/html/element/index.md @@ -0,0 +1,102 @@ +--- +title: HTML 元素 +slug: Web/HTML/Element +tags: + - Basic + - Element + - HTML + - Reference + - Web +translation_of: Web/HTML/Element +--- +{{HTMLSidebar("Elements")}} + +本頁列出了所有 {{Glossary("HTML")}} 元素（{{Glossary("Element")}}），他們可以透過標籤（{{Glossary("Tags", "tags")}}）建立。這些元素會以功能來分組，讓你更容易尋找。在本頁及每一個元素的頁面的側邊欄都提供了以英文字母排序的所有元素清單。 + +> **備註：** 更多關於基本 HTML 元素及屬性（attribute）可參考[HTML 介紹一文中的元素小節](/zh-TW/docs/Web/Guide/HTML/Introduction#Elements_—_the_basic_building_blocks)。 + +## 主要根元素 + +{{HTMLRefTable("HTML Root Element")}} + +## 文件詮釋資料（metadata） + +Metadata 是一些外部資料，不會被使用者看到。Metadata 記錄了頁面的訊息給其他軟體利用，像是瀏覽器會讀取 metadata 去決定這個頁面應該要使用哪種編碼顯示以避免亂碼。另外，有時候一個網頁的原始碼會被分散的檔案中，所以一個網頁的 Metameta 可以被定義在別份檔案中。 + +{{HTMLRefTable("HTML Document Metadata")}} + +## Sectioning root + +{{HTMLRefTable("Sectioning Root Element")}} + +## Content sectioning + +Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content. + +{{HTMLRefTable("HTML Sections")}} + +## 文字內容 + +使用 HTML 文字內容元素，來組織放在 {{HTMLElement("body")}} 與 `` 之間的區塊或章節內容。這對 {{Glossary("Accessibility")}} 與 {{Glossary("SEO")}} 至關重要。這些元素確立了內容的目的或結構。 + +{{HTMLRefTable("HTML Grouping Content")}} + +## 行內文字語義化 + +Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text. + +{{HTMLRefTable("HTML Text-Level Semantics")}} + +## 圖片與多媒體 + +HTML supports various multimedia resources such as images, audio, and video. + +{{HTMLRefTable("multimedia")}} + +## 嵌入內容 + +In addition to regular multimedia content, HTML can include a variety of other content, even if it's not always easy to interact with. + +{{HTMLRefTable({"include":["HTML embedded content"], "exclude":["multimedia"]})}} + +## 腳本 + +In order to create dynamic content and Web applications, HTML supports the use of scripting languages, most prominently JavaScript. Certain elements support this capability. + +{{HTMLRefTable("HTML Scripting")}} + +## Demarcating edits + +These elements let you provide indications that specific parts of the text have been altered. + +{{HTMLRefTable("HTML Edits")}} + +## 表格 + +The elements here are used to create and handle tabular data. + +{{HTMLRefTable("HTML tabular data")}} + +## 表單 + +HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the [HTML forms guide](/zh-TW/docs/WebLearn/Guide/HTML/Forms). + +{{HTMLRefTable({"include": ["HTML forms"], "exclude":["Deprecated"]})}} + +## 互動元素 + +HTML offers a selection of elements which help to create interactive user interface objects. + +{{HTMLRefTable("HTML interactive elements")}} + +## Web Components + +Web Components is an HTML-related technology which makes it possible to, essentially, create and use custom elements as if it were regular HTML. In addition, you can create custom versions of standard HTML elements. + +{{HTMLRefTable({"include":["Web Components"],"elements":["shadow"]})}} + +## 過時與棄用的元素 + +> **警告：** These are old HTML elements which are deprecated and should not be used. **You should never use them in new projects, and should replace them in old projects as soon as you can.** They are listed here for informational purposes only. + +{{HTMLRefTable({"include":["Deprecated","Obsolete"]})}} diff --git a/files/zh-tw/web/html/element/input/index.html b/files/zh-tw/web/html/element/input/index.html deleted file mode 100644 index ff1f0dbe0da8eb..00000000000000 --- a/files/zh-tw/web/html/element/input/index.html +++ /dev/null @@ -1,416 +0,0 @@ ---- -title: -slug: Web/HTML/Element/input -tags: - - Element - - Forms - - HTML - - HTML forms - - HTML input tag - - MakeBrowserAgnostic - - NeedsBrowserCompatibility - - NeedsMobileBrowserCompatibility - - NeedsTranslation - - Reference - - TopicStub - - Web -translation_of: Web/HTML/Element/input ---- -
{{HTMLRef}}
- -

The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user.

- -

Live example

- -

To get an idea of how different the various <input> types look, try editing the value of the type attributes in the following editable live example; you'll see the output update as you type. In each case, the initial value (text) produces a basic text input, but you can try other values such as number, color, checkbox, radio, date, file, month, password, range, or time.

- -

{{EmbedGHLiveSample("learning-area/html/forms/editable-input-example/editable_input.html", '100%', 230)}}

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Content categoriesFlow content, listed, submittable, resettable, form-associated element, phrasing content. If the {{htmlattrxref("type", "input")}} is not hidden, then labellable element, palpable content.
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionMust have a start tag and must not have an end tag.
Permitted parentsAny element that accepts phrasing content.
Permitted ARIA roles -
    -
  • type=button: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}, {{ARIARole("tab")}}
    • -
  • type=checkbox: {{ARIARole("button")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("option")}}, {{ARIARole("switch")}}
    • -
  • type=image: {{ARIARole("link")}}, {{ARIARole("menuitem")}}, {{ARIARole("menuitemcheckbox")}}, {{ARIARole("menuitemradio")}}, {{ARIARole("radio")}}, {{ARIARole("switch")}}
    • -
  • type=radio: {{ARIARole("menuitemradio")}}
    • -
  • type=color|date|datetime|datetime-local|email|file: None
    • -
  • type=hidden|month|number|password|range|research: None
    • -
  • type=search|submit|tel|text|url|week: None
    • -
-
DOM interface{{domxref("HTMLInputElement")}}
- -

Form <input> types

- -

How an <input> works varies considerably depending on the value of its type attribute, hence the different types are covered in their own separate reference pages. If this attributes is not specified, the default type adopted type is text.

- -

The available types are as follows:

- -
    -
  • button: A push button with no default behavior.
    • -
  • checkbox: A check box allowing single values to be selected/deselected.
    • -
  • color: A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (more info).
    • -
  • date: A control for entering a date (year, month, and day, with no time).
    • -
  • datetime-local: A control for entering a date and time, with no time zone.
    • -
  • email: A field for editing an e-mail address.
    • -
  • file: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
    • -
  • hidden: A control that is not displayed but whose value is submitted to the server.
    • -
  • image: A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.
    • -
  • month: A control for entering a month and year, with no time zone.
    • -
  • number: A control for entering a number.
    • -
  • password: A single-line text field whose value is obscured. Use the maxlength attribute to specify the maximum length of the value that can be entered. -
    Note: Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see Insecure passwords. Other browsers are also implementing similar mechanisms.
    -
    • -
  • radio: A radio button, allowing a single value to be selected out of multiple choices.
    • -
  • range: A control for entering a number whose exact value is not important.
    • -
  • reset: A button that resets the contents of the form to default values.
    • -
  • search: A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.
    • -
  • submit: A button that submits the form.
    • -
  • tel: A control for entering a telephone number. Line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as pattern and maxlength to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.
    • -
  • text: A single-line text field. Line-breaks are automatically removed from the input value.
    • -
  • time: A control for entering a time value with no time zone.
    • -
  • url: A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. You can use attributes such as pattern and maxlength to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate.
    • -
  • week: A control for entering a date consisting of a week-year number and a week number with no time zone.
    • -
- -

Some input types are now obsolete:

- -
    -
  • datetime: {{deprecated_inline}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. This feature has been removed from WHATWG HTML.
    • -
- -

Attributes

- -

Global <input> attributes

- -

This section lists the attributes available to all form <input> types. Non-global attributes — and global attributes that behave differently when specified on different <input> types — are listed on those types' individual pages.

- -
-

Note: This includes the global HTML attributes.

-
- -
-
{{htmlattrdef("type")}}
-
The type of control to render. See Form <input> types for the individual types, with links to more information about each.
-
{{htmlattrdef("accept")}}
-
If the value of the type attribute is file, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers: -
    -
  • A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc).
    • -
  • A valid MIME type with no extensions.
    • -
  • audio/* representing sound files.
    • -
  • video/* representing video files.
    • -
  • image/* representing image files.
    • -
-
-
{{htmlattrdef("accesskey")}} {{Deprecated_Inline}}
-
A single-character that the user can press to switch input focus to the control. This attribute is global in HTML5.
-
{{htmlattrdef("autocomplete")}}
-
This attribute indicates whether the value of the control can be automatically completed by the browser.
-
Possible values are: -
    -
  • off: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method. The browser does not automatically complete the entry.
    • -
  • on: The browser is allowed to automatically complete the value based on values that the user has entered during previous uses, however on does not provide any further information about what kind of data the user might be expected to enter.
    • -
  • name: Full name.
    • -
  • honorific-prefix: Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle").
    • -
  • given-name: First name.
    • -
  • additional-name: Middle name.
    • -
  • family-name: Last name.
    • -
  • honorific-suffix: Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II").
    • -
  • nickname
    • -
  • email
    • -
  • username
    • -
  • new-password: A new password (e.g. when creating an account or changing a password).
    • -
  • current-password
    • -
  • organization-title: Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director").
    • -
  • organization
    • -
  • street-address
    • -
  • address-line1, address-line2, address-line3, address-level4, address-level3, address-level2, address-level1
    • -
  • country
    • -
  • country-name
    • -
  • postal-code
    • -
  • cc-name: Full name as given on the payment instrument.
    • -
  • cc-given-name
    • -
  • cc-additional-name
    • -
  • cc-family-name
    • -
  • cc-number: Code identifying the payment instrument (e.g. the credit card number).
    • -
  • cc-exp: Expiration date of the payment instrument.
    • -
  • cc-exp-month
    • -
  • cc-exp-year
    • -
  • cc-csc: Security code for the payment instrument.
    • -
  • cc-type: Type of payment instrument (e.g. Visa).
    • -
  • transaction-currency
    • -
  • transaction-amount
    • -
  • language: Preferred language; a valid BCP 47 language tag.
    • -
  • bday: birthday
    • -
  • bday-day
    • -
  • bday-month
    • -
  • bday-year
    • -
  • sex: Gender identity (e.g. Female, Fa'afafine), free-form text, no newlines.
    • -
  • tel: full telephone number, including country code -
      -
    • additional tel variants: tel-country-code, tel-national, tel-area-code, tel-local, tel-local-prefix, tel-local-suffix, tel-extension
      • -
    -
    • -
  • url: Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field.
    • -
  • photo: Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field.
    • -
- -

See the WHATWG Standard for more detailed information.

- -

If the autocomplete attribute is not specified on an input element then the browser uses the autocomplete attribute value of the <input> element's form owner. The form owner is either the form element that this <input> element is a descendant of or the form element whose id is specified by the form attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.

- -

The autocomplete attribute also controls whether Firefox will, unlike other browsers, persist the dynamic disabled state and (if applicable) dynamic checkedness of an <input> across page loads. The persistence feature is enabled by default. Setting the value of the autocomplete attribute to off disables this feature. This works even when the autocomplete attribute would normally not apply to the <input> by virtue of its type. See {{bug(654072)}}.

- -

For most modern browsers (including Firefox 38+, Google Chrome 34+, IE 11+), setting the autocomplete attribute will not prevent a browser's password manager from asking the user if they want to store login (username and password) fields and, if they agree, from autofilling the login the next time the user visits the page. See the autocomplete attribute and login fields.

-
-
{{htmlattrdef("autofocus")}}
-
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control). Note that the focusing of the control may occur before the firing of the DOMContentLoaded event.
-
{{htmlattrdef("capture")}}
-
-

When the value of the type attribute is file, the presence of this Boolean attribute indicates that capture of media directly from the device's environment using a media capture mechanism is preferred.

-
-
{{htmlattrdef("checked")}}
-
-

When the value of the type attribute is radio or checkbox, the presence of this Boolean attribute indicates that the control is selected by default, otherwise it is ignored.

- -

Unlike other browsers, Firefox will by default persist the dynamic checked state of an <input> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.

-
-
{{htmlattrdef("disabled")}}
-
-

This Boolean attribute indicates that the form control is not available for interaction. In particular, the click event will not be dispatched on disabled controls. Also, a disabled control's value isn't submitted with the form.

- -

Unlike other browsers, Firefox will by default persist the dynamic disabled state of an <input> across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature.

-
-
{{htmlattrdef("form")}}
-
The form element that the input element is associated with (its form owner). The value of the attribute must be an id of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this <input> element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place <input> elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form.
-
{{htmlattrdef("formaction")}}
-
The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner.
-
{{htmlattrdef("formenctype")}}
-
If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: -
    -
  • application/x-www-form-urlencoded: The default value if the attribute is not specified.
    • -
  • multipart/form-data: Use this value if you are using an <input> element with the {{htmlattrxref("type","input")}} attribute set to file.
    • -
  • text/plain
    • -
- -

If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formmethod")}}
-
If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: -
    -
  • post: The data from the form is included in the body of the form and is sent to the server.
    • -
  • get: The data from the form are appended to the form attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.
    • -
- -

If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner.

-
-
{{htmlattrdef("formnovalidate")}}
-
If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner.
-
{{htmlattrdef("formtarget")}}
-
If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (e.g. tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: -
    -
  • _self: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
    • -
  • _blank: Load the response into a new unnamed browsing context.
    • -
  • _parent: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as _self.
    • -
  • _top: Load the response into the top-level browsing context (i.e. the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as _self.
    • -
-
-
{{htmlattrdef("height")}}
-
If the value of the type attribute is image, this attribute defines the height of the image displayed for the button.
-
{{htmlattrdef("inputmode")}}
-
A hint to the browser for which keyboard to display. This attribute applies when the value of the type attribute is text, password, email, or url. Possible values are: -
    -
  • verbatim: Alphanumeric, non-prose content such as usernames and passwords.
    • -
  • latin: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes.
    • -
  • latin-name: As latin, but for human names.
    • -
  • latin-prose: As latin, but with more aggressive typing aids. For human-to-human communication such as instant messaging or email.
    • -
  • full-width-latin: As latin-prose, but for the user's secondary languages.
    • -
  • kana: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • -
  • katakana: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input.
    • -
  • numeric: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes (e.g. credit card numbers). For actual numbers, prefer using <input type="number">
    • -
  • tel: Telephone input, including asterisk and pound key. Use <input type="tel"> if possible instead.
    • -
  • email: Email input. Use <input type="email"> if possible instead.
    • -
  • url: URL input. Use <input type="url"> if possible instead.
    • -
-
-
{{htmlattrdef("list")}}
-
Identifies a list of pre-defined options to suggest to the user. The value must be the id of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the type attribute's value is hidden, checkbox, radio, file, or a button type.
-
{{htmlattrdef("max")}}
-
The maximum (numeric or date-time) value for this item, which must not be less than its minimum (min attribute) value.
-
{{htmlattrdef("maxlength")}}
-
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the size attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed.
-
{{htmlattrdef("min")}}
-
The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (max attribute) value.
-
{{htmlattrdef("minlength")}}
-
If the value of the type attribute is text, email, search, password, tel, or url, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored.
-
{{htmlattrdef("multiple")}}
-
This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the type attribute is set to email or file, otherwise it is ignored.
-
{{htmlattrdef("name")}}
-
The name of the control, which is submitted with the form data.
-
{{htmlattrdef("pattern")}}
-
A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the title attribute to describe the pattern to help the user. This attribute applies when the value of the type attribute is text, search, tel, url, email, or password, otherwise it is ignored. The regular expression language is the same as JavaScript {{jsxref("RegExp")}} algorithm, with the 'u' parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes.
-
{{htmlattrdef("placeholder")}}
-
A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. -
Note: Do not use the placeholder attribute instead of a {{HTMLElement("label")}} element, their purposes are different. The {{HTMLElement("label")}} attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the placeholder attribute is a hint about the format that the content should take. There are cases in which the placeholder attribute is never displayed to the user, so the form must be understandable without it.
-
-
{{htmlattrdef("readonly")}}
-
This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant. If you need read-write access to the input value, do not add the "readonly" attribute. It is ignored if the value of the type attribute is hidden, range, color, checkbox, radio, file, or a button type (such as button or submit).
-
{{htmlattrdef("required")}}
-
This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the type attribute is hidden, image, or a button type (submit, reset, or button). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate.
-
{{htmlattrdef("selectionDirection")}}
-
The direction in which selection occurred. This is "forward" if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or "backward" if the selection was made in the opposite direction. On platforms on which it's possible this value isn't known, the value can be "none"; for example, on macOS, the default direction is "none", then as the user begins to modify the selection using the keyboard, this will change to reflect the direction in which the selection is expanding.
-
{{htmlattrdef("selectionEnd")}}
-
The offset into the element's text content of the last selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).
-
{{htmlattrdef("selectionStart")}}
-
The offset into the element's text content of the first selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy).
-
{{htmlattrdef("size")}}
-
The initial size of the control. This value is in pixels unless the value of the type attribute is text or password, in which case it is an integer number of characters. Starting in HTML5, this attribute applies only when the type attribute is set to text, search, tel, url, email, or password, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used. HTML5 simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with x characters will not be entirely visible even if size is defined to at least x.
-
{{htmlattrdef("spellcheck")}}
-
Setting the value of this attribute to true indicates that the element needs to have its spelling and grammar checked. The value default indicates that the element is to act according to a default behavior, possibly based on the parent element's own spellcheck value. The value false indicates that the element should not be checked.
-
{{htmlattrdef("src")}}
-
If the value of the type attribute is image, this attribute specifies a URI for the location of an image to display on the graphical submit button, otherwise it is ignored.
-
{{htmlattrdef("step")}}
-
Works with the min and max attributes to limit the increments at which a numeric or date-time value can be set. It can be the string any or a positive floating point number. If this attribute is not set to any, the control accepts only values at multiples of the step value greater than the minimum.
-
{{htmlattrdef("tabindex")}}
-
The position of the element in the tabbing navigation order for the current document.
-
{{htmlattrdef("usemap")}} {{Deprecated_Inline}}
-
The name of a {{HTMLElement("map")}} element to be used as an image map.
-
{{htmlattrdef("value")}}
-
The initial value of the control. This attribute is optional except when the value of the type attribute is radio or checkbox.
- Note that when reloading the page, Gecko and IE will ignore the value specified in the HTML source, if the value was changed before the reload.
-
{{htmlattrdef("width")}}
-
If the value of the type attribute is image, this attribute defines the width of the image displayed for the button.
-
- -

Non-standard <input> attributes

- -
-
{{htmlattrdef("autocapitalize")}} {{non-standard_inline}}
-
This is a nonstandard attribute used by Chrome and iOS Safari Mobile, which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are: -
    -
  • none: Completely disables automatic capitalisation.
    • -
  • sentences: Automatically capitalise the first letter of sentences.
    • -
  • words: Automatically capitalise the first letter of words.
    • -
  • characters: Automatically capitalise all characters.
    • -
  • on: {{deprecated_inline}} Deprecated since iOS 5.
    • -
  • off: {{deprecated_inline}} Deprecated since iOS 5.
    • -
- autocapitalize documentation in the Safari HTML Reference.
-
{{htmlattrdef("autocorrect")}} {{non-standard_inline}}
-
This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the <input>. Possible attribute values are: -
    -
  • on: Enable autocorrection.
    • -
  • off: Disable autocorrection.
    • -
- autocorrect documentation in the Safari HTML Reference.
-
{{htmlattrdef("incremental")}} {{non-standard_inline}}
-
This is a nonstandard attribute supported by WebKit (Safari) and Blink (Chrome) that only applies when the type is search. If the attribute is present, regardless of what its value is, the <input> fires search events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the search event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field). incremental documentation in the Safari HTML Reference
-
{{htmlattrdef("mozactionhint")}} {{non-standard_inline}}
-
Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are go, done, next, search, and send. These automatically get mapped to the appropriate string and are case-insensitive.
-
{{htmlattrdef("results")}} {{non-standard_inline}}
-
This is a nonstandard attribute supported by Safari that only applies when the type is search. It is used to control the maximum number of entries that should be displayed in the <input>'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer.
-
{{htmlattrdef("webkitdirectory")}} {{non-standard_inline}}
-
This Boolean attribute indicates if the selector used when the type attribute is file has to allow for the selection of directories only.
-
{{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}}
-
This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate.
-
- -

Examples

- -

You can find multiple examples of <input> element usage on the pages covering each individual type — see Form <input> types, and also see the Live example at the top of the article.

- -
    -
- -

Specifications

- -{{Specifications}} - -

Browser compatibility

- -{{Compat("html.elements.input")}} - -

Notes

- -

File inputs

- -
    -
  1. -

    Starting in {{Gecko("2.0")}}, calling the click() method on an <input> element of type file opens the file picker and lets the user select files. See Using files from web applications for an example and more details.

    -
    2. -
  2. -

    You cannot set the value of a file picker from a script — doing something like the following has no effect:

    - - 
    var e = getElementById("someFileInputElement");
-e.value = "foo";
-
    -
    3. -
  3. -

    When a file is chosen using an <input type="file">, the real path to the source file is not shown in the input's value attribute for obvious security reasons. Instead, the filename is shown, with C:\fakepath\ appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is defined in the spec.

    -
    4. -
- -

Error messages

- -

If you want Firefox to present a custom error message when a field fails to validate, you can use the x-moz-errormessage attribute to do so:

- -
<input type="email"
- x-moz-errormessage="Please specify a valid email address.">
-
- -

Note, however, that this is not standard and will not have an effect on other browsers.

- -

Localization

- -

The allowed inputs for certain <input> types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00.

- -

Firefox uses the following heuristics to determine the locale to validate the user's input (at least for type="number"):

- -
    -
  • Try the language specified by a lang/xml:lang attribute on the element or any of its parents.
    • -
  • Try the language specified by any Content-Language HTTP header or
    • -
  • If none specified, use the browser's locale.
    • -
- -

Using mozactionhint on Firefox mobile

- -

You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this:

- -
<input type="text" mozactionhint="next">
-
- -

The result is:

- -

mozactionhint.png

- -

See also

- -
    -
  • Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}.
    • -
  • Cross-browser HTML5 placeholder text
    • -
diff --git a/files/zh-tw/web/html/element/input/index.md b/files/zh-tw/web/html/element/input/index.md new file mode 100644 index 00000000000000..6fa5d881b58de7 --- /dev/null +++ b/files/zh-tw/web/html/element/input/index.md @@ -0,0 +1,382 @@ +--- +title: +slug: Web/HTML/Element/input +tags: + - Element + - Forms + - HTML + - HTML forms + - HTML input tag + - MakeBrowserAgnostic + - NeedsBrowserCompatibility + - NeedsMobileBrowserCompatibility + - NeedsTranslation + - Reference + - TopicStub + - Web +translation_of: Web/HTML/Element/input +--- +{{HTMLRef}} + +The **HTML `` element** is used to create interactive controls for web-based forms in order to accept data from the user. + +## Live example + +To get an idea of how different the various `` types look, try editing the value of the `type` attributes in the following editable live example; you'll see the output update as you type. In each case, the initial value (`text`) produces a basic text input, but you can try other values such as `number`, `color`, `checkbox`, `radio`, `date`, `file`, `month`, `password`, `range`, or `time`. + +{{EmbedGHLiveSample("learning-area/html/forms/editable-input-example/editable_input.html", '100%', 230)}} + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ Content categories + + Flow content, listed, submittable, resettable, form-associated element, + phrasing content. If the {{htmlattrxref("type", "input")}} is not + hidden, then labellable element, palpable content. +
Permitted contentNone, it is an {{Glossary("empty element")}}.
Tag omissionMust have a start tag and must not have an end tag.
Permitted parents + Any element that accepts + phrasing content. +
Permitted ARIA roles +
    +
  • + type=button: {{ARIARole("link")}}, + {{ARIARole("menuitem")}}, + {{ARIARole("menuitemcheckbox")}}, + {{ARIARole("menuitemradio")}}, + {{ARIARole("radio")}}, {{ARIARole("switch")}}, + {{ARIARole("tab")}} +
    • +
  • + type=checkbox: {{ARIARole("button")}}, + {{ARIARole("menuitemcheckbox")}}, + {{ARIARole("option")}}, {{ARIARole("switch")}} +
    • +
  • + type=image: {{ARIARole("link")}}, + {{ARIARole("menuitem")}}, + {{ARIARole("menuitemcheckbox")}}, + {{ARIARole("menuitemradio")}}, + {{ARIARole("radio")}}, {{ARIARole("switch")}} +
    • +
  • + type=radio: {{ARIARole("menuitemradio")}} +
    • +
  • + type=color|date|datetime|datetime-local|email|file: + None +
    • +
  • + type=hidden|month|number|password|range|research: None +
    • +
  • type=search|submit|tel|text|url|week: None
    • +
+
DOM interface{{domxref("HTMLInputElement")}}
+ +## Form `` types + +How an `` works varies considerably depending on the value of its `type` attribute, hence the different types are covered in their own separate reference pages. If this attributes is not specified, the default type adopted type is `text`. + +The available types are as follows: + +- [`button`](/en-US/docs/Web/HTML/Element/input/button): A push button with no default behavior. +- [`checkbox`](/en-US/docs/Web/HTML/Element/input/checkbox): A check box allowing single values to be selected/deselected. +- [`color`](/en-US/docs/Web/HTML/Element/input/color): A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text ([more info]()). +- [`date`](/en-US/docs/Web/HTML/Element/input/date): A control for entering a date (year, month, and day, with no time). +- [`datetime-local`](/en-US/docs/Web/HTML/Element/input/datetime-local): A control for entering a date and time, with no time zone. +- [`email`](/en-US/docs/Web/HTML/Element/input/email): A field for editing an e-mail address. +- [`file`](/en-US/docs/Web/HTML/Element/input/file): A control that lets the user select a file. Use the **accept** attribute to define the types of files that the control can select. +- [`hidden`](/en-US/docs/Web/HTML/Element/input/hidden): A control that is not displayed but whose value is submitted to the server. +- [`image`](/en-US/docs/Web/HTML/Element/input/image): A graphical submit button. You must use the **src** attribute to define the source of the image and the **alt** attribute to define alternative text. You can use the **height** and **width** attributes to define the size of the image in pixels. +- [`month`](/en-US/docs/Web/HTML/Element/input/month): A control for entering a month and year, with no time zone. +- [`number`](/en-US/docs/Web/HTML/Element/input/number): A control for entering a number. +- [`password`](/en-US/docs/Web/HTML/Element/input/password): A single-line text field whose value is obscured. Use the **maxlength** attribute to specify the maximum length of the value that can be entered. + + > **備註：** Any forms involving sensitive information like passwords (e.g. login forms) should be served over HTTPS; Firefox now implements multiple mechanisms to warn against insecure login forms — see [Insecure passwords](/zh-TW/docs/Web/Security/Insecure_passwords). Other browsers are also implementing similar mechanisms. + +- [`radio`](/en-US/docs/Web/HTML/Element/input/radio): A radio button, allowing a single value to be selected out of multiple choices. +- [`range`](/en-US/docs/Web/HTML/Element/input/range): A control for entering a number whose exact value is not important. +- [`reset`](/en-US/docs/Web/HTML/Element/input/reset): A button that resets the contents of the form to default values. +- [`search`](/en-US/docs/Web/HTML/Element/input/search): A single-line text field for entering search strings. Line-breaks are automatically removed from the input value. +- [`submit`](/en-US/docs/Web/HTML/Element/input/submit): A button that submits the form. +- [`tel`](/en-US/docs/Web/HTML/Element/input/tel): A control for entering a telephone number. Line-breaks are automatically removed from the input value, but no other syntax is enforced. You can use attributes such as **pattern** and **maxlength** to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate. +- [`text`](/en-US/docs/Web/HTML/Element/input/text): A single-line text field. Line-breaks are automatically removed from the input value. +- [`time`](/en-US/docs/Web/HTML/Element/input/time): A control for entering a time value with no time zone. +- [`url`](/en-US/docs/Web/HTML/Element/input/url): A field for editing a URL. The input value is validated to contain either the empty string or a valid absolute URL before submitting. You can use attributes such as **pattern** and **maxlength** to restrict values entered in the control. The {{cssxref(":valid")}} and {{cssxref(":invalid")}} CSS pseudo-classes are applied as appropriate. +- [`week`](/en-US/docs/Web/HTML/Element/input/week): A control for entering a date consisting of a week-year number and a week number with no time zone. + +Some input types are now obsolete: + +- [`datetime`](/en-US/docs/Web/HTML/Element/input/datetime): {{deprecated_inline}} A control for entering a date and time (hour, minute, second, and fraction of a second) based on UTC time zone. **This feature has been [removed from WHATWG HTML.](https://github.com/whatwg/html/issues/336)** + +## Attributes + +### Global `` attributes + +This section lists the attributes available to all form `` types. Non-global attributes — and global attributes that behave differently when specified on different `` types — are listed on those types' individual pages. + +> **備註：** This includes the [global HTML attributes](/zh-TW/docs/Web/HTML/Global_attributes). + +- {{htmlattrdef("type")}} + - : The type of control to render. See [Form \ types](#form__types) for the individual types, with links to more information about each. +- {{htmlattrdef("accept")}} + - : If the value of the **type** attribute is `file`, then this attribute will indicate the types of files that the server accepts, otherwise it will be ignored. The value must be a comma-separated list of unique content type specifiers: A file extension starting with the STOP character (U+002E). (e.g. .jpg, .png, .doc). + - A valid MIME type with no extensions. + - `audio/*` representing sound files. + - `video/*` representing video files. + - `image/*` representing image files. +- {{htmlattrdef("accesskey")}} {{Deprecated_Inline}} + - : A single-character that the user can press to switch input focus to the control. This attribute is global in HTML5. +- {{htmlattrdef("autocomplete")}} + + - : This attribute indicates whether the value of the control can be automatically completed by the browser. Possible values are: `off`: The user must explicitly enter a value into this field for every use, or the document provides its own auto-completion method. The browser does not automatically complete the entry. + + - `on`: The browser is allowed to automatically complete the value based on values that the user has entered during previous uses, however `on` does not provide any further information about what kind of data the user might be expected to enter. + - `name`: Full name. + - `honorific-prefix: `Prefix or title (e.g. "Mr.", "Ms.", "Dr.", "Mlle"). + - `given-name`: First name. + - `additional-name`: Middle name. + - `family-name`: Last name. + - `honorific-suffix`: Suffix (e.g. "Jr.", "B.Sc.", "MBASW", "II"). + - `nickname` + - `email` + - `username` + - `new-password`: A new password (e.g. when creating an account or changing a password). + - `current-password` + - `organization-title`: Job title (e.g. "Software Engineer", "Senior Vice President", "Deputy Managing Director"). + - `organization` + - `street-address` + - `address-line1`, `address-line2`, `address-line3`, `address-level4`, `address-level3`, `address-level2`, `address-level1` + - `country` + - `country-name` + - `postal-code` + - `cc-name`: Full name as given on the payment instrument. + - `cc-given-name` + - `cc-additional-name` + - `cc-family-name` + - `cc-number`: Code identifying the payment instrument (e.g. the credit card number). + - `cc-exp:` Expiration date of the payment instrument. + - `cc-exp-month` + - `cc-exp-year` + - `cc-csc`: Security code for the payment instrument. + - `cc-type`: Type of payment instrument (e.g. Visa). + - `transaction-currency` + - `transaction-amount` + - `language`: Preferred language; a valid [BCP 47 language tag](https://en.wikipedia.org/wiki/IETF_language_tag). + - `bday`: birthday + - `bday-day` + - `bday-month` + - `bday-year` + - `sex`: Gender identity (e.g. Female, Fa'afafine), free-form text, no newlines. + - `tel`: full telephone number, including country code + + - additional `tel` variants: `tel-country-code`, `tel-national`, `tel-area-code`, `tel-local`, `tel-local-prefix`, `tel-local-suffix`, `tel-extension` + + - `url`: Home page or other Web page corresponding to the company, person, address, or contact information in the other fields associated with this field. + - `photo`: Photograph, icon, or other image corresponding to the company, person, address, or contact information in the other fields associated with this field.See the [WHATWG Standard](https://html.spec.whatwg.org/multipage/forms.html#autofill) for more detailed information.If the **autocomplete** attribute is not specified on an input element then the browser uses the **autocomplete** attribute value of the `` element's form owner. The form owner is either the `form` element that this `` element is a descendant of or the form element whose **id** is specified by the **form** attribute of the input element. For more information, see the {{htmlattrxref("autocomplete", "form")}} attribute in {{HTMLElement("form")}}.The **autocomplete** attribute also controls whether Firefox will, unlike other browsers, [persist the dynamic disabled state and (if applicable) dynamic checkedness](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of an `` across page loads. The persistence feature is enabled by default. Setting the value of the **autocomplete** attribute to `off` disables this feature. This works even when the **autocomplete** attribute would normally not apply to the `` by virtue of its **type**. See {{bug(654072)}}.For most modern browsers (including Firefox 38+, Google Chrome 34+, IE 11+), setting the **autocomplete** attribute will _not_ prevent a browser's password manager from asking the user if they want to store login (username and password) fields and, if they agree, from autofilling the login the next time the user visits the page. See [the autocomplete attribute and login fields](/zh-TW/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion#The_autocomplete_attribute_and_login_fields). + +- {{htmlattrdef("autofocus")}} + - : This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one form element in a document can have the **autofocus** attribute, which is a Boolean. It cannot be applied if the **type** attribute is set to `hidden` (that is, you cannot automatically set focus to a hidden control). Note that the focusing of the control may occur before the firing of the [`DOMContentLoaded` event.](/zh-TW/docs/Web/Events/DOMContentLoaded) +- {{htmlattrdef("capture")}} + - : When the value of the **type** attribute is `file`, the presence of this Boolean attribute indicates that capture of media directly from the device's environment using a [media capture mechanism](https://www.w3.org/TR/html-media-capture/#dfn-media-capture-mechanism) is preferred. +- {{htmlattrdef("checked")}} + - : When the value of the **type** attribute is `radio` or `checkbox`, the presence of this Boolean attribute indicates that the control is selected by default, otherwise it is ignored.Unlike other browsers, Firefox will by default [persist the dynamic checked state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of an `` across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature. +- {{htmlattrdef("disabled")}} + - : This Boolean attribute indicates that the form control is not available for interaction. In particular, the `click` event [will not be dispatched](https://html.spec.whatwg.org/multipage/forms.html#enabling-and-disabling-form-controls:-the-disabled-attribute) on disabled controls. Also, a disabled control's value isn't submitted with the form.Unlike other browsers, Firefox will by default [persist the dynamic disabled state](https://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing) of an `` across page loads. Use the {{htmlattrxref("autocomplete","input")}} attribute to control this feature. +- {{htmlattrdef("form")}} + - : The form element that the input element is associated with (its _form owner_). The value of the attribute must be an **id** of a {{HTMLElement("form")}} element in the same document. If this attribute is not specified, this `` element must be a descendant of a {{HTMLElement("form")}} element. This attribute enables you to place `` elements anywhere within a document, not just as descendants of their form elements. An input can only be associated with one form. +- {{htmlattrdef("formaction")}} + - : The URI of a program that processes the information submitted by the input element, if it is a submit button or image. If specified, it overrides the {{htmlattrxref("action","form")}} attribute of the element's form owner. +- {{htmlattrdef("formenctype")}} + - : If the input element is a submit button or image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are: `application/x-www-form-urlencoded`: The default value if the attribute is not specified. + - `multipart/form-data`: Use this value if you are using an `` element with the {{htmlattrxref("type","input")}} attribute set to `file`. + - `text/plain`If this attribute is specified, it overrides the {{htmlattrxref("enctype","form")}} attribute of the element's form owner. +- {{htmlattrdef("formmethod")}} + - : If the input element is a submit button or image, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: `post`: The data from the form is included in the body of the form and is sent to the server. + - `get`: The data from the form are appended to the **form** attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.If specified, this attribute overrides the {{htmlattrxref("method","form")}} attribute of the element's form owner. +- {{htmlattrdef("formnovalidate")}} + - : If the input element is a submit button or image, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the {{htmlattrxref("novalidate","form")}} attribute of the element's form owner. +- {{htmlattrdef("formtarget")}} + - : If the input element is a submit button or image, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a _browsing context_ (e.g. tab, window, or inline frame). If this attribute is specified, it overrides the {{htmlattrxref("target", "form")}} attribute of the elements's form owner. The following keywords have special meanings: `_self`: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified. + - `_blank`: Load the response into a new unnamed browsing context. + - `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`. + - `_top`: Load the response into the top-level browsing context (i.e. the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`. +- {{htmlattrdef("height")}} + - : If the value of the **type** attribute is `image`, this attribute defines the height of the image displayed for the button. +- {{htmlattrdef("inputmode")}} + - : A hint to the browser for which keyboard to display. This attribute applies when the value of the **type** attribute is text, password, email, or url. Possible values are: `verbatim`: Alphanumeric, non-prose content such as usernames and passwords. + - `latin`: Latin-script input in the user's preferred language with typing aids such as text prediction enabled. For human-to-computer communication such as search boxes. + - `latin-name`: As _latin_, but for human names. + - `latin-prose`: As _latin_, but with more aggressive typing aids. For human-to-human communication such as instant messaging or email. + - `full-width-latin`: As _latin-prose_, but for the user's secondary languages. + - `kana`: Kana or romaji input, typically hiragana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input. + - `katakana`: Katakana input, using full-width characters, with support for converting to kanji. Intended for Japanese text input. + - `numeric`: Numeric input, including keys for the digits 0 to 9, the user's preferred thousands separator character, and the character for indicating negative numbers. Intended for numeric codes (e.g. credit card numbers). For actual numbers, prefer using \ + - `tel`: Telephone input, including asterisk and pound key. Use \ if possible instead. + - `email`: Email input. Use \ if possible instead. + - `url`: URL input. Use \ if possible instead. +- {{htmlattrdef("list")}} + - : Identifies a list of pre-defined options to suggest to the user. The value must be the **id** of a {{HTMLElement("datalist")}} element in the same document. The browser displays only options that are valid values for this input element. This attribute is ignored when the **type** attribute's value is `hidden`, `checkbox`, `radio`, `file`, or a button type. +- {{htmlattrdef("max")}} + - : The maximum (numeric or date-time) value for this item, which must not be less than its minimum (**min** attribute) value. +- {{htmlattrdef("maxlength")}} + - : If the value of the **type** attribute is `text`, `email`,` search`, `password`, `tel`, or `url`, this attribute specifies the maximum number of characters (in UTF-16 code units) that the user can enter. For other control types, it is ignored. It can exceed the value of the **size** attribute. If it is not specified, the user can enter an unlimited number of characters. Specifying a negative number results in the default behavior (i.e. the user can enter an unlimited number of characters). The constraint is evaluated only when the value of the attribute has been changed. +- {{htmlattrdef("min")}} + - : The minimum (numeric or date-time) value for this item, which must not be greater than its maximum (**max** attribute) value. +- {{htmlattrdef("minlength")}} + - : If the value of the **type** attribute is `text`, `email`,` search`, `password`, `tel`, or `url`, this attribute specifies the minimum number of characters (in Unicode code points) that the user can enter. For other control types, it is ignored. +- {{htmlattrdef("multiple")}} + - : This Boolean attribute indicates whether the user can enter more than one value. This attribute applies when the **type** attribute is set to `email` or `file`, otherwise it is ignored. +- {{htmlattrdef("name")}} + - : The name of the control, which is submitted with the form data. +- {{htmlattrdef("pattern")}} + - : A regular expression that the control's value is checked against. The pattern must match the entire value, not just some subset. Use the **title** attribute to describe the pattern to help the user. This attribute applies when the value of the **type** attribute is `text`, `search`, `tel`, `url`, `email`, or `password`, otherwise it is ignored. The regular expression language is the same as JavaScript {{jsxref("RegExp")}} algorithm, with the `'u'` parameter that makes it treat the pattern as a sequence of unicode code points. The pattern is not surrounded by forward slashes. +- {{htmlattrdef("placeholder")}} + - : A hint to the user of what can be entered in the control . The placeholder text must not contain carriage returns or line-feeds. + + > **備註：** Do not use the `placeholder` attribute instead of a {{HTMLElement("label")}} element, their purposes are different. The {{HTMLElement("label")}} attribute describes the role of the form element (i.e. it indicates what kind of information is expected), and the `placeholder` attribute is a hint about the format that the content should take. There are cases in which the `placeholder` attribute is never displayed to the user, so the form must be understandable without it. +- {{htmlattrdef("readonly")}} + - : This attribute indicates that the user cannot modify the value of the control. The value of the attribute is irrelevant. If you need read-write access to the input value, _do not_ add the "**readonly**" attribute. It is ignored if the value of the **type** attribute is `hidden`, `range`, `color`, `checkbox`, `radio`, `file`, or a button type (such as `button` or `submit`). +- {{htmlattrdef("required")}} + - : This attribute specifies that the user must fill in a value before submitting a form. It cannot be used when the **type** attribute is `hidden`, `image`, or a button type (`submit`, `reset`, or `button`). The {{cssxref(":optional")}} and {{cssxref(":required")}} CSS pseudo-classes will be applied to the field as appropriate. +- {{htmlattrdef("selectionDirection")}} + - : The direction in which selection occurred. This is `"forward"` if the selection was made from left-to-right in an LTR locale or right-to-left in an RTL locale, or `"backward"` if the selection was made in the opposite direction. On platforms on which it's possible this value isn't known, the value can be `"none"`; for example, on macOS, the default direction is `"none"`, then as the user begins to modify the selection using the keyboard, this will change to reflect the direction in which the selection is expanding. +- {{htmlattrdef("selectionEnd")}} + - : The offset into the element's text content of the last selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy). +- {{htmlattrdef("selectionStart")}} + - : The offset into the element's text content of the first selected character. If there's no selection, this value indicates the offset to the character following the current text input cursor position (that is, the position the next character typed would occupy). +- {{htmlattrdef("size")}} + - : The initial size of the control. This value is in pixels unless the value of the **type** attribute is `text` or `password`, in which case it is an integer number of characters. Starting in HTML5, this attribute applies only when the **type** attribute is set to `text`, `search`, `tel`, `url`, `email`, or `password`, otherwise it is ignored. In addition, the size must be greater than zero. If you do not specify a size, a default value of 20 is used. HTML5 simply states "the user agent should ensure that at least that many characters are visible", but different characters can have different widths in certain fonts. In some browsers, a certain string with _x_ characters will not be entirely visible even if size is defined to at least _x_. +- {{htmlattrdef("spellcheck")}} + - : Setting the value of this attribute to `true` indicates that the element needs to have its spelling and grammar checked. The value `default` indicates that the element is to act according to a default behavior, possibly based on the parent element's own `spellcheck` value. The value `false` indicates that the element should not be checked. +- {{htmlattrdef("src")}} + - : If the value of the **type** attribute is `image`, this attribute specifies a URI for the location of an image to display on the graphical submit button, otherwise it is ignored. +- {{htmlattrdef("step")}} + - : Works with the **min** and **max** attributes to limit the increments at which a numeric or date-time value can be set. It can be the string `any` or a positive floating point number. If this attribute is not set to `any`, the control accepts only values at multiples of the step value greater than the minimum. +- {{htmlattrdef("tabindex")}} + - : The position of the element in the tabbing navigation order for the current document. +- {{htmlattrdef("usemap")}} {{Deprecated_Inline}} + - : The name of a {{HTMLElement("map")}} element to be used as an image map. +- {{htmlattrdef("value")}} + - : The initial value of the control. This attribute is optional except when the value of the **type** attribute is `radio` or `checkbox`. + Note that when reloading the page, Gecko and IE [will ignore the value specified in the HTML source](https://bugzilla.mozilla.org/show_bug.cgi?id=46845#c186), if the value was changed before the reload. +- {{htmlattrdef("width")}} + - : If the value of the **type** attribute is `image`, this attribute defines the width of the image displayed for the button. + +### Non-standard `` attributes + +- {{htmlattrdef("autocapitalize")}} {{non-standard_inline}} + - : This is a nonstandard attribute used [by Chrome](https://developers.google.com/web/updates/2015/04/autocapitalize) and iOS Safari Mobile, which controls whether and how the text value should be automatically capitalized as it is entered/edited by the user. The non-deprecated values are available in iOS 5 and later. Possible values are: `none`: Completely disables automatic capitalisation. + - `sentences`: Automatically capitalise the first letter of sentences. + - `words`: Automatically capitalise the first letter of words. + - `characters`: Automatically capitalise all characters. + - `on`: {{deprecated_inline}} Deprecated since iOS 5. + - `off`: {{deprecated_inline}} Deprecated since iOS 5.[`autocapitalize` documentation](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocapitalize) in the Safari HTML Reference. +- {{htmlattrdef("autocorrect")}} {{non-standard_inline}} + - : This is a non-standard attribute supported by Safari that is used to control whether autocorrection should be enabled when the user is entering/editing the text value of the ``. Possible attribute values are: `on`: Enable autocorrection. + - `off`: Disable autocorrection.[`autocorrect` documentation](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-autocorrect) in the Safari HTML Reference. +- {{htmlattrdef("incremental")}} {{non-standard_inline}} + - : This is a nonstandard attribute supported by WebKit (Safari) and Blink (Chrome) that only applies when the **type** is `search`. If the attribute is present, regardless of what its value is, the `` fires [`search`](/zh-TW/docs/Web/Events/search) events as the user edits the text value. The event is only fired after an implementation-defined timeout has elapsed since the most recent keystroke, and new keystrokes reset the timeout. In other words, the event firing is debounced. If the attribute is absent, the [`search`](/zh-TW/docs/Web/Events/search) event is only fired when the user explicitly initiates a search (e.g. by pressing the Enter key while within field). [`incremental` documentation in the Safari HTML Reference](https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/Attributes.html#//apple_ref/doc/uid/TP40008058-incremental) +- {{htmlattrdef("mozactionhint")}} {{non-standard_inline}} + - : Specifies an "action hint" used to determine how to label the enter key on mobile devices with virtual keyboards. Supported values are `go`, `done`, `next`, `search`, and `send`. These automatically get mapped to the appropriate string and are case-insensitive. +- {{htmlattrdef("results")}} {{non-standard_inline}} + - : This is a nonstandard attribute supported by Safari that only applies when the **type** is `search`. It is used to control the maximum number of entries that should be displayed in the ``'s native dropdown list of past search queries. Its value should be a nonnegative decimal integer. +- {{htmlattrdef("webkitdirectory")}} {{non-standard_inline}} + - : This Boolean attribute indicates if the selector used when the **type** attribute is `file` has to allow for the selection of directories only. +- {{htmlattrdef("x-moz-errormessage")}} {{non-standard_inline}} + - : This Mozilla extension allows you to specify the error message to display when a field doesn't successfully validate. + +## Examples + +You can find multiple examples of `` element usage on the pages covering each individual type — see [Form \ types](#form__types), and also see the [Live example](#live_example) at the top of the article. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat("html.elements.input")}} + +## Notes + +### File inputs + +1. Starting in {{Gecko("2.0")}}, calling the `click()` method on an `` element of type `file` opens the file picker and lets the user select files. See [Using files from web applications](/zh-TW/docs/Using_files_from_web_applications) for an example and more details. +2. You cannot set the value of a file picker from a script — doing something like the following has no effect: + + ```js + var e = getElementById("someFileInputElement"); + e.value = "foo"; + ``` + +3. When a file is chosen using an ``, the real path to the source file is not shown in the input's `value` attribute for obvious security reasons. Instead, the filename is shown, with `C:\fakepath\` appended to the beginning of it. There are some historical reasons for this quirk, but it is supported across all modern browsers, and in fact is [defined in the spec](https://html.spec.whatwg.org/multipage/forms.html#fakepath-srsly). + +### Error messages + +If you want Firefox to present a custom error message when a field fails to validate, you can use the `x-moz-errormessage` attribute to do so: + +```html + +``` + +Note, however, that this is not standard and will not have an effect on other browsers. + +### Localization + +The allowed inputs for certain \ types depend on the locale. In some locales, 1,000.00 is a valid number, while in other locales the valid way to enter this number is 1.000,00. + +Firefox uses the following heuristics to determine the locale to validate the user's input (at least for `type="number"`): + +- Try the language specified by a `lang`/`xml:lang` attribute on the element or any of its parents. +- Try the language specified by any Content-Language HTTP header or +- If none specified, use the browser's locale. + +### Using mozactionhint on Firefox mobile + +You can use the {{htmlattrxref("mozactionhint", "input")}} attribute to specify the text for the label of the enter key on the virtual keyboard when your form is rendered on Firefox mobile. For example, to have a "Next" label, you can do this: + +```html + +``` + +The result is: + +![mozactionhint.png](/@api/deki/files/4970/=mozactionhint.png?size=webview) + +## See also + +- Other form-related elements: {{HTMLElement("form")}}, {{HTMLElement("button")}}, {{HTMLElement("datalist")}}, {{HTMLElement("legend")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, {{HTMLElement("optgroup")}}, {{HTMLElement("option")}}, {{HTMLElement("textarea")}}, {{HTMLElement("keygen")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} and {{HTMLElement("meter")}}. +- [Cross-browser HTML5 placeholder text](http://webdesignerwall.com/tutorials/cross-browser-html5-placeholder-text) diff --git a/files/zh-tw/web/html/element/input/submit/index.html b/files/zh-tw/web/html/element/input/submit/index.html deleted file mode 100644 index 30cea3f8d0e623..00000000000000 --- a/files/zh-tw/web/html/element/input/submit/index.html +++ /dev/null @@ -1,150 +0,0 @@ ---- -title: -slug: Web/HTML/Element/input/submit -translation_of: Web/HTML/Element/input/submit ---- -

{{HTMLRef}}

- -

{{HTMLElement("input")}} 元素的 "submit" 類型會被視為提交按鈕（submit button）——點選的話就能把表單提交到伺服器。

- -
-
<input type="submit" value="Submit to me">
-
- -

{{EmbedLiveSample("summary-example2", 650, 30)}}

- - - - - - - - - - - - - - - - - - - - - - - - -
值用作按鈕 label 的 {{domxref("DOMString")}}
事件{{event("click")}}
常見的支援屬性{{htmlattrxref("type", "input")}} 與 {{htmlattrxref("value", "input")}}
IDL 屬性value
方法無
- -

值

- -

<input type="submit"> 元素的 {{htmlattrxref("value", "input")}} 屬性會包含用作按鈕 label 的 {{domxref("DOMString")}}。

- -
-
<input type="submit" value="Submit to me">
-
- -

{{EmbedLiveSample("summary-example3", 650, 30)}}

- -

如果不指定 value，視瀏覽器不同，按鈕會是 Submit/Submit Query/提交 之類的預設值：

- -
-
<input type="submit">
-
- -

{{EmbedLiveSample("summary-example1", 650, 30)}}

- -

使用提交按鈕

- -

<input type="submit"> 按鈕用於提交表單。如果想自訂按鈕、並透過 JavaScript 自訂其行為，你應該用 <input type="button">、或更好的，{{htmlelement("button")}} 元素。

- -

請記住，如果表單內只有一個按鈕元素（例如 <button>My button</button>）的話，瀏覽器會自動把它視為提交按鈕。你要在其他按鈕之外，明確宣告一個提交按鈕。

- -

簡易的提交按鈕

- -

我們要開始建立一個新的提交按鈕：

- -
<form>
-  <div>
-    <label for="example">Let's submit some text</label>
-    <input id="example" type="text" name="text">
-  </div>
-  <div>
-    <input type="submit" value="Submit to me">
-  </div>
-</form>
-
- -

它會被渲染為：

- -

{{EmbedLiveSample("A_simple_submit_button", 650, 100)}}

- -

試著在文字區塊內輸入些文字，接著提交表單。

- -

提交時，送到伺服器的成對 name/value 資料會 be along the lines of text=mytext，視你在文字區塊內輸入了什麼。資料在哪裡並如何被送出，取決於 <form> 屬性和其他細節的設定：請參見傳送表單資料。

- -

增加提交的快捷鍵

- -

鍵盤快捷鍵，又稱熱鍵，能讓用戶透過鍵盤按鍵或組合觸發按鈕事件。要給提交按鈕添加鍵盤快捷鍵——如同 {{HTMLElement("input")}} 那樣——你需要使用全域屬性 {{htmlattrxref("accesskey")}}。

- -

下例之中，s 被指定為快捷鍵（you'll need to press s plus the particular modifier keys for your browser/OS combination; see {{htmlattrxref("accesskey")}} for a useful list of those）。

- -
<form>
-  <div>
-    <label for="example">Let's submit some text</label>
-    <input id="example" type="text" name="text">
-  </div>
-  <div>
-    <input type="submit" value="Submit to me"
-     accesskey="s">
-  </div>
-</form>
- -

{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}}

- -
-

注意：上例的問題很明顯，就是用戶不知道要按什麼快捷鍵！在實際網站中，你要提供不干擾網站整體設計的快捷鍵資訊：像是提供易於訪問的連結，告訴用戶說網站的快捷鍵是什麼。

-
- -

禁用與啟用提交按鈕

- -

要禁用提交按鈕，就如同下例般指定全域屬性 {{htmlattrxref("disabled")}}：

- -
-
<input type="submit" value="Disabled" disabled>
-
- -

你可以在 run time 時藉由設定 disabled 的 true or false 來禁用或啟用提交按鈕。在 JavaScript 就看起來像 btn.disabled = true。

- -
-

注意：請參見 <input type="button"> 頁面以取得關於禁用/啟用提交按鈕的詳細資訊。

-
- -
-

注意：Firefox 不若其他瀏覽器，它預設上會在 {{HTMLElement("button")}} 跨網頁加載時保持動態禁用狀態。請用 {{htmlattrxref("autocomplete","button")}} 屬性控制這個功能。

-
- -

驗證

- -

提交按鈕不參與強制驗證：they have no real value to be constrained.

- -

範例

- -

上面已經有一些程式碼了。這裡也沒有什麼還能講的。

- -

規範

- -{{Specifications}} - -

瀏覽器相容性

- -{{Compat}} - -

參見

- -
    -
  • 實做它的 {{HTMLElement("input")}} 與 {{domxref("HTMLInputElement")}} 介面。
    • -
  • {{HTMLElement("button")}} 元素。
    • -
diff --git a/files/zh-tw/web/html/element/input/submit/index.md b/files/zh-tw/web/html/element/input/submit/index.md new file mode 100644 index 00000000000000..e30713cace62fd --- /dev/null +++ b/files/zh-tw/web/html/element/input/submit/index.md @@ -0,0 +1,127 @@ +--- +title: +slug: Web/HTML/Element/input/submit +translation_of: Web/HTML/Element/input/submit +--- +{{HTMLRef}} + +{{HTMLElement("input")}} 元素的 **`"submit"`** 類型會被視為提交按鈕（submit button）——點選的話就能把表單提交到伺服器。 + +```html hidden + +``` + +{{EmbedLiveSample("summary-example2", 650, 30)}} + +| **[值](#值)** | 用作按鈕 label 的 {{domxref("DOMString")}} | +| ------------------ | -------------------------------------------------------------------------------------------- | +| **事件** | {{event("click")}} | +| **常見的支援屬性** | {{htmlattrxref("type", "input")}} 與 {{htmlattrxref("value", "input")}} | +| **IDL 屬性** | `value` | +| **方法** | 無 | + +## 值 + +`` 元素的 {{htmlattrxref("value", "input")}} 屬性會包含用作按鈕 label 的 {{domxref("DOMString")}}。 + +```html hidden + +``` + +{{EmbedLiveSample("summary-example3", 650, 30)}} + +如果不指定 `value`，視瀏覽器不同，按鈕會是 _Submit_/_Submit Query_/_提交_ 之類的預設值： + +```html hidden + +``` + +{{EmbedLiveSample("summary-example1", 650, 30)}} + +## 使用提交按鈕 + +`` 按鈕用於提交表單。如果想自訂按鈕、並透過 JavaScript 自訂其行為，你應該用 [``](/zh-TW/docs/Web/HTML/Element/input/button)、或更好的，{{htmlelement("button")}} 元素。 + +請記住，如果表單內只有一個按鈕元素（例如 ``）的話，瀏覽器會自動把它視為提交按鈕。你要在其他按鈕之外，明確宣告一個提交按鈕。 + +### 簡易的提交按鈕 + +我們要開始建立一個新的提交按鈕： + +```html +
+
+ + +
+
+ +
+
+``` + +它會被渲染為： + +{{EmbedLiveSample("A_simple_submit_button", 650, 100)}} + +試著在文字區塊內輸入些文字，接著提交表單。 + +提交時，送到伺服器的成對 name/value 資料會 be along the lines of `text=mytext`，視你在文字區塊內輸入了什麼。資料在哪裡並如何被送出，取決於 `
` 屬性和其他細節的設定：請參見[傳送表單資料](/zh-TW/docs/Learn/HTML/Forms/Sending_and_retrieving_form_data)。 + +### 增加提交的快捷鍵 + +鍵盤快捷鍵，又稱熱鍵，能讓用戶透過鍵盤按鍵或組合觸發按鈕事件。要給提交按鈕添加鍵盤快捷鍵——如同 {{HTMLElement("input")}} 那樣——你需要使用全域屬性 {{htmlattrxref("accesskey")}}。 + +下例之中，s 被指定為快捷鍵（you'll need to press s plus the particular modifier keys for your browser/OS combination; see {{htmlattrxref("accesskey")}} for a useful list of those）。 + +```html + +
+ + +
+
+ +
+
+``` + +{{EmbedLiveSample("Adding_a_submit_keyboard_shortcut", 650, 100)}} + +> **備註：** 上例的問題很明顯，就是用戶不知道要按什麼快捷鍵！在實際網站中，你要提供不干擾網站整體設計的快捷鍵資訊：像是提供易於訪問的連結，告訴用戶說網站的快捷鍵是什麼。 + +### 禁用與啟用提交按鈕 + +要禁用提交按鈕，就如同下例般指定全域屬性 {{htmlattrxref("disabled")}}： + +```html hidden + +``` + +你可以在 run time 時藉由設定 `disabled` 的 `true` or `false` 來禁用或啟用提交按鈕。在 JavaScript 就看起來像 `btn.disabled = true`。 + +> **備註：** 請參見 [``](/zh-TW/docs/Web/HTML/Element/input/button#Disabling_and_enabling_a_button) 頁面以取得關於禁用/啟用提交按鈕的詳細資訊。 + +> **備註：** Firefox 不若其他瀏覽器，它預設上會在 {{HTMLElement("button")}} 跨網頁加載時[保持動態禁用狀態](http://stackoverflow.com/questions/5985839/bug-with-firefox-disabled-attribute-of-input-not-resetting-when-refreshing)。請用 {{htmlattrxref("autocomplete","button")}} 屬性控制這個功能。 + +## 驗證 + +提交按鈕不參與強制驗證：they have no real value to be constrained. + +## 範例 + +上面已經有一些程式碼了。這裡也沒有什麼還能講的。 + +## 規範 + +{{Specifications}} + +## 瀏覽器相容性 + +{{Compat}} + +## 參見 + +- 實做它的 {{HTMLElement("input")}} 與 {{domxref("HTMLInputElement")}} 介面。 +- {{HTMLElement("button")}} 元素。 diff --git a/files/zh-tw/web/html/element/marquee/index.html b/files/zh-tw/web/html/element/marquee/index.html deleted file mode 100644 index 2ef4f5e4f8831b..00000000000000 --- a/files/zh-tw/web/html/element/marquee/index.html +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: ：捲動元素（已過時） -slug: Web/HTML/Element/marquee -translation_of: Web/HTML/Element/marquee ---- -

HTML <marquee> 元素用作插入一段文字的捲動區域。你可以透過屬性，控制文字在到達邊緣後的應對動作。

- - - - - - - - -
DOM 介面{{DOMxRef("HTMLMarqueeElement")}}
- -

屬性

- -
-
{{htmlattrdef("behavior")}}
-
設定文字如何在 marquee 內捲動。可用值為 scroll、slide、alternate。若無指定，預設值為 scroll。
-
{{htmlattrdef("bgcolor")}}
-
透過色彩名或十六進位值指定背景顏色。
-
{{htmlattrdef("direction")}}
-
設定 marquee 內的捲動方向。可用值為 left、right、up、down。若無指定，預設值為 left。
-
{{htmlattrdef("height")}}
-
設定像素或百分比高度。
-
{{htmlattrdef("hspace")}}
-
設定橫向外邊（horizontal margin）
-
{{htmlattrdef("loop")}}
-
設定 marquee 捲動的次數。若無指定，預設值為 -1，意思是的 marquee 將持續捲動。
-
{{htmlattrdef("scrollamount")}}
-
以像素為單位，設定捲動的間隔量。預設值為 6。
-
{{htmlattrdef("scrolldelay")}}
-
設定每次捲動時之間間隔的毫秒。預設值為 85。請注意，除非指定了 truespeed，否則小於 60 的數字會被忽略，並值使用 60。
-
{{htmlattrdef("truespeed")}}
-
scrolldelay 預設上會忽略低於 60 的值。但如果有 truespeed 的話，就不會忽略此值。
-
{{htmlattrdef("vspace")}}
-
以像素或百分比值設置垂直邊距。
-
{{htmlattrdef("width")}}
-
設置以像素或百分比值為單位的寬度。
-
- -

事件處理器

- -
-
{{htmlattrdef("onbounce")}}
-
marquee 滾動到結尾時觸發。只能在 behavior 屬性設置為 alternate 時觸發。
-
{{htmlattrdef("onfinish")}}
-
marquee 完成 loop 屬性的設定值時觸發。只能在 loop 屬性設為大於 0 的數字時觸發。
-
{{htmlattrdef("onstart")}}
-
marquee 開始捲動時觸發。
-
- -

方法

- -
-
start()
-
開始 marquee 的捲動
-
stop()
-
停止 marquee 的捲動
-
- -

示例

- -
<marquee>This text will scroll from right to left</marquee>
-
-<marquee direction="up">This text will scroll from bottom to top</marquee>
-
-<marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid">
-  <marquee behavior="alternate">
-    This text will bounce
-  </marquee>
-</marquee>
- -

{{EmbedLiveSample("Examples", 600, 450)}}

- -

規範

- -{{Specifications}} - -

瀏覽器相容性

- - - -

{{Compat("html.elements.marquee")}}

- -

參見

- -
    -
  • {{DOMxRef("HTMLMarqueeElement")}}
    • -
diff --git a/files/zh-tw/web/html/element/marquee/index.md b/files/zh-tw/web/html/element/marquee/index.md new file mode 100644 index 00000000000000..2f826bc2bcca68 --- /dev/null +++ b/files/zh-tw/web/html/element/marquee/index.md @@ -0,0 +1,78 @@ +--- +title: ：捲動元素（已過時） +slug: Web/HTML/Element/marquee +translation_of: Web/HTML/Element/marquee +--- +HTML `` 元素用作插入一段文字的捲動區域。你可以透過屬性，控制文字在到達邊緣後的應對動作。 + +| DOM 介面 | {{DOMxRef("HTMLMarqueeElement")}} | +| -------- | -------------------------------------------- | + +## 屬性 + +- {{htmlattrdef("behavior")}} + - : 設定文字如何在 marquee 內捲動。可用值為 `scroll`、`slide`、`alternate`。若無指定，預設值為 `scroll`。 +- {{htmlattrdef("bgcolor")}} + - : 透過色彩名或十六進位值指定背景顏色。 +- {{htmlattrdef("direction")}} + - : 設定 marquee 內的捲動方向。可用值為 `left`、`right`、`up`、`down`。若無指定，預設值為 `left`。 +- {{htmlattrdef("height")}} + - : 設定像素或百分比高度。 +- {{htmlattrdef("hspace")}} + - : 設定橫向外邊（horizontal margin） +- {{htmlattrdef("loop")}} + - : 設定 marquee 捲動的次數。若無指定，預設值為 -1，意思是的 marquee 將持續捲動。 +- {{htmlattrdef("scrollamount")}} + - : 以像素為單位，設定捲動的間隔量。預設值為 6。 +- {{htmlattrdef("scrolldelay")}} + - : 設定每次捲動時之間間隔的毫秒。預設值為 85。請注意，除非指定了 `truespeed`，否則小於 60 的數字會被忽略，並值使用 60。 +- {{htmlattrdef("truespeed")}} + - : `scrolldelay` 預設上會忽略低於 60 的值。但如果有 `truespeed` 的話，就不會忽略此值。 +- {{htmlattrdef("vspace")}} + - : 以像素或百分比值設置垂直邊距。 +- {{htmlattrdef("width")}} + - : 設置以像素或百分比值為單位的寬度。 + +## 事件處理器 + +- {{htmlattrdef("onbounce")}} + - : marquee 滾動到結尾時觸發。只能在 behavior 屬性設置為 `alternate` 時觸發。 +- {{htmlattrdef("onfinish")}} + - : marquee 完成 loop 屬性的設定值時觸發。只能在 loop 屬性設為大於 0 的數字時觸發。 +- {{htmlattrdef("onstart")}} + - : marquee 開始捲動時觸發。 + +## 方法 + +- start() + - : 開始 marquee 的捲動 +- stop() + - : 停止 marquee 的捲動 + +## 示例 + +```html +This text will scroll from right to left + +This text will scroll from bottom to top + + + + This text will bounce + + +``` + +{{EmbedLiveSample("Examples", 600, 450)}} + +## 規範 + +{{Specifications}} + +## 瀏覽器相容性 + +{{Compat("html.elements.marquee")}} + +## 參見 + +- {{DOMxRef("HTMLMarqueeElement")}} diff --git a/files/zh-tw/web/html/element/meter/index.html b/files/zh-tw/web/html/element/meter/index.html deleted file mode 100644 index c0754184400ed2..00000000000000 --- a/files/zh-tw/web/html/element/meter/index.html +++ /dev/null @@ -1,77 +0,0 @@ ---- -title: -slug: Web/HTML/Element/meter -translation_of: Web/HTML/Element/meter ---- -

摘要

- -

HTML <meter> Element represents either a scalar value within a known range or a fractional value.

- -
Usage note: Unless the value attribute is between 0 and 1 (inclusive), the min attribute and max attribute should define the range so that the value attribute's value is within it.
- - - -

屬性

- -

This element includes the global attributes.

- -
-
{{htmlattrdef("value")}}
-
The current numeric value. This must be between the minimum and maximum values (min attribute and max attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the min attribute and max attribute, the value is equal to the nearest end of the range.
-
{{htmlattrdef("min")}}
-
The lower numeric bound of the measured range. This must be less than the maximum value (max attribute), if specified. If unspecified, the minimum value is 0.
-
{{htmlattrdef("max")}}
-
The upper numeric bound of the measured range. This must be greater than the minimum value (min attribute), if specified. If unspecified, the maximum value is 1.
-
{{htmlattrdef("low")}}
-
The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (min attribute), and it also must be less than the high value and maximum value (high attribute and max attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the low value is equal to the minimum value.
-
{{htmlattrdef("high")}}
-
The lower numeric bound of the high end of the measured range. This must be less than the maximum value (max attribute), and it also must be greater than the low value and minimum value (low attribute and min attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the high value is equal to the maximum value.
-
{{htmlattrdef("optimum")}}
-
This attribute indicates the optimal numeric value. It must be within the range (as defined by the min attribute and max attribute). When used with the low attribute and high attribute, it gives an indication where along the range is considered preferable. For example, if it is between the min attribute and the low attribute, then the lower range is considered preferred.
-
{{htmlattrdef("form")}}
-
This attribute associates the element with a form element that has ownership of the meter element. For example, a meter might be displaying a range corresponding to an input element of type number. This attribute is only used if the meter element is being used as a form-associated element; even then, it may be omitted if the element appears as a descendant of a form element.
-
- -

範例

- -

Simple example

- -
<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
-
- -

On Google Chrome, the resulting meter looks like this:

- -

meter1.png

- -

高/低範圍範例

- -

Note that in this example the min attribute is omitted; this is allowed, as it will default to 0.

- -
<p>He got a <meter low="69" high="80" max="100" value="84">B</meter> on the exam.</p>
-
- -

On Google Chrome, the resulting meter looks like this:

- -

meter2.png

- -

詳述

- -{{Specifications}} - -

瀏覽器相容性

- -{{Compat("html.elements.meter")}} - -

See also

- -
    -
  • {{HTMLElement("progress")}}
    • -
- -

{{HTMLRef}}

diff --git a/files/zh-tw/web/html/element/meter/index.md b/files/zh-tw/web/html/element/meter/index.md new file mode 100644 index 00000000000000..a1165815fcdf54 --- /dev/null +++ b/files/zh-tw/web/html/element/meter/index.md @@ -0,0 +1,73 @@ +--- +title: +slug: Web/HTML/Element/meter +translation_of: Web/HTML/Element/meter +--- +## 摘要 + +**HTML `` Element** represents either a scalar value within a known range or a fractional value. + +> **備註：** Unless the **value** attribute is between 0 and 1 (inclusive), the **min** attribute and **max** attribute should define the range so that the **value** attribute's value is within it. + +- _[Content categories](/zh-TW/docs/HTML/Content_categories)_ [Flow content](/zh-TW/docs/HTML/Content_categories#Flow_content), [phrasing content](/zh-TW/docs/HTML/Content_categories#Phrasing_content), labelable content, palpable content. +- _Permitted content_ [Phrasing content](/zh-TW/docs/HTML/Content_categories#Phrasing_content), but there must be no `` element among its descendants. +- _Tag omission_ {{no_tag_omission}} +- _Permitted parent elements_ Any element that accepts [phrasing content](/zh-TW/docs/HTML/Content_categories#Phrasing_content). +- _DOM interface_ {{domxref("HTMLMeterElement")}} + +## 屬性 + +This element includes the [global attributes](/zh-TW/docs/HTML/Global_attributes). + +- {{htmlattrdef("value")}} + - : The current numeric value. This must be between the minimum and maximum values (**min** attribute and **max** attribute) if they are specified. If unspecified or malformed, the value is 0. If specified, but not within the range given by the **min** attribute and **max** attribute, the value is equal to the nearest end of the range. +- {{htmlattrdef("min")}} + - : The lower numeric bound of the measured range. This must be less than the maximum value (**max** attribute), if specified. If unspecified, the minimum value is 0. +- {{htmlattrdef("max")}} + - : The upper numeric bound of the measured range. This must be greater than the minimum value (**min** attribute), if specified. If unspecified, the maximum value is 1. +- {{htmlattrdef("low")}} + - : The upper numeric bound of the low end of the measured range. This must be greater than the minimum value (**min** attribute), and it also must be less than the high value and maximum value (**high** attribute and **max** attribute, respectively), if any are specified. If unspecified, or if less than the minimum value, the **low** value is equal to the minimum value. +- {{htmlattrdef("high")}} + - : The lower numeric bound of the high end of the measured range. This must be less than the maximum value (**max** attribute), and it also must be greater than the low value and minimum value (**low** attribute and **min** attribute, respectively), if any are specified. If unspecified, or if greater than the maximum value, the **high** value is equal to the maximum value. +- {{htmlattrdef("optimum")}} + - : This attribute indicates the optimal numeric value. It must be within the range (as defined by the **min** attribute and **max** attribute). When used with the **low** attribute and **high** attribute, it gives an indication where along the range is considered preferable. For example, if it is between the **min** attribute and the **low** attribute, then the lower range is considered preferred. +- {{htmlattrdef("form")}} + - : This attribute associates the element with a `form` element that has ownership of the `meter` element. For example, a `meter` might be displaying a range corresponding to an `input` element of **type** _number_. This attribute is only used if the `meter` element is being used as a form-associated element; even then, it may be omitted if the element appears as a descendant of a `form` element. + +## 範例 + +### Simple example + +```html +

Heat the oven to 350 degrees.

+``` + +On Google Chrome, the resulting meter looks like this: + +![meter1.png](screen_shot_2020-10-12_at_10.10.53_pm.png) + +### 高/低範圍範例 + +Note that in this example the **min** attribute is omitted; this is allowed, as it will default to 0. + +```html +

He got a B on the exam.

+``` + +On Google Chrome, the resulting meter looks like this: + +![meter2.png](screen_shot_2020-10-12_at_10.11.52_pm.png) + +## 詳述 + +{{Specifications}} + +## 瀏覽器相容性 + +{{Compat("html.elements.meter")}} + +## See also + +- {{HTMLElement("progress")}} + +{{HTMLRef}} diff --git a/files/zh-tw/web/html/element/nav/index.html b/files/zh-tw/web/html/element/nav/index.html deleted file mode 100644 index 84503b2f38e392..00000000000000 --- a/files/zh-tw/web/html/element/nav/index.html +++ /dev/null @@ -1,87 +0,0 @@ ---- -title: