精美form表单样式

在网页设计中，Form表单是不可或缺的一部分，它被广泛应用于用户反馈、注册、登录和数据提交等功能中。如何为Form表单添加一个精美的样式是很多设计师关注的问题之一。下面我们将介绍一些常见的Form表单样式，并附加使用方法和实际案例分析。

一、Material Design风格

Material Design是谷歌推出的一种设计风格，该风格的特点在于色彩鲜艳、图标简单美观、排版规范。它所强调的“卡片式”设计理念，为Form表单提供了很好的样式参考。

使用方法：

基本结构：

```html

```

CSS样式：

```css

/* MD-Form */

.md-form {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

height: auto;

padding: 20px;

}

/* MD-Textarea */

.md-textarea {

position: relative;

width: 100%;

height: auto;

margin: 20px 0;

}

.md-textarea .md-textarea__input {

width: 100%;

height: auto;

border: 1px solid #ddd;

padding: 5px 10px;

}

.md-textarea .md-textarea__label {

position: absolute;

top: 0;

left: 0;

color: #666;

transition: .3s;

pointer-events: none;

}

.md-textarea .md-textarea__input:focus + .md-textarea__label,

.md-textarea .md-textarea__input:not(:placeholder-shown) + .md-textarea__label {

font-size: 12px;

top: -20px;

color: #f96868;

}

/* MD-Button */

.md-button {

display: inline-block;

padding: 10px 20px;

border: none;

background-color: #4285f4;

color: #fff;

font-size: 16px;

cursor: pointer;

transition: .3s;

}

.md-button:hover {

background-color: #2b5ab1;

}

```

案例分析：


上图是一个使用Material Design风格的登录表单。可以看到，该表单使用了典型的卡片式布局，并采用了谷歌蓝和白灰色相结合的颜色搭配，使表单整体色彩较为突出、清新。需要注意的是，该表单在输入框和按钮的样式上都采用了Material Design独特的动效，使表单看上去更加生动、互动性强。

二、扁平化风格

扁平化表单风格在过去几年中越来越流行，主要特点是取消了过多的渐变色和立体感，追求简化、清晰的设计效果。扁平化风格的Form表单也很常见，其样式简单、线条细致、背景色简洁。 以下是一个 Materialize UI 库中的扁平 Form 表单。

使用方法：

基本结构：

```html

```

CSS样式：

```css

.form-group {

margin-bottom: 20px;

}

.form-control {

border-radius: 0;

border: none;

outline: none;

border-bottom: 2px solid #e1e1e1;

padding: 8px 10px;

font-size: 16px;

}

.btn-primary {

background-color: #0078fe;

border: none;

padding: 10px 20px;

font-size: 16px;

border-radius: 0;

}

```

案例分析：


上面这个简单的登录表单，可以看出它使用了清新、轻盈、极简主义的扁平化风格造型。表单整体设计简单而有力，表单每种表单元素都没有过多的繁琐和花样，而是采取单一的颜色、线条清晰、对齐美观等传统美学原则，从而呈现出一种极简、清新、轻盈的感觉。

三、圆角化风格

圆角化风格最基本的特点是，将元素的边缘元素都处理成圆角样式，这样能使框架看起来更加柔和，人性化。圆角化风格的表单样式简洁、可爱，充满趣味性。

使用方法：

基本结构：

```html

```

CSS样式：

```css

.form-group {

padding: 10px 5px;

}

.form-control {

border-radius: 20px;

border: none;

outline: none;

background-color: #f1f1f1;

padding: 10px 20px;

font-size: 16px;

margin-top: 5px;

margin-bottom: 5px;

}

.btn-primary {

background-color: #f54768;

border: none;

padding: 10px 30px;

font-size: 16px;

border-radius: 20px;

}

```

案例分析：


上图是一个采用圆角化风格的表单样式。表单每个元素都有一个对应的圆角，整个表单看上去可爱又舒适。

四、卡片风格

卡片式设计已经成为了现代化UI设计的一种无可替代的元素之一。它是一种理念，指通过贴合现实世界的折纸形状所构建的一个可交互的界面元素，可以使信息变得更加生动、更可视化。卡片风格的表单页面将常规的表单UI视图分离开来，并呈现为一组类似卡片的UI组成的设计。

使用方法：

基本结构：

```html

```

CSS样式：

```css

.card {

display: inline-block;

border-radius: 5px;

box-shadow: 0 0 5px rgba(0,0,0,.1);

border: none;

overflow: hidden;

margin: 10px;

width: 400px;

}

.card .card-body {

padding: 20px;

}

.form-group {

margin-bottom: 20px;

}

.form-control {

border-radius: 0;

border: none;

outline: none;

border-bottom: 2px solid #e1e1e1;

padding: 8px 10px;

font-size: 16px;

}

.btn-primary {

background-color: #0078fe;

border: none;

padding: 10px 20px;

font-size: 16px;

border-radius: 0;

}

```

案例分析：


上图展示了一个简单的登录表单基于卡片式设计。通过这种设计，表单看起来舒适和易读性更高。打破了以往表单单调的垂直线条，增加了设计的趣味性和设计的交互性。

总结

以上介绍的四种表单风格，分别为Material Design风格、扁平化风格、圆角化风格和卡片风格。它们都可以显著提高表单在用户心目中的印象，让用户感受到良好的体验感。对于Web设计人员，选择合适的表单风格将是实现视觉和用户体验最重要的因素之一。 如果你喜欢我们三七知识分享网站的文章， 欢迎您分享或收藏知识分享网站文章 欢迎您到我们的网站逛逛喔！https://www.37seo.cn/