带有样式的 XForms/Textarea
< XForms
Textarea 的默认布局通常不是您想要的。Textarea 的大小可能不正确，或者标签可能没有正确定位。本程序向您展示如何更改它。
这是一个示例屏幕图像。该示例包括默认的 Textarea 和小型、中型、大型和特大型版本。请注意，如果内容超过 Textarea，则会自动向控件添加滚动条。
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>XForms textarea demo</title>
<link rel="stylesheet" type="text/css" href="textarea.css" />
<xf:model>
<xf:instance xmlns="">
<data>
<Default>Default Default Default Default</Default>
<Small>Small Small Small Small Small Small Small Small Small Small Small
Small Small Small Small Small Small Small </Small>
<Medium>Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium
Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium
Medium Medium Medium Medium Medium Medium Medium Medium Medium Medium</Medium>
<Large>Large Large Large Large Large Large Large Large Large Large Large Large
Large Large Large Large Large Large Large Large Large Large Large Large Large
Large Large Large Large Large Large Large Large Large Large Large Large Large
Large Large Large Large Large Large Large Large Large Large Large Large</Large>
<XLarge>X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large X-Large
X-Large X-Large X-Large X-Large X-Large X-Large X-Large</XLarge>
</data>
</xf:instance>
</xf:model>
</head>
<body>
<p>Resizing textarea and scrolling.</p>
<xf:textarea ref="Default">
<xf:label>Default: </xf:label>
</xf:textarea>
<xf:textarea class="small-textarea" ref="Small">
<xf:label>Small: </xf:label>
</xf:textarea>
<xf:textarea class="medium-textarea" ref="Medium">
<xf:label>Medium: </xf:label>
</xf:textarea>
<xf:textarea class="large-textarea" ref="Large">
<xf:label>Large: </xf:label>
</xf:textarea>
<xf:textarea class="x-large-textarea" ref="XLarge">
<xf:label>X-Large: </xf:label>
</xf:textarea>
</body>
</html>
@namespace xf url("http://www.w3.org/2002/xforms");
/* put each textarea on its own row */
xf|textarea {
display: table-row;
}
xf|textarea > xf|label {
display: table-cell;
font-family: sans-serif;
font-size: 10pt;
font-weight: bold;
vertical-align: top;
text-align: right;
padding-right: 3px;
}
textarea {
font-family: Courier, sans-serif;
}
.default-textarea
{
font-style :regular;
}
.small-textarea textarea {
height: 4.4em; /* a bit less than four lines to demonstrate scrolling */
width: 300px;
}
.medium-textarea textarea {
height: 6em;
width: 400px;
}
.large-textarea textarea {
font-family: Courier, sans-serif;
height: 10em;
width: 500px;
}
.x-large-textarea textarea {
font-family: Courier, sans-serif;
height: 20em;
width: 700px;
}