帶有樣式的 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;
}