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" />

以这种方式实现图片懒加载的功能，当页面往下滚动的时候，图片动态加载：