我也想设计一个表格

在主页创建中也有很多机会使用该表单。“留言提交表格”以及“公告板/博客等的提交表格”是代表性的，但是另外还有“问卷形式”等的各种其他的输入形式。

可以使用表单元素和相关元素轻松创建这些表单。但是，在这些形式中，输入字段的背景始终为白色，有可能它不适合默认的页面设计。所以这一次，我将向您展示如何自由地装饰表单的背景。

消息传输形式

例如，考虑以下“消息传输形式”设计。

这是一种常见的配置。实现此表单的HTML源代码如下。

名称： 电子邮件地址： 消息： textarea> form>

※第1行“action =”***“的” ***“部分包含用于消息传输的CGI文件名等。※“ 名称 ”·“ 电子邮件 ”·“ msg ”(=名称属性值)是需要由要使用的CGI重写的部分。你写的东西取决于CGI。※尺寸属性值“ 30 ” 和cols属性值是表格的大小(宽度字符数)。rows属性值“ 5 ”是表单高度(行数)。将两者都指定为数字。

装饰背景

首先让我们改变白色背景。对于背景，您可以指定颜色，也可以指定图像。“ 如何自由地指定背景图像 ”引进装饰手法的页面背景是几乎，因为它可以利用的。

在此示例中，我们将解释将背景颜色添加到名称和邮件地址的输入字段并将背景图像添加到消息输入字段的情况。

我们准备了淡黄色作为背景颜色，以及下面的图像作为背景图像。

使用这些表格看如下。

我认为您可以看到添加了背景颜色和背景图像。首先，让我介绍一下这些实现方法。

如何装饰背景

在过去的文章“ 自由指定背景图像显示方法 ”中描述，但您可以使用样式表的background-image属性将背景图像添加到各种元素。表格输入字段也包括在内。同样，您可以使用background-color属性添加背景颜色。

■ 指定表单的背景颜色

首先，让我们为名称和电子邮件地址输入字段添加背景颜色。使用样式表的background-color属性指定值“#ffffcc”。

样式表，

background-color：#ffffcc;

我写了。※“#ffffcc”部分是颜色指定。这里，“淡黄色”以十六进制指定。此外，还可以使用诸如“skublue”的颜色名称来指定。如果我们将它添加到创建名称字段的input元素，(使用style属性)

将对其进行描述。

■ 在表单上指定背景图像

让我们在消息输入字段中添加背景图像。使用样式表的background-image属性指定图像文件“mail.jpg”。

样式表，

background-image：url(' mail.jpg ') ;

我写了。*考虑到使用style属性进行描述，文件名用单引号括起来，而不是双引号。(即使您不使用style属性，也可以使用单引号将其括起来，因此您始终可以将其括在单引号中。)

当这被添加到textarea元素，使消息输入字段

textarea >

这将是。背景的装饰现在已经完成。

接下来，让我们装饰要输入的字符。

输入字符的装饰

现在，让我们装饰将要输入的字符。在HTML中是不可能的，但是使用样式表，您还可以装饰将在表单的输入字段中输入的字符。

使用该方法的形式如下。请输入一些字符。

好吧，让我介绍一下这些实现方法。

如何装饰输入字符

要装饰字符，请使用font-family属性。使用此属性，您可以指定字体名称和字体类型。如果将其指定为构成表单输入字段的元素，则可以将表单的字符输入设置为所需的设计。

■ 在表单上指定字符

使用样式表的font-family属性指定字体名称。你只能遗漏一个，但是你不知道那些没有指定字体的人会怎么样。因此，可以按候选顺序排列多种字体。

在样式表中，仅指定一种字体时，

font-family：Verdana ;

我写了。按优先顺序指定多个时，

font-family：Verdana ， Arial ， Helvetica ， Geneva ;

我写了。在日文字体名称等中指定“常用名称”时，请用引号括起来。

font-family：' HG Maru Gothic M-PRO '，' MS Gothic ' ;

*在欧洲字体中，如果名称包括诸如“Century Gothic”和“Times New Roman”之类的空格，则必须用引号括起来。

如果将这些规范添加到创建名称字段的输入元素中

“input type =”text“name =”name“style =”background - color：#ffffcc; font - family：Verdana，Arial，Helvetica，Geneva;

就像。

■ 按字体类型指定

如果由字体名称指定，则可能不可见(如作者所预期的)，除非它位于安装字体的环境中。因此，准备了一种指定“类型名称”而不是字体名称的方法。

确保在字体规范列表的末尾指定这些类型。这样，即使在未安装的环境中浏览所有排列的字体，以类似于创建者的意图的字体显示的可能性也增加。

例如，如果要显示哥特式，

font-family：'MS P Gothic'，sans-serif;

通过编写，即使在没有“MS P Gothic”字体的环境中，它也将以哥特式字体(= sans - serif type font)显示。

* 请注意不要在报价单中附上这些类型的名字。它不是字体的名称，因此不要用引号括起来。

■ 在表单上指定字符

您还可以指定字体大小。在这种情况下，请使用font-size属性。

font-size：18 pt ;

在上面的示例中，它将以18磅的大小显示。除了特定的“数值+单位”指定之外，诸如“较小”或“较大”·“80％”或“120％”的相对指定也是可能的。

总之

这一次，我们介绍了表单设计方法。无论如何，请尝试制作一个独特的表格。不过，请注意不要设计输入字符太难看，太多太多。

举报/反馈