初学者的CSS表单样式指南

迪鲁宾
121 阅读19分钟

简单地说，HTML或网络表单大多被称为网络元素，其目的是使用户能够输入他们的信息，其中可能包括他们的姓名、年龄、性别或信用卡号码等，然后被发送到服务器进行处理。

网络表格非常有用，现在是网络开发的一个非常重要的方面。想象一下，由于你想申请他们大学的课程，而不得不到外国去填写一个表格。

由于每所现代大学都有一个带表格的网站，学生可以坐在家里，在他们方便的时间内申请，省去了他们亲自到学校的时间。然后学校收集这些信息以决定候选人是否有资格在他们的大学学习。

网络表格不仅限于学校，银行、电子商务等企业也使用网络表格来收集客户的信息。这有助于他们决定如何更好地满足客户的需求。

这正是网络表单的设计目的--收集信息进行处理。

在这篇关于CSS表单的教程中，我们将仔细研究如何用CSS对表单进行样式设计以及更多的内容。

为CSS表单设计样式的前提条件

在本篇CSS表单教程结束时，你将能够在HTML中建立一个使用CSS进行造型的表单。 不过，为了更好地理解本博客中关于CSS表单的内容，你需要有HTML和CSS的基本知识。

这里有一个我们要建立的项目的成品样本。

finished project of what we'll be building

这里是这个样式化CSS表单项目的源代码的CodePen链接。

请看Pen
如何用CSS样式化表单。Ocxigin (@ocxigin) 的初学者指南
onCodePen.

创建HTML模板

让我们从创建网站的模板（即网站的HTML代码结构）开始。这包括标题和正文标签，如下图所示。

创建完我们的HTML模板后，现在将其保存为index.html文件，我使用的是VS Code，但你可以使用你选择的任何IDE。

创建必要的HTML标签

现在，让我们为我们的风格化CSS表单项目创建必要的HTML标签。

从上面的代码示例中，让我们看看根据分配给它们的类名，每个标签应该做什么。

  • site__container。这个类被分配给一个div标签，它包裹着我们的HTML标签中的每一个其他标签。
  • hero__images。这个类被分配给主标签。这个标签是我们的英雄图像将使用CSS分配的地方。
  • card__wrapper。这个类被分配给嵌套在 hero__image 标签内的另一个主标签。这个标签包住了构成我们的网络表单的所有标签。
  • card__forms。这个类被分配给section标签，它是我们的web表单的主要标签。
  • Items__wrapper。这个标签包裹着div、input、button和link等标签，这些标签都是网络表单中的项目。
  • site__logo。 这是网站的标志。
  • sign__caption：这是网站的标志。这个标签帮助告知用户为什么他们应该使用网络表单进行注册/登录。
  • user_id。这个标签包裹着输入标签，用户必须在这里输入他们的用户名和密码。
  • checkbox__wrapper。它围绕着输入、a（锚）和标签 标签。在这里，我们询问用户是否愿意保存他们的用户ID，这样他们以后访问网站时就不用再重新输入了，点击复选框。我们还询问他们是否有忘记的密码需要找回。
  • btn__wrapper。这包裹着表单的主按钮。这是用户点击的按钮，帮助他们登录到网站。
  • signup__option。这个标签包裹着段落标签和一个链接标签。这里我们为没有账户的新用户提供了一个注册的选项。

现在我们已经完成了HTML模板的设置，保存它并在你最喜欢的浏览器上运行它。本CSS表格教程中的代码是使用谷歌浏览器运行的。

浏览器输出。

Brower Output:

你的代码应该看起来像这样。你会注意到，从我们的浏览器输出来看，这个网站是多么朴素和简单。这是因为我们还没有添加CSS。在本教程关于CSS表单的下一节中，我们将讨论这个问题。

如何用CSS对常见的表单元素进行样式设计？

表格元素是网站上最常见的一些元素。每个网站都必须有这些元素，从登录表格到搜索框和按钮，才能发挥作用。这些元素有时会在设计和造型中被忽略，这可能导致它们相互融合，使你的网站的用户界面看起来很沉闷。避免这种情况的一个好办法是使用CSS来改变文本字段和按钮等表单元素的外观。

下面是你如何对常见的CSS表单元素进行样式设计。

  1. 在你的Visual Studio代码中，创建一个新文件并命名为main.css。这将是一个CSS文件。从我们的HTML文件中注意到，在head标签中，我们有一个指向main.css的链接标签。这个链接标签可以帮助我们将HTML和CSS文件连接起来。对HTML的任何改动都会影响到CSS文件，反之亦然。

main.css

  1. 让我们在main.css中添加相关的CSS代码，这样我们就可以为我们先前用HTML创建的无聊页面设置样式。

CSS code in main.css

  1. 你的编辑器应该像这样打开。现在我们来写一些CSS。

应用通用选择器

通用选择器是一个CSS概念，它可以让你一次性定义样式，并在整个网站上重复使用。这意味着你只需要定义一次 "一件事"，然后你就可以在其他页面上使用它。这为我们节省了大量的时间，并使代码更易于维护。

为你的CSS表单项目输入并运行下面的代码。

*, *::after, *::before {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

浏览器输出。

Browser Output:

从上面的CSS代码来看，我们使用了一个CSS通用选择器来针对网页上的所有元素。我们添加了一个padding 0px、margin 0px和box - sizing的border-box。这有助于去除网页上的所有空白，这样我们在对CSS表格进行造型时就不会有不必要的空白干扰了。

应用视口宽度（vw）和视口高度（vh）。

应用视口宽度（vw）和视口高度（vh）是CSS3中的新属性，有相当多的用途。默认情况下，vw的单位等于包含元素宽度的1%。vh也是如此。使用这些属性，你可以在你的网站上做一些很酷的事情。

.site__container {
    width: 100vw;
    height: 100vh;
}

我们以一个类为**.site__container的div标签为目标，并为其分别指定了100vw** 和100vh 的宽度 和高度 。这有助于确定我们的网页视口的大小，以占用浏览器的全部宽度和高度。

当你刷新你的浏览器时，你不会看到任何影响，因为其他HTML标签没有被赋予特定的尺寸或样式。

测试你的CSS表单的浏览器兼容性。现在就试试LambdaTest!

应用英雄图像

英雄图像是博客设计中的一个常见元素。它是一个大的、醒目的图像，横跨整个页面的宽度，通常也有一点页面的高度。它通常被用来吸引人们对一篇文章或页面的最初关注，并作为该网站部分中未来文章或页面的锚点。英雄图像也可以通过使其成为页面上的中心点来突出诸如图像、视频或其他互动元素等内容。

.hero__images {
    height: 100%;
    background-image: url("./delivery-man.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

浏览器输出。

Browser Output:

从上面的CSS代码中，我们给hero__images类分配了一个100%的高度。这有助于hero__images 类继承设置在直接父类上的相同高度值，即100vh。这有助于用于占据浏览器视口的背景图像，然后我们设置一个background-image。你可以在这里下载该图像。

我们还添加了一个no-repeat的background-repeat，以防止它重复；一个cover的background-size，这有助于设置图像覆盖整个视口；一个center的background-position，这有助于将图像放在视口或容器的中心。

用Flexbox使表单居中

用CSS Flexbox将表单居中很容易。唯一的问题是，它要求你将表单包裹在一个具有指定宽度的父容器中，这有点麻烦。值得庆幸的是，有一个更好的解决方案，可以在所有浏览器上使用。你需要三个元素。

  • 实际的表单。
  • 一个包装元素（父元素）。
  • 一个用于实际内容的元素（子元素）。

我们将使用CSS Flexbox将网页表格置于浏览器中心。 输入并运行下面的代码。

.card__wrapper {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

浏览器输出。

Browser Output

在CSS表单造型教程中，我们以card__wrapper 类为目标，设置了100%的高度 ，flex的显示方式 ， 居中的justify-content，以及居中的align-items。这有助于在对CSS表单进行样式设计时，将表单在水平和垂直方向上置于中心位置。

表格元素的样式

一个典型的表单的HTML由各种输入元素组成，每个元素代表不同类型的数据。在CSS中，你可以用各种方式为输入元素定型，以在它们之间形成区别。

在这里，我们对CSS表单应用样式，并添加特定的宽度和高度。

.card__forms {
    display: flex;
    justify-content: center;
    width: 400px;
    height: 400px;
    background-color: rgb(1, 32, 32, 0.4);
    border-radius: 0.5rem;
    box-shadow: 3.5px 3.5px 4px 2px rgba(0, 0, 0, 0.3);
    border-top: 2px solid rgb(89, 250, 156);
    border-bottom: 2px solid rgb(89, 250, 156);
}

浏览器输出。

Styling the form element

我们的目标是card__form类，应用flex的显示方式 ，居中的justify-content，宽度和高度 为400px，以给它一个定义的尺寸，背景色为rgb(1, 32, 32, 0.4)。0.4的最后两个整数是透明值，因为它们代表0.4 值的不透明度 。我们还添加了一个边框半径为0.5em、箱形阴影、边框顶部和 边框底部为**2px solid rgb(89, 250, 156)**的边框。这就形成了你可以在我们的CSS表单的顶部和底部看到的纯石灰色。

表单标识的样式

许多网站使用表单标识来为表单中的输入字段和提交按钮样式。第一个原因是，表单与整体设计一致。第二个原因是，由于提交按钮使用的是颜色，所以它更容易区分普通的输入字段和提交按钮。

在这里，我们对表单元素上的logo进行了样式设计。

.site__logo {
    width: 40px;
    padding: 4px;
    margin: 2.0rem 5rem;
    text-align: center;
    border-radius: 50%;
    font-size: x-large;
    font-weight: bolder;
    font-family: 'Trebuchet MS', sans-serif;
    background-color: rgb(89, 250, 156);
    color: rgb(1, 32, 32);
    cursor: default;
}

浏览器输出。

Browser Output:

我们以site__logo类为目标，添加了40px的宽度 ，4px的padding ，顶部和底部的margin 分别为2.0rem 和5rem （以增加额外的空白空间）。

我们还应用了text-aligntocenter （使标志居中），border-radius为50% （使标志为圆形），font-size为 x-large，font-weight为bolder，font-family为'Trebuchet MS'。

而背景颜色为rgb(89, 250, 156)，颜色 为rgb(1, 32, 32)，光标 为默认。

网站标题的样式

网站标题是出现在你网站每个页面顶部的一小段文字。这可以是你想要的任何文本。它通常用于识别谁创建了网站，并可能提供关于网站内容的法律信息。

通过对这个文本进行造型设计，我们可以使它更加突出或出现在一个页面的多个地方。

在这里，我们对CSS表格上的标题进行了样式设计。

.sign__caption p {
    color: white;
    font-family: calibri;
    font-style: italic;
    text-transform: lowercase;
    margin-bottom: 1.5rem;
}

浏览器输出。

Browser-Output-Styling-Caption

我们选择了sign__caption 类，并把它里面的p标签作为目标。我们应用了白色的文本颜色 ，calibri的字体，斜体的字体风格 ，小写的文本转换，以及0.5rem的下边距（以便在底部应用额外的空白）。

输入标签的样式

输入标签默认有几种样式。它具有文本字段的外观，在大多数情况下使用默认样式是个好主意。默认样式在元素之间提供了足够的对比，这样用户就可以很容易地阅读和理解他们所填写的内容。

在这里，我们对CSS表单上的输入标签应用了样式设计，用户可以在这里输入他们的信息。

.user_id input {
    width: 100%;
    display: block;
    outline: none;
    border: 0;
    padding: 1rem;
    border-radius: 20px;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.user_id input::placeholder{
    color: rgb(1, 32, 32);
}

.user_id input:active {
    outline: 2px solid rgb(89, 250, 156);
}

浏览器输出。

Browser Output

我们将上面代码样本中的以下数值应用于嵌套在用户ID类中的输入标签。

  • 宽度：100%（这样我们的输入标签就能在容器中占据完整的尺寸）。
  • display:块状 （所以标签可以被正确地放在中心）。
  • outline: ofnone (当我们点击输入标签时，移除其周围的轮廓)。
  • border:0px (删除输入标签周围的灰色边界)。
  • padding:1rem (在输入标签内添加更多空间，为用户的输入（如用户名和密码）提供空间)。
  • border-radius:20px (在边缘给它一个圆形的曲线)。
  • margin:0.8rem 0 (0.8rem在顶部和底部增加了额外的空间，而0意味着在输入标签的左边和右边不应增加空间)。
  • 颜色：rgb(1, 32, 32)。

对于占位符，我们添加了rgb(1, 32, 32)的文本颜色，它负责用户名和密码文本。而对于活动状态 ，我们添加了一个2px solid rgb(89, 250, 156)的轮廓 色。

当你点击CSS表单的输入字段时，你会看到轮廓的颜色。

为忘记密码设置样式

有必要对忘记密码表单中的密码字段及其标签进行造型。为此，你可能需要结合使用标准的CSS属性和一些自定义属性。

在这里，我们对标签 和一个 标记进行样式设计，为希望自己的账户保持登录状态的用户和忘记密码的用户提供两种选择，以恢复密码。

.checkbox__wrapper label {
        color: white;
        font-family: calibri;
        text-transform: lowercase;
}

.checkbox__wrapper a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.checkbox__wrapper a:hover {
        color: rgb(255, 255, 255);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: normal;
}

浏览器输出。

Browser Output

在这个关于CSS表单的教程部分，我们针对嵌套在**.checkbox__wrapper类中的标签**，对其应用了以下样式。

  • 颜色：白色，font-family为calibri
  • text-transform: 小写的，而在锚标签上，我们应用了一个
  • 颜色：rgb(89, 250, 156)。
  • text-decoration:为none（去掉锚标上默认的蓝线）。
  • 字体风格为斜体，以区别于标签文本。

由于锚标签是一个要发送请求的链接，我们决定添加一个悬停状态，也就是通知用户这是一个可点击的链接。

在悬停状态下，我们在悬停时添加了rgb(255, 255, 255)的文本颜色，字体风格设置为正常，以恢复它。

表格按钮的样式

表单按钮是用户在你的网站上首先看到的东西。一个漂亮的按钮可以给人留下好印象，但一个糟糕的按钮会让用户在阅读任何内容之前就留下不好的印象。

在这里，我们对CSS表格上的按钮标签进行了造型设计。这个按钮使用户能够登录网站。

.btn__wrapper button {
    width: 100%;
    border: none;
    padding: 1rem;
    border-radius: 20px;
    text-transform: uppercase;
    font-weight: bolder;
    margin: 0.8rem 0;
    color: rgb(1, 32, 32);
}

.btn__wrapper button:hover {
    background-color: rgb(89, 250, 156); 
    color: white;
    transition: all 0.5s ease-in-out;
    cursor: pointer;
}

浏览器输出。

Browser Output

在本节关于CSS表单的教程中，我们以嵌套在btn__wrapper 类中的按钮标签为目标，并应用了。

  • width:为100%，使其在容器内有一个完整的宽度。
  • border: 设置为none ，以去除按钮周围的灰色边框。
  • padding: 为1rem，在 "SIGN IN "文本和按钮标签之间添加空间。
  • border-radius:20px，给边框应用一个圆角样式。
  • text-transform：设置为大写字母以使文本大写。
  • font-weight: 设置为bolder，使文字变粗。
  • margin:在顶部和底部设置为0.8rem，以便在对象周围提供白色空间，而在左侧和右侧为0。
  • 颜色为rgb(1, 32, 32)。

在悬停时，我们将背景颜色设置为rgb(89, 250, 156)，文本颜色设置为白色，以便在我们悬停时创造一种反转效果，过渡期全部为0.5s的缓进缓出，并设置了一个指针的游标。

要看到这些变化，请移动你的鼠标指针，在按钮上悬停。

签到选项的样式

实际的注册选项被设计成看起来像一个按钮。这个按钮的设计是简单和可识别的，这样用户就会知道它的作用。电子邮件地址的输入尺寸比平时要小一些，以确保用户不必在每次添加电子邮件地址时都要向上和向下滚动。

在这里，我们对p和a标签进行了样式设计，在这里我们为那些还没有账户但想注册的用户提供了选项。

.signup__option p {
    color: white;
        font-family: calibri;
        text-transform: lowercase;
}
.signup__option a {
        color: rgb(89, 250, 156);
        font-family: calibri;
        text-transform: lowercase;
        text-decoration: none;
        font-style: italic;
}

.signup__option a:hover {
    color: rgb(255, 255, 255);
    font-family: calibri;
    text-transform: lowercase;
    text-decoration: none;
    font-style: normal;
}

浏览器输出。

Browser Output 2

从浏览器的输出中，你会注意到 "保持登录/忘记密码"和 "还没有账户？/注册！"看起来是一样的。好吧，你猜对了!

我们必须复制checkbox__wrapper 类的标签的CSS样式并粘贴到**.signup__option a上，然后复制忘记密码的样式并粘贴到注册**类上。

现在我们应该有同样的效果了。

这里有一个关于CSS表单样式的完成项目的链接。

请看笔者
：如何用CSS设计表单样式。Ocxigin (@ocxigin) 的初学者指南
onCodePen.

在3000多个真实设备上测试你的注册表单。现在就试试LambdaTest!

你想补习一下你的CSS属性吗？请看我们的CSS小抄教程。

用LT浏览器测试CSS表单

现在我们已经完成了CSS表单的样式设计项目，在部署之前（在上传到服务器之前）测试我们的网站或网络应用通常是一种最佳做法。

使用LambdaTest等跨浏览器测试工具，我们可以在一个由3000多个真实浏览器、操作系统和设备（包括手机、平板电脑和台式机）组成的在线浏览器场上进行网络测试。这有助于我们测试网站在不同操作系统上跨浏览器的响应能力。

LambdaTest的移动友好型测试工具可以为您节省时间和金钱。LT浏览器带有50多个预装的移动友好视口和先进的开发者工具，用于创建移动应用程序。

按照以下步骤启动LT浏览器进行响应式测试。

  1. 首先，启动LT浏览器。
  2. 这将打开LT浏览器的主页，在那里你有一个不同的操作系统预装设备的列表可供选择。

LT Browser Steps

  1. 当你的LT浏览器保持打开状态时，从代码笔地址栏中复制并粘贴这个链接（https://codepen.io/ocxigin/pen/gOebaWb），并将其粘贴到LT浏览器地址栏上，然后点击刷新图标，重新加载页面。

Step for LT Browser

从LT浏览器输出的代码中，你会注意到你所选择的每一种设备是如何影响网络表格的结构和布局的。

LT浏览器的作用远不止这些。我们还可以通过启动开发工具来进行调试，可以通过点击设备预览标签上方的调试图标来进行调试。

LT Browser does much more

为了更好地了解你的网站在多个操作系统的多个浏览器上的扩展情况，请使用你主屏幕上的预装设备，选择并查看你的网站在这些设备上的表现。

总结

你已经学会了如何使用CSS来设计表单。你还学会了如何使用Flexbox使项目居中，在按钮上使用过渡，应用背景图像，以及如何使用LambdaTest对你的网站或网络应用进行交叉编辑。

好了！我们已经走到了本课的尾声。我们已经走到了本教程的尽头。
，感谢你花时间阅读本文，完成了本教程。请随时提出问题。我很乐意回答。你可以在Twitter和其他社交媒体上找到我@ocxigin。

#Cheers

常见问题(FAQ)

为什么CSS表格很重要？

CSS（层叠样式表）允许我们通过应用一些CSS属性来对输入字段进行风格化处理--比如赋予背景颜色，调整其高度和宽度，添加边距和填充等。

avatar
文章
阅读
粉丝