TML提交按鈕是一種HTML表單元素，允許用戶將表單數據提交到服務器。提交按鈕通常與表單元素（如文本框和下拉列表）一起使用，以便用戶可以輸入并提交信息。在HTML中，提交按鈕通常使用標簽來定義。

如何編寫HTML提交按鈕代碼？

要創建HTML提交按鈕，您需要使用標簽，并將type屬性設置為“submit”。例如，以下代碼會創建一個名為“submit”的提交按鈕：

```

```

在這個例子中，“action”屬性指定了表單數據提交到的URL，“method”屬性指定了提交表單的HTTP方法（通常是POST或GET）。按鈕的“value”屬性指定了按鈕上顯示的文本。

如何自定義HTML提交按鈕樣式？

默認情況下，HTML提交按鈕的樣式取決于用戶的操作系統和瀏覽器。但是，您可以使用CSS樣式表來自定義按鈕的外觀。例如，以下代碼將創建一個紅色的提交按鈕：

```

```

在這個例子中，我們使用了style屬性來設置按鈕的背景顏色和文本顏色。您還可以使用其他CSS屬性來自定義按鈕的大小、邊框等。

如何使用JavaScript處理HTML提交按鈕？

您可以使用JavaScript來添加交互性和驗證表單數據。例如，以下代碼將在用戶單擊提交按鈕時彈出一個提示框：

```

```

在這個例子中，我們使用了onsubmit屬性來指定當表單提交時要運行的JavaScript函數。此函數返回true或false，如果返回false，則表單將不會提交。在這個例子中，我們使用confirm()函數顯示一個提示框，并在用戶單擊“確定”時返回true。

總結

HTML提交按鈕是Web表單中的重要元素，允許用戶將表單數據提交到服務器。您可以使用標簽來創建提交按鈕，并使用CSS樣式表自定義外觀。您還可以使用JavaScript添加交互性和驗證表單數據。通過掌握HTML提交按鈕的知識，您可以創建復雜的Web表單，并收集和處理用戶數據。

人人都是產品經理【起點學院】，BAT實戰派產品總監手把手系統帶你學產品、學運營。

產品設計時細節是產品經理最頭疼的問題，一個button，一個鏈接都要考慮太多的細節問題。作者整理了常見的一些功能設計問題，一篇文章看懂這些功能設計。來學習吧。

定義

鏈接也稱為超鏈接，所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。而在一個網頁中用來超鏈接的對象，可以是一段文本或者是一個圖片。當瀏覽者單擊已經鏈接的文字或圖片后，鏈接目標將顯示在瀏覽器上，并且根據目標的類型來打開或運行。

樣式

鏈接可以是一個字或是一段字這樣的文本，也可以是一個按鈕，一張圖片，當你點擊后跳轉到另一個目標，當你把鼠標指針移到某個鏈接時會變成一個小手，當然在手機上沒有這一特點。

1. 文本樣式的鏈接

文本樣式的鏈接一般在搜索引擎的網站呈現藍色字樣，大多會在下面加上下劃線以便識別，不過現如今考慮到不影響文本的可讀性與用戶體驗，逐漸取消了下劃線。而在一些別的網站考慮到界面設計風格各方面的因素而不用藍色。

谷歌的文本鏈接是藍色，沒有下劃線

百度的文本鏈接也是藍色，關鍵詞是紅色，有下劃線

而京東的文本鏈接有灰色，有白色，有黑色

2. 按鈕樣式的鏈接

按鈕樣式的鏈接比文本樣式的更容易識別，每一個按鈕都是一樣鏈接。

按鈕樣式鏈接

3. 圖片樣式的鏈接

圖片樣式的鏈接可以是單獨的一張圖片，也可以是文字與按鈕一起組成一張圖片，只是鼠標指針掃過圖片的任何一個部位都會變成小手。

如桌面彈出這種游戲小窗口的圖片式鏈接

由文字/圖/按鈕樣式一起構成的一張圖片式按鈕，鼠標可以點擊圖中任何一部位

打開方式

鏈接打開的方式有三種：第一種是在當前頁面刷新跳轉，國外的網站大多是這樣的打開式；第二種是在新標簽頁面打開鏈接，國內大多采用這種；第三種是提示用APP打開。當然現在出現了一種新的打開方式，那就是二維碼掃描。

提示用美拍APP打開

類型

按照連接路徑的不同，網頁中超鏈接一般分為以下3種類型：內部鏈接，錨點鏈接和外部鏈接。

鏈接還可以分為動態鏈接和靜態鏈接。動態超鏈接指的是可以通過改變HTML代碼來實現動態變化的鏈接，例如我們可以實現將鼠標移動到某個文字鏈接上，文字就會象動畫一樣動起來或改變顏色的效果，也可以實現鼠標移到圖片上圖片就產生反色或朦朧等等的效果。而靜態鏈接，顧名思義，就是沒有動態效果的鏈接。

1. 內部鏈接

與外部鏈接（即反向鏈接）相反，內部鏈接是指同一網站域名下的內容頁面之間互相鏈接。如頻道、欄目、終極內容頁之間的鏈接，乃至站內關鍵詞之間的Tag鏈接都可以歸類為內部鏈接，因此內部鏈接我們也可以稱之為站內鏈接，對內部鏈接的優化其實就是對網站的站內鏈接的優化。

2. 錨點鏈接

HTML中的鏈接，正確的說法應該稱作"錨點"，它命名錨點鏈接（也叫書簽鏈接）常常用于那些內容龐大繁瑣的網頁，通過點擊命名錨點，不僅讓我們能指向文檔，還能指向頁面里的特定段落，更能當作"精準鏈接"的便利工具，讓鏈接對象接近焦點。便于瀏覽者查看網頁內容。類似于我們閱讀書籍時的目錄頁碼或章回提示。在需要指定到頁面的特定部分時，標記錨點是最佳的方法。

3. 外部鏈接

外部鏈接，又常被稱為：“反向鏈接”或“導入鏈接”，是指通過其他網站鏈接到你的網站的鏈接。

外部鏈接指的是針對搜索引擎，與其它站點所做的友情鏈接。高質量的外部鏈接指：和你的網站建立鏈接的網站知名度高，訪問量大，同時相對的外部鏈接較少，有助于快速提升你的網站知名度和排名的其他網站的友情鏈接。

如果按照使用對象的不同，網頁中的鏈接又可以分為：文本超鏈接，圖像超鏈接，E-mail鏈接，錨點鏈接，多媒體文件鏈接，空鏈接等。

鏈接是一種對象，它以特殊編碼的文本或圖形的形式來實現鏈接，如果單擊該鏈接，則相當于指示瀏覽器移至同一網頁內的某個位置，或打開一個新的網頁，或打開某一個新的WWW網站中的網頁。

鏈接狀態

鏈接在交互上一般會呈現4種狀態，即默認狀態/懸停時狀態/點擊時狀態/點擊后狀態。比如谷哥網站的交互體驗。如下圖：

點擊前

懸停時，下面浮現半透明線條

點擊時，有波紋暈開的動態效果

點擊后，下面線條粗

有時候是3種狀態，比如百度網和知乎應用：

默認狀態

點擊時鏈接變紅

點擊后鏈接變成紫色

IOS系統知乎應用的3種狀態，而在Android系統沒有用力點擊這一狀態。

默認狀態

點擊狀態

用力點擊會彈出預覽小窗口

有些時候只有2種狀態，如下圖谷歌網：

默認和點擊后狀態一樣

鼠標懸停時出現下劃線

默認狀態

點擊時

而有時候比如在APP里有時候就一直只有一種狀態，也可以稱靜態鏈接，之前的可以稱之為動態鏈接。在不同的使用場景會因為當時的情況選擇最合適的交互體驗設計。有的情況下還會加上點擊的音效，使用戶體驗更暢快，這在移動端用的使用情況多一些。

總之鏈接是網頁不可缺少的構成部分，每一個鏈接的呈現都是經過深思熟慮的。

作者：潘瑤瓊（簡書作者）

本文由 @潘瑤瓊 授權發布于人人都是產品經理，未經作者許可，禁止轉載。

端訓練營：1v1私教，終身輔導計劃，幫你拿到滿意的 offer。 已幫助數百位同學拿到了中大廠 offer。歡迎來撩~~~~~~~~

Hello，大家好，我是 Sunday。

說起 HTML 很多同學都會認為，這不就是小菜一碟嗎？這玩意有啥難度？你也太瞧不起我了吧！

不過看似越簡單的東西，我們越會忽略，同時它們還可以提供出令人驚艷的效果！

01：使用 Popover 屬性構建可訪問的原生彈出框元素

過去，我們經常使用本機瀏覽器窗口作為彈出框元素來顯示頂層內容（例如：常見的 dialog）。

可是這些默認的彈窗并不友好。所以后來，我們使用外部庫（Element、AntD 等）構建了頁面內的、經過CSS樣式化的彈出框，以好看的UI方式方式顯示此類內容。

不過現在，你可以使用純HTML創建彈出框，而無需編寫任何JavaScript代碼。現代Web標準通過Popover API提供了內置的彈出框支持。

看下面的源代碼：

<style>
  div[popover]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
  }
  
  div[popover] {
    padding: 12px;
    border: none;
  }
</style>

<div id="pop" popover>
  我是彈出的內容
</div>

<button popovertarget="pop">展示 popover</button>

上述HTML使用了 popover 屬性來實現一個簡單的彈出框元素。

它使用 popovertarget 屬性來在不使用JavaScript的情況下顯示彈出框元素。此外，我們使用了 ::backdrop 偽元素來樣式化彈出框的背景：

你可以使用 @starting-style 為原生彈出框添加動畫，正如 MDN 文檔（https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style）中所解釋的那樣。

02：在對話框和頁面中使用 autofocus 屬性

HTML標準提供了 autofocus 屬性，用于在頁面加載和對話框/彈出框顯示狀態下自動聚焦表單元素。

看下面的示例模態框，它在第一個輸入已經預填充的情況下自動將焦點設置到第二個文本輸入框上：

<dialog id="dlg">
  <form method="dialog">
    <input type="text" placeholder="Firstname" value="張" />
    <div style="height: 8px"></div>
    <input type="text" placeholder="Lastname" autofocus />
    <div style="height: 8px"></div>
    <button>保存</button>
  </form>
</dialog>
<button onclick="document.getElementById('dlg').showModal()" autofocus>點我</button>

上面的HTML在兩個地方使用了 autofocus 屬性：

1. 在顯示模態框的按鈕元素中，在頁面加載事件后聚焦它。
2. 在第二個文本輸入框中，自動將焦點設置到它，因為第一個文本輸入框已經預填充。

此外，我們還使用了 method="dialog" 屬性來設置關閉對話框而無需使用JavaScript代碼。

03：使用 pattern 屬性在文本輸入框中進行原生驗證

表單校驗是日常開發的常見需求。不過當我們脫離了 Element、AntD 這些組件庫之后，你還知道如何實現表單校驗嗎？

其實對于 HTML的 input 元素來說，它是有 pattern 屬性的

假設我們需要驗證一個產品標識符，它包含兩個英文字母和六個數字，用連字符連接，即 GR-100200。

以下HTML片段實現了上述要求的驗證功能的文本輸入框：

<form>
  <label for="productID"> ID:</label>
  <input type="text" id="productID" name="productID" pattern="[A-Za-z]{2}-\d{6}" title="Please enter a valid product identifier (e.g., GR-100200)" required>
  <button type="submit">Submit</button>
</form>

在上面的示例中，我們使用 pattern 屬性設置了一個正則表達式，用于驗證產品標識符。此正則表達式要求兩個英文字母（不區分大小寫）后跟一個連字符，然后是六個數字。另外，我們還添加了 title 屬性，以提供關于輸入格式的說明。最后，我們將 required 屬性添加到輸入元素上，以確保用戶輸入有效的產品標識符。

這里，pattern 屬性通過顯示瀏覽器特定的驗證消息來阻止表單提交無效輸入。但是他必須要在點擊了 提交 按鈕之后才可以進行校驗。

如果我們想要進行實時校驗（根據輸入內容實時校驗）怎么辦呢？

04：使用 :valid 和 :invalid CSS 偽類來實現 pattern 的實時驗證

我們可以使用 :valid 和 :invalid CSS 偽類來實現 pattern 的實時驗證，如下所示的 HTML 代碼片段所示：

<style>
  input[type=text] {
    border: #000 1px solid;
    border-radius: 4px;
    outline: none;
    padding: 6px;
  }

  input[type=text]:invalid {
    border: red 1px solid;

    +span::before {
      content: '?';
      display: inline;
      color: red;
    }
  }

  input[type=text]:valid {
    border: green 1px solid;

    +span::before {
      content: '?';
      display: inline;
      color: green;
    }
  }
</style>

<input type="text" placeholder="i.e., GR-100200" pattern="[A-Z]{2}-[0-9]{6}" required />
<span></span>

上面的HTML片段使用CSS代碼根據驗證狀態設置樣式。無效輸入會將輸入框邊框設置為紅色，并顯示紅色的叉號。與此同時，有效輸入會呈現綠色邊框和綠色的勾號符號：

05：處理移動虛擬鍵盤模式的 inputmode 屬性

手機通過虛擬鍵盤進行輸入，這個鍵盤有幾種模式。

例如，它可能僅顯示數字鍵用于數字輸入元素，對于一般的字符串輸入則顯示完整的鍵盤界面。移動瀏覽器會根據輸入類型自動更改虛擬鍵盤模式，但開發人員也可以使用 input 元素的 inputmode 屬性進行自定義。

<input type="text" pattern="[0-9]{6}" inputmode="numeric" maxlength="6">

在上面的示例中，我們使用了 inputmode 屬性來指定虛擬鍵盤的模式為 numeric，以便在移動設備上只顯示數字鍵盤。同時，我們還使用了 pattern 屬性來限制輸入只能是六位數字。maxlength 屬性限制輸入的最大長度為六位。

06：使用 loading 屬性實現瀏覽器級別的圖片懶加載

圖片懶加載是日常開發中的常見需求。我們在實現懶加載時大多數會使用一些現成的庫或者基于 Intersection Observer API 進行處理

不過很多同學不知道的是：img 標簽的 loading 屬性可以讓你在不編寫JavaScript代碼或使用第三方庫的情況下啟用瀏覽器級別的圖片懶加載。

看下面的源代碼：

<div style="height: 2000px"></div>

<img src="https://gips3.baidu.com/it/u=45328832,131546734&fm=3039&app=3039&f=JPEG?w=1024&h=1024
" loading="lazy" />

以這種方式實現圖片懶加載的功能，當頁面往下滾動的時候，圖片動態加載：