CSS 堆叠表单：如何创建漂亮的多层表单效果

拼搏现实的明天。 2024-03-17 19:11 11阅读 0赞

CSS 属于一类独特的语言，称为样式表语言。 它主要用于定义您的网页的演示文稿。 虽然 HTML 允许您指定页面的结构，但它是用于设置样式的 CSS。 否则，您最终会得到一个非常没有吸引力的网站。

专注于 CSS 是提高网站吸引力的更好方法之一，尤其是在增强用户体验方面。 这样，您还可以增加流量。 对于初学者，您可以使用堆叠形式。下面就和一起看看如何快速的在 HTML 中使用 CSS 创建堆叠表单吧。

### 什么是堆叠表格？ ###

堆叠表单允许您创建一个专门的表单，您可以在其中将标签和输入放置在彼此之上，而不是将它们放置在水平模式中。

这是您如何做到的。

### HTML 代码 ###

使用 HTML 元素 <form> 来处理您的信息。 为相关字段添加标签并分配相关输入字段。 在这个例子中，我们要求用户提供他们的全名和电子邮件地址以及表单的输入类型文本，而下拉菜单是通过选择 id 创建的，以帮助他们选择他们的行业。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 </td> 
 <td> &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;h3&gt;什么是堆叠表格?&lt;/h3&gt; &lt;p&gt;以下是创建堆叠表单的方法。&lt;/p&gt; &lt;div&nbsp;class="container"&gt; &lt;label&nbsp;for="fullname"&gt;完整名称&lt;/label&gt; &lt;input&nbsp;type="text"&nbsp;id="fullname"&nbsp;name="firstname"&nbsp;placeholder="输入您的完整名称"&gt; &lt;label&nbsp;for="email"&gt;Email 地址&lt;/label&gt; &lt;input&nbsp;type="text"&nbsp;id="email"&nbsp;name="email"&nbsp;placeholder="输入您的电子邮件 "&gt; &lt;label&nbsp;for="dept"&gt;部门&lt;/label&gt; &lt;select&nbsp;id="country"&nbsp;name="country"&gt; &lt;option&nbsp;value="IT"&gt;信息技术&lt;/option&gt; &lt;option&nbsp;value="CS"&gt;客户支持&lt;/option&gt; &lt;option&nbsp;value="Sales"&gt;销售&lt;/option&gt; &lt;/select&gt; &lt;input&nbsp;type="submit"&nbsp;value="提交"&gt; &lt;/form&gt; &lt;/div&gt; &lt;/body&gt; </td> 
 </tr> 
 </tbody> 
</table>

但是，运行这段代码只会产生平淡的形式，而不会垂直堆叠字段。 这就是你必须添加 CSS 的地方。

### CSS 代码 ###

现在，创建一个单独的样式表并将其添加到 HTML 的 body 标记之前：

<table> 
 <tbody> 
 <tr> 
 <td> 1 </td> 
 <td> &lt;head&gt; &lt;link&nbsp;rel="stylesheet"&nbsp;href="StackedForm_CSSPart.css"&gt; &lt;/head&gt; </td> 
 </tr> 
 </tbody> 
</table>

接下来，选择 HTML 的正文、输入类型和容器，并通过 CSS 设置它们的样式。 这将包括尝试不同的 CSS 属性，例如字体系列、宽度、填充、边距、显示、边框等，并添加您的首选值。 这样，您最终会得到一个适合您确切偏好的堆叠表格。 这是一个例子。

<table> 
 <tbody> 
 <tr> 
 <td> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 </td> 
 <td> body&nbsp;{ font-family:&nbsp;Calibri; } input[type=text],&nbsp;select&nbsp;{ width:&nbsp;25%; padding:&nbsp;12px&nbsp;20px; margin:&nbsp;8px&nbsp;10; display:&nbsp;list-item; border:&nbsp;4px&nbsp;double&nbsp;#39A9DB; border-radius:&nbsp;8px; box-sizing:&nbsp;border-box; } input[type=submit]&nbsp;{ width:&nbsp;25%; background-color:&nbsp;#F8E2E6; color:&nbsp;#0000FF; padding:&nbsp;12px&nbsp;18px; margin:&nbsp;20px&nbsp;0; border:&nbsp;none; border-radius:&nbsp;6px; cursor:&nbsp;pointer; } div.container&nbsp;{ border-radius:&nbsp;10px; background-color:&nbsp;#39A9DB; padding:&nbsp;40px; } </td> 
 </tr> 
 </tbody> 
</table>

### 现在您可以在 CSS 中创建堆叠表单 ###

通过本文，您学习了如何在 CSS 中创建堆叠表单。 通过练习，您将能够改进您的表单并使您的网站更加用户友好。通过展览项目日复一日地磨练您的 CSS 技能，成为一名时尚的网页设计师和更高效的网页开发人员。