[网站开发入门指南21] 表单元素们中的input标签｜ html

站开发入门指南：表单相关标签们。

接下来我们来学习一下表单以及相关的元素。

·表单其实英文是叫做fo.rm，在我们平时使用的这种互联网产品中包括网站也好、app也好，经常会看到这种需要你去填一些资料、填一些文字、填一些数据的这样一种页面。像这种页面其实都是通过表单以及表单的元素去构成、去实现的。

也就是说表单其实是用来收集用户数据的，它是给用户去输入一些数据的。而且输入完之后，一般它是要跟服务器去发生一些交互的。就是比如说把数据发送到服务器或者在本地处理过后，再给到服务器去进一步的处理或者去保存。所以其实表单这些元素，如果真正要去用起来的话，真正要让它功能跑起来的话，其实很多时候是要跟js打交道的。所以目前来说只要简单的去了解一下表单的元素的基本使用就可以了。

·然后后面学了CSS之后，你也知道怎么去给这些表单做它的样式就OK了。那我们看一下表单以及相关的元素有哪些？表单主要是有一个这样一个表单本身的标签，另外这些就是跟它相关的一些标签元素了。这些元素一般都是放在这个for.m元素里面的嵌套在它里面的。

但是表单的元素，它跟我们之前学过的ul li-olli一定要进行嵌套使用的，这种元素还不太一样。表单中的元素，像这个和这个是经常可以单独使用的，也就是说不用嵌套在这个form表单里面也是可以用的。所以要明白这些表单内的元素，如果你有需要是完全可以去独立的去使用它的，并不一定要跟这个for.m.搭.配起来嵌套在它里面的。

·很多时候去使用form这样的标签。然后把这些表单的元素嵌套在里面。它其实主要的一个目的，它是为了让这些就是收集到的数据组成一种结构化的一种模式，结构化的一种状态。这样发送到服务器，服务器也可以通过这种更好的结构去读取数据。

所以目前的学习阶段来讲是没有办法给你去展示表单的作用。但是等你学到JS之后，你在有了这些基础知识之后，就能通过JS其实非常清晰看到它的整个数据结构。这节课主要是来讲一讲这个标签，这个标签其实会经常单独的来进行使用。这个标签之前也简单的给大家去演示过，它是一个用来做这种文字输入的标签。

很多时候，像这种真实的产品页面，产品里面会发现很多的输入栏都是用这个标签去实现。打开开发者工具之后，可以看到这里有一个这样的小工具，选用它之后就可以去快速的定位到元素。可以看到它这边有个input，选中之后，元素列表这里也能看到就是input这样的元素。所以很多的页面上的输入框其实都是用input元素来实现的。

input非常重要的属性叫做type，type属性之前演示过一个叫text(的值)，一个叫Checkbox，给大家演示过。这两个设置之后是会产生不同的效果。这种能设置的属性的值非常多，我这里不给大家去做演示，你有兴趣自己可以去尝试去使用一下。

这里主要是介绍一个是这个之前讲过的，给大家简单也再看一下。一个是checkbox，一个是checkbox，还有一个file，其他的。

还有pasisword也给大家看一下。这里来看一下。首先看到input非常简单，直接默认的text它这边，这边先把它放大一点，放五倍大，大家看起来清楚一点。这样就可以在这里输入这样一个内容了，非常简单。

然后比如这里改成password，然后这边输入的东西自动的就变成这种小圆点了，就相当于是一种帮你保密，就是防止别人偷看到你的密码。然后就是checkbox(多选框)。之前简简单演示过了checkbox会变成这种勾选的框，它有一个属性，如果你使用的checkbooks这样的类型，你可以使用这个checked这样的属性，就让元素默认是打勾(选中)的状态。

像这种东西其他的前面一般都会有一个文字，告诉你这个选项是什么，然后这里把这个改一下，就叫做选择。想学习的语言其实一定是可以多选的。这里来一个写一个span，叫做js好html，然后自己再多复制几个，然后这里变成CSS，变成javascript。像这种前面这种文字用span都是没有任何问题的。

但是其实在表单元素里面有一个标签叫做lab.el。label其实一般用来写这种，就是告诉这个选项是什么样的一个选项，这样的一些文字。label有个特殊的作用，比如说把这个换成label，label之后这里有一个属性叫做for，for可以去跟比如说input，这里设计一个id叫做html。

稍微跟写的不一样，这个其实写一样也没有关系，但是这里写不一样，大家可能更容易理解一点。

把名字id名跟这个对应上之后for里面是某个元素的id值，就是input这样的一个元素的id值，label就跟input元素绑定了。注意这里写错了label。

·然后看一下可以点击文字，就相当于点击了选项框，其他的用spam包裹的文字是没有绑定的效果。所以label标签的作用就是有这样的一个文字跟相应的元素绑定起来。点击文字相当于就点击元素这样的效果。

·然后可以看一下另外一种叫radio这种单选框的元素，也是用input来实现的。然后来看一下input，把它设置成radio的类型就会变成这样一个圆点。假如还是按照这种模式，比如说这里把ID也设置一下叫做htmltag，其实跟htmltag类型的数据库也是一样的。如果设置checked就默认的，就相当于是选中的状态。

·如果这里还有单选，这里还有一个，如果叫CSS，把这个先取消掉。这里其实是有两个选项，两个可选项，整个的结果是希望是呈现单选的状态，选中其中另外一个，肯定要呈现一种未选中的状态。

·现在两个都可以同时选中，这样肯定是不行的。所以这里可以用属性，叫做name，就叫section。下面同时也取名字，也是name同样的值。

这里可以把它理解成用了同一个名字的单选框，他们最终只能选中其中一个。可以试一下，比如说点CSS，点html，这个东西是单选框里面非常重要的知识点。

txt文件变成html网页文件

如果您看过《HTML是什么？——零基础自学网页制作》这篇教程，请按照其中说明创建一个txt文件。具体过程如下：

step1：在您方便的磁盘中建立一个文件夹，命名为"零基础自学网页制作"。例如我在D盘中建立了"零基础自学网页制作"文件夹。

step2：在文件夹中创建"HTML框架.txt"文件。鼠标移动到空白处点击右键选择"文本文档"。

命名为"html框架"，如下图所示。

如果您的电脑没有显示".txt"后缀的话，请做如下操作：点击"工具"，找到"文件夹选项"

菜单如下：点击"查看选项"。

下拉滑条，找到"隐藏已知文件类型的扩展名"选项，将前面的对勾去掉。

如果您使用的是win10的话请参考《边学边做网页篇------初识HTML》，这也是我做的教程，不过以后都使用这个账号来发了。

step3：把"HTML框架"复制粘贴到"html框架.txt"文件中。HTML框架代码如下：

<!DOCTYPE HTML> <html> <head> </head><body> </body> </html>

代码讲解请参照《HTML是什么？——零基础自学网页制作》这篇教程中的讲解。

粘贴后效果如下：使用CTRL+s组合键保存文件。

step4：复制"html框架.txt"文件，更名为"第一个网页.txt"。原始的"html框架.txt"文件为以后备用。

如图所示：

step5：把"第一个网页.txt"的后缀名".txt"改为".html"。

首先将光标放在"第一个网页.txt"文件上，点击右键，选择"重命名"。如图：

选择".txt"

更改为".html",敲击回车键。这时会弹出一个对话框，如图:

大胆的点击"是"即可。

修改后文件是这样的，如图：因为我的默认浏览器是360，所以，".html"文件图标显示为360浏览器的图标，显示其他浏览器的图标也没有问题。

step6：将鼠标移动到"第一个网页.html"文件上，单击右键，选择打开方式，如图：

选择任何一个浏览器打开即可，我使用的是火狐浏览器（Firefox），打开后如图所示：空白一片。

点击键盘F12键，看一下控制台，如图：查看器中已经显示我们的代码框架了。成功！

如果网页是一道菜，那么，html框架我们可以理解为装菜的白盘子，所以我们打开框架时，浏览器显示一片白。下面我们为盘子中加些简单的"菜"。

为html页面添加标题与段落

首先我们为页面添加"标题"

在添加标题前，我们来看一下html框架代码中的内容，在<html></html>标签中有<head></head>和<body></body>两个兄弟标签。

我们在页面中看到的所有的内容都是添加到<body></body>标签中间！

<head></head>标签中的内容并不会显示在页面中。

那么如何添加"标题"呢？

标题在HTML中用<h></h>标签表示。在<h></h>中间加入文字内容即可。如下所示：

<h>第一个页面</h>

右键，使用"记事本"打开"第一个网页.html"文件。如图所示：如果您的"打开方式"中没有"记事本"请点击"选择默认程序"

在"其他程序"中找到"记事本"。点击"确定"。从此，"记事本"就一直存在于"打开方式"中了。

我们把这句代码粘贴到<body></body>之间。如下所示：保存后使用浏览器打开。

<!DOCTYPE HTML><html><head> </head> <body> <h>第一个页面</h> </body> </html>

然后，使用浏览器打开，如图所示：标题出现在页面中了。

下面，我们来添加段落内容。

段落在HTML中使用<p></p>标签添加。代码如下

<p>千里之行始于足下</p>

请各位自行将代码添加到"第一个网页.html"文件中吧！示例代码如下：

<!DOCTYPE HTML> <html> <head> </head> <body> <h>第一个网页</h><p>千里之行始于足下</p> </body> </html>

结果如图所示：

通过这个练习，我们可以发现一个规律，在<body></body>中，子元素代码的上下顺序代表了它在页面中显示的排版顺序。

这也简单回答了代码结构与排版的关系，html的标签语句只是标记了它所承载的信息的属性和版面位置。

基于这个特性，html被称为超文本标记语言。

下一期我们具体讨论页面中文字编辑的技巧。

喜欢的小伙伴请加关注，有任何问题请给我留言，欢迎大家给与指正！感激不尽！

HTML完整学习目录

HTML序章（学习目的、对象、基本概念）——零基础自学网页制作

HTML是什么？——零基础自学网页制作

HTML页面中head标签有啥用？——零基础自学网页制作

初识meta标签与SEO——零基础自学网页制作

HTML中的元素使用方法1——零基础自学网页制作

HTML中的元素使用方法2——零基础自学网页制作

HTML元素中的属性1——零基础自学网页制作

HTML元素中的属性2（路径详解）——零基础自学网页制作

使用HTML添加表格1（基本元素）——零基础自学网页制作

使用HTML添加表格2（表格头部与脚部）——零基础自学网页制作

使用HTML添加表格3（间距与颜色）——零基础自学网页制作

使用HTML添加表格4（行颜色与表格嵌套）——零基础自学网页制作

16进制颜色表示与RGB色彩模型——零基础自学网页制作

HTML中的块级元素与内联元素——零基础自学网页制作

初识HTML中的<div>块元素——零基础自学网页制作

在HTML页面中嵌入其他页面的方法——零基础自学网页制作

封闭在家学网页制作！为页面嵌入PDF文件——零基础自学网页制作

HTML表单元素初识1——零基础自学网页制作

HTML表单元素初识2——零基础自学网页制作

HTML表单3（下拉列表、多行文字输入）——零基础自学网页制作

HTML表单4（form的action、method属性）——零基础自学网页制作

HTML列表制作讲解——零基础自学网页制作

为HTML页面添加视频、音频的方法——零基础自学网页制作

音视频格式转换神器与html视频元素加字幕——零基础自学网页制作

HTML中使用<a>标签实现文本内链接——零基础自学网页制作

家好，今天我们将一起实践下如何手写固定表头，那么什么是固定表头呢？就类似 Excel 表格有个锁定表头的功能，方便用户查阅数据进行数据项的对比。虽然有不少相关插件提供了类似的功能，比如 ScrollMagic.js，但是今天的实例，我们将用纯原生的方式进行实现，当滚动条滚动至表格位置，固定表头位置，表格内容查看完后，取消固定表头的功能。

一、实践一个功能价格对比的表格案例

功能对比是一个很常用的功能，尤其是当网站服务越来越多时，就需要一个类似的功能，让用户能够直观的感受到各种服务的差异，帮助用户选择适合自己的方案。今天我们将通过一个界面十分漂亮功能价格对比的表格，展示固定表头的功能，实例操作展示如视频所示，当滚动条滚动至表格位置，添加表头固定样式，当滚动至表格底部，移除固定表头样式：

二、案例相关知识点复习

这篇案例我们是通过JS代码，判断滚动条的位置，动态添加和移除表头的固定样式（fix属性），这里就需要运用几个和位置相关 DOM API 才能顺利完成本案例，相关 API 介绍如下所示：

1、Window pageXOffset 和 pageYOffset 属性

pageXOffset 和 pageYOffset 属性返回文档在窗口左上角水平和垂直方向滚动的像素。

pageXOffset 设置或返回当前页面相对于窗口显示区左上角的 X 位置。pageYOffset 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。

pageXOffset 和 pageYOffset 属性相等于 scrollX 和 scrollY 属性。

2、clientHeight、offsetHeight、scrollHeight、offsetTop、scrollTop

clientHeight：包括 padding 但不包括border、水平滚动条、margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

offsetHeight：包括padding、border、水平滚动条，但不包括margin的元素的高度。对于inline的元素这个属性一直是0，单位px，只读元素。

scrollHeight: 因为子元素比父元素高，父元素不想被子元素撑的一样高就显示出了滚动条，在滚动的过程中本元素有部分被隐藏了，scrollHeight代表包括当前不可见部分的元素的高度。而可见部分的高度其实就是clientHeight，也就是scrollHeight>=clientHeight恒成立。在有滚动条时讨论scrollHeight才有意义，在没有滚动条时scrollHeight==clientHeight恒成立。单位px，只读元素。

scrollTop: 代表在有滚动条时，滚动条向下滚动的距离也就是元素顶部被遮住部分的高度。在没有滚动条时scrollTop==0恒成立。单位px，可读可设置。

offsetTop:当前元素顶部距离最近父元素顶部的距离,和有没有滚动条没有关系。单位px，只读元素。

本部分内容摘自
https://imweb.io/topic/57c5409e808fd2fb204eef52
作者：IMWeb
吴浩麟

3、getBoundingClientRect

getBoundingClientRect 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置。getBoundingClientRect是DOM元素到浏览器可视范围的距离（不包含文档卷起的部分）。

3.1、该函数返回一个Object对象，该对象有6个属性：top,lef,right,bottom,width,height；

3.2、这里的top、left和css中的理解很相似，width、height是元素自身的宽高;

3.3、但是right，bottom和css中的理解有点不一样。right是指元素右边界距窗口最左边的距离，bottom是指元素下边界距窗口最上面的距离。

本部分内容摘自：
https://juejin.im/entry/59c1fd23f265da06594316a9
作者：左鹏飞

三、创建 HTML 基础结构

1、创建三个基础的 sections 的区域

<section>...</section>
<section>...</section>
<section>...</section>

第一部分为页面标题内容，第三部分为内容介绍区域，这两部分非核心内容，只是用于内容占位，方便第二部分表格区域的展示，滚动此区域表头固定。

2、表格内容结构

我们将第二部分的表格放置在 container 的容器内，方便我们做响应式相关的设置，表格基础结构的内容如下：

<div class="container">
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>...</th>
          <th>...</th>
          <th>...</th>
          <th>...</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>...</td>
          <td>...</td>
          <td>...</td>
          <td>...</td>
        </tr>
         
        <!-- more rows here -->
      </tbody>
    </table>
  </div>
</div>

该表格包含4列，代表产品服务的对比项目和服务的级别，服务级别包含：入门级，基础级和专业级。

3、表头内容结构

表头部分应该很清楚的展示服务项目的介绍，让用户有购买服务计划的冲动，界面展示如下所示：

四、定义样式

1、定义基础样式

HTML结构准备好后，接下来我们定义相关基础的 CSS 样式，比如定义 CSS 自定义变量和常见的重置样式，示例代码如下：

:root {
  --white: white;
  --gray: #999;
  --lightgray: whitesmoke;
  --popular: #ffdd40;
  --starter: #f73859;
  --essential: #00AEEF;
  --professional: #FF7F45;
}
 
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
 
button {
  background: none;
  border: none;
  cursor: pointer;
}
 
table {
  border-collapse: collapse;
}
 
body {
  font: 18px/1.5 'Noto Sans', sans-serif;
  background: var(--lightgray);
}

由于文章篇幅有限，这里不会将所有的 CSS 代码进行罗列，这里只介绍最核心的样式内容。

2、定义表格样式

首先定义表格最大宽度，然后让其水平居中：

.container {
  max-width: 850px;
  padding: 0 10px;
  margin: 0 auto;
}
 
table {
  width: 100%;
}

接下来让行的容器为 flex 弹性盒子布局

table tr {
  display: flex;
}

然后让每列保持相同宽度，示例代码如下：

table th,
table td {
  width: 25%;
  min-width: 150px;
}

最后为了让单元格区域便于识别，我们用灰色边框进行区分，示例代码如下：

--lightgray: whitesmoke;
 
table th .info,
table td:not(:first-child) {
  border-left: 1px solid var(--lightgray); 
}

五、编写固定表头的相关脚本

HTML结构和CSS完成后，接下来我们编写脚本固定表头。

1、定义DOM变量

首先我们先定义一些关键DOM元素的变量，比如获取表格、表头等元素，示例代码如下：

const body = document.body;
const firstSection = document.querySelector("section:nth-child(1)");
const lastSection = document.querySelector("section:nth-child(3)");
const table = document.querySelector("table");
const thead = document.querySelector("table thead");
const mq = window.matchMedia("(min-width: 780px)");
const stickyClass = "sticky-table";
const sticky2Class = "sticky2-table";

2、获取一些元素相关的值

获取表格的 offsetWidth 宽度
获取表格距离视口顶部的距离（getBoundingClientRect().top）
获取表头的 offsetHeight 高度

基于这些我们定义相关的变量，获取相关的值：

let tableWidth = table.offsetWidth;
let tableOffsetTop = table.getBoundingClientRect().top;
let theadHeight = thead.offsetHeight;

你可能注意到了这里我们使用 let 定义变量，之所以用 let ，我们改变窗口的大小，这些相关的值也会发生变化，需要进行动态更新。

3、编写滚动的相关逻辑

每次我们滚动时，就会执行我们定义的 scrollHandler 函数，我们这个函数只会在窗口宽度大于 780px 才会执行固定表头的逻辑，小屏设备则没有相关效果。

获取用户从视口顶部滚动的距离（pageYOffset）
获取最后一部分内容区域距离窗口顶部的高度（getBoundingClientRect().top）
检测滚动条是否滚动到表格区域。
如果滚动到表格区域，获取重置后的表头宽度。
接下来我们来判断第三部分内容区域距离视口顶部的高度是否大于表头的高度。
如果还在滚动表格的内容，我们将添加固定表头的样式stickyClass，移除取消固定的样式sticky2-table。
如果滚动条滚动至第三部分内容区域，我们将移除固定表头的样式stickyClass，添加移除固定表头的样式 sticky2-table。
如果屏幕宽度小于780px，取消固定表头的逻辑，移除stickyClass，sticky2-table 相关的样式

基于以上逻辑我们实现相关的代码逻辑：

window.addEventListener("scroll", scrollHandler);
 
function scrollHandler() {
  if (mq.matches) {
    // 1
    const scrollY = window.pageYOffset;
    // 2
    const lastSectionOffsetTop = lastSection.getBoundingClientRect().top;
    // 3
    if (scrollY >= tableOffsetTop) {
      // 4
      thead.style.width = `${tableWidth}px`;
      // 5
      if (lastSectionOffsetTop > theadHeight) {
        // 6
        body.classList.remove(sticky2Class);
        body.classList.add(stickyClass);
        thead.style.top = 0;
        body.style.paddingTop = `${theadHeight}px`;
      } else {
        // 7
        body.classList.remove(stickyClass);
        body.classList.add(sticky2Class);
        thead.style.top = `calc(100% - ${theadHeight}px)`;
      }
    } else {
      // 8
      body.classList.remove(stickyClass, sticky2Class);
      body.style.paddingTop = 0;
      thead.style.width = "100%";
      thead.style.top = "auto";
    }
  }
}

编写相关的样式代码，stickyClass 和 sticky2-table 控制表头的固定和取消表头的固定

table thead {
  transition: box-shadow 0.2s;
}
 
.sticky-table table thead {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
}
 
.sticky-table table thead {
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.12);
}
 
.sticky2-table table thead {
  position: absolute;
  left: 0;
}

六、编写窗口大小发生变化的相关逻辑

由于窗口大小并非固定，我们会经常会拖动或调整窗口的大小，因此相关元素的宽度和视口高度都要重新计算，这里我们需要添加 resize 事件进行监听，示例代码如下：

window.addEventListener("resize", resizeHandler);
 
function resizeHandler() {
  if (mq.matches) {
    tableWidth = firstSection.offsetHeight;
    tableOffsetTop = table.offsetTop; 
    theadHeight = thead.offsetHeight;
  } else {
    body.classList.remove(stickyClass, sticky2Class);
    body.style.paddingTop = 0;
    thead.style.width = "100%";
    thead.style.top = "auto";
  }
}

七、源码及效果展示

最终的效果体验，大家可以点击文末 了解更多 链接进行体验（手机横屏体验），由于文章篇幅有限，完整的源码大家可以私信“表头”获取源码链接。

小节

到此，我们一起完成了这个案例，通过本案例，我们学会了如何使用原生的方式动态实现固定元素，并在一定的时机取消固定。感谢你的阅读，如果你喜欢我的分享，麻烦给个关注、点赞加转发哦，你的支持，就是我分享的动力，后续会持续分享更实用的案例，欢迎持续关注。

文章来源：
作者：George Martsoukos
网站：tutsplus
非直译

整合营销服务商