该篇文章为 freecodecamp Learn html forms by building a registration form 学习笔记

查看效果：registration-form

vh（view port height）

vh 单位是视口的高度，1vh 等于视口高度的1%；100vh 则表示元素的高度是视口高度的100%，即占满整个视口的高度。

使用vh单位可以创建响应式设计，使得元素的尺寸能够根据视口的大小变化而变化，这在开发移动优先（mobile-first）的网站时非常有用。不过，请注意，当使用vh单位时，需要考虑到不同设备和浏览器的兼容性和行为可能有所不同。

视口：是指浏览器用来展示网页的那部分区域，也就是用户可以看到的部分。在桌面浏览器中，视口通常与屏幕大小相同，除非用户进行了缩放操作。在移动设备上，视口可能小于屏幕的物理尺寸，特别是当浏览器有地址栏或其他UI元素时。

rem

rem 单位是 CSS 中的一种相对长度单位，它代表“root em”，即相对于根元素（通常是指 html 元素）的字体大小的单位。使用 rem 单位时，它可以帮助你创建不受父元素字体大小影响的尺寸值，而是相对于整个页面的根字体大小。

这里是 rem 单位的一些关键点：

  • 1rem 总是等于根元素（html）的字体大小。如果根元素的字体大小没有被明确设置，那么 1rem 通常等于浏览器的默认字体大小（通常是16像素）。
  • 当你为 html 元素设置一个具体的字体大小后，1rem 就会等于这个值。例如，如果你设置 html { font-size: 18px; }，那么 1rem 就等于18像素。
  • rem 单位可以用于任何 CSS 属性，包括字体大小、宽度、高度、边距、填充等。

使用 rem 单位的优点：

  • 响应式设计：rem 单位非常适合响应式设计，因为它允许你根据根字体大小来缩放元素尺寸。
  • 一致性：使用 rem 可以保持元素之间的尺寸比例一致。
  • 可访问性：用户可以调整浏览器的默认字体大小，使用 rem 单位的元素会相应地调整尺寸，提高可访问性。

form

attribute

  • action: 将表单数据发送到 action 属性中指定的 URL。
  • method: 表单数据可以通过 GET 请求作为 URL 参数（使用 method=”get”）发送，也可以通过 POST 请求作为请求正文中的数据发送（使用 method=”post”）