风格的形成

形式非常适合领先一代,收集反馈,和其他有价值的业务用例。学习如何使用形式。表单元素也可以用独特的方式风格和定位。

在这节课中

您可以定制的表单元素,如删除输入字段边界,改变背景颜色等……你也可以定制和样式文件上传按钮在它的各种状态。深入阅读指南文件上传。然而在这节课中,我们将介绍如下:

1. 造型形式排版
2. 样式表单状态
3. 样式的焦点状态的表单字段
4. 使用列快速布局表单元素

造型形式排版

你可以风格字段标签,占位符文本,以及输入文本。

样式字段标签

如果你使用字段标签,您可以添加一个类标签。这会让你造型变化,适用于该类的每个字段标签。

专业技巧——字段标签和占位符

字段标签可以帮助显示表单元素的目的。如果你喜欢更最小的方法,你可以删除它们从表单通过选择他们,按下删除。然后添加占位符文本字段。

占位符文本样式

你可以通过占位符文本菜单的选择器。你可以风格字体、背景和阴影。

样式输入文本

当你添加排版样式文本框或文本区域里面会影响类型的文本。风格这个文本,首先您需要添加示例文本。按照以下步骤添加输入文本和风格:

1. 创建一个新的类和应用类中的每个文本框的形式。
2. 切换预览模式
3. 输入一些示例文本到任何文本字段。
4. 切换预览模式再次回到设计师。示例文本将显示在输入字段。
5. 选择文本框
6. 去风格的面板
7. 让你的排版样式变化和更新在画布上看到它们

样式表单状态

您可以编辑默认的成功和错误消息通过替换文本,甚至添加其他元素的包装错误或成功。你可以每一个元素的包装器。获得成功和错误消息:

1. 选择包装形式
2. 去元素设置选项卡
3. 下表格的设置,点击您想要编辑的状态
4. 选择任何出现的元素和风格你喜欢

了解更多关于成功和错误消息。

场焦点状态

一个文本字段内集中当你点击字段或当你导航到它使用Tab键在你的键盘。

当HTML元素集中,许多浏览器将添加一个固体蓝色边框。你可以覆盖这个默认浏览器通过样式集中的任何元素。

访问集中状态:

1. 选择文本框
2. 去样式面板
3. 以上选择器领域,c舔州
4. 选择集中从菜单中

样式变化你这里有用户会看到当他们点击文本框内。你喜欢的你可以风格集中状态。您可以添加边界或盒阴影和调整的一些特性使它更明显的用户,这个特殊的领域集中。你可以预览页面,点击不同的文本字段,看看它会看起来一旦出版。

学习如何编辑其他州的任何元素。

快速布局与列

有很多方法可以直观地结构形式。列可以是极有帮助的。了解更多关于列。

使用列结构表单:

1. 删除一个列元素的形式。
2. 设置有四列的元素列设置
3. 每个表单元素拖拽到列

字段自动占用的全部宽度无论他们在里面,所以你不必手动大小。

默认情况下,按钮将只有其文本内容一样宽。你可以设置一个按钮的宽度100%或显示设置阻止使它能跨越的全宽列表单字段。

在平板电脑视图的事情可能会有点紧。调整行如何看不同的设备:

1. 选择一行
2. 打开元素设置面板
3. 调整设置下的其他视图列选项