【发布时间】：2015-07-09 08:09:30
【问题描述】：
我正在尝试将使用已弃用的 UiApp 编写的表单重新创建为 HtmlService 版本。我继承了大部分代码，所以我正在努力学习/改进/整理。
旧的表单是这样的，每个输入框上方都有一个标签：
我可以让新表单看起来像这样，标签与输入一致：
我目前的代码是：
<!--this line was missing-->
<?!=HtmlService.createHtmlOutputFromFile('Stylesheet').getContent();?>
<!--and including it fixes part two of my questions-->
<html>
<body>
<h3>ProReactive Hazard Logging v3.0.0</h3>
<form action="<?= action ?>" method="post">
Date:<input type="date" name="date" style="width: 100px;">
Depot/Site:<input list="depot" name="depot" style="width: 100px;">
<datalist id="depot">
<option value="COMPANY (H&S Projects Team">
<option value="CS - C** Street Depot">
</datalist>
Reporter:<input type="text" name="reporter" style="width: 100px;"/>
Contact No:<input type="text" name="details" style="width: 100px;"/>
Source Code:<input list="source" name="source" style="width: 100px;">
<datalist id="source">
<option value="01 - Accident/Incident investigations & reports">
<option value="02 - Company or location H&S Committee / Forum actions">
<option value="03 - Emergency Preparedness reviews/activities">
</datalist>
Hazard Code:<input list="hazard" name="hazard" style="width: 100px;">
<datalist id="hazard">
<option value="01 - Access equipment fault">
<option value="02 - Assault - verbal/physical">
<option value="03 - Blocked/held open fire route/exit">
<option value="04 - Contractor / visitor non-compliance or poor/unsafe practice">
</datalist>
Brief Details:<input type="text" name="details" />
Full Description:<input type="text" name="description" />
Priority Code:<input list="priority" name="priority">
<datalist id="priority">
<option value="02 - WITHIN 24-48 HOURS">
<option value="03 - WITHIN 1 WEEK">
<option value="04 - WITHIN 1 MONTH">
<option value="05 - WITHIN 3 MONTHS">
<option value="06 - FOR MANAGEMENT DISCUSSION">
</datalist>
</form>
<input type="submit" value="SUBMIT" />
</form>
</body>
</html>
所以我的问题是：
如何让输入框标题成为像旧表单一样的标题？这样我就可以添加“添加/删除行”按钮，并且所有这些按钮都排成一行，因为表单用于在每次使用时输入多个项目。
如何将 'style="width: ***px;"' 移动到 CSS 表单以改进代码？文本输入框需要不同的大小（例如，“联系人号码”条目是电话分机，所以只需很小，其他相同，详细信息/描述框双行高）
根据 mogsdad 的要求，这里是样式表的内容：
<form>
<style>
h3 {font-size: 20px;}
h4 {font-size: 14px;
font-weight: bold;}
.mydatepick {
width: 150px;}
.mylistbox {
width: 200px;}
.result-display {
margin-left: 5px;
font-size: 100%;}
.mytextbox{
width: 150px;}
.myparagraphbox{
width: 150px;
height: 70px;}
.error {
color: #FF0000;}
.hidden {
display: none;}
.button-success {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: rgb(28, 184, 65); /* this is a green */}
.button-error {
color: white;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
background: rgb(202, 60, 60); /* this is a maroon */}
</style>
</form>
【问题讨论】：
-
您的样式表中有什么？ （你应该在问题中包含它，因为问题 1 都是关于 css 的。）
-
干杯 Mogsdad，请参阅编辑。
-
样式表不应包含
<form>标签。
标签： html forms google-apps-script format row