如何使用输入上方的标签设置 HtmlService 表单元素的样式？

Question

我正在尝试将使用已弃用的 UiApp 编写的表单重新创建到 HtmlService 版本中。我继承了这段代码的大部分，所以我正在尝试learn/improve/tidy。

旧的表单是这样的，每个输入框上方都有一个标签：

我能让新表单看起来像这样，标签与输入一致：

我目前的代码是：

<!--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>

所以我的问题是：

如何使输入框标题与旧表单一样 headers？这样我就可以添加 "add/remove row" 按钮，并且所有按钮都排成一行，因为每次使用时都会使用该表单输入多个项目。
如何将 'style="width: ***px;"' 移动到 CSS sheet 以改进代码？文本输入框需要不同的大小（例如 'contact no' 条目是一个 phone 分机。所以只需要很小，其他的相同 & details/description 框双行高）

应mogsdad的要求，样式如下sheet内容：

<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>

Answer 1

第 2 部分回答：

我错过了台词：

<?!=HtmlService.createHtmlOutputFromFile('Stylesheet').getContent();?>

在我的代码开头，现在可以使用了！非常感谢对第 1 部分的任何回答！

Answer 2

如果您包含默认的 Stylesheet.html 文件，它还会引入 Google 的 css 文件 https://ssl.gstatic.com/docs/script/css/add-ons.css。（您的样式表不会这样做 - 您应该这样做，为什么要重新发明轮子？）

该 css 文件提供了您正在寻找的样式，前提是您将适当的类应用于您的表单元素。这些都记录在 CSS Package for Add-ons 中，如果您没有使用附加组件，很容易错过！

该页面的 Text fields 下描述了输入字段标签的控制。首先，这里是对所需更改的概述。完整的代码在下面的可运行片段中，因此您可以在那里获取副本，并查看它的运行情况。

使用 <label> 元素代替纯文本字段标签。

他们的示例显示使用 for="field-id" 将标签与元素相关联，但在 HTML5 下，我们现在使用 form="field-id"。
将 <label> 和 <input> 元素组合在一个 <div> 中，并应用样式类 inline 和 form-group 到 div.

输入元素需要 id 属性才能正常工作。除非您通过 POST 提交表单，否则他们不需要 name。（这不是这个问题的主题 - 'nuff 说。）
```
<div class="inline form-group">
  <label form="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
```
请注意，在文档中的这个示例中，字段宽度仍然有一个样式属性，这是您在问题 #2 中想要避免的。这样做背后的原因是我们使用广义 css 类来设置相关元素的 公共属性 的样式——这使我们的外观保持一致。通过在元素本身内保留不影响整体外观的特定元素样式，我们避免了 css 文件中的混乱。这符合分离设计和开发关注点的原则，尽管看到 style 属性可能会让您产生不同的想法。
将输入字段视为一个块，将提交按钮（+任何其他按钮）视为另一个块，并将它们放在单独的 div 中，class="block"。这将在它们之间提供垂直间距。
```
<div class="block">
  ... input fields ...
</div>

<div class="block">
  ... button(s) ...
</div>
```
当使用 <datalist> 元素提供自动完成功能时，请注意名称。例如，您有一个名为 depot 的输入元素和一个具有相同 ID 的数据列表。通过对datalist使用复数形式，在提高代码可读性的同时避免了id冲突。

此外 - 当您设置 value 时，<option> 应该自动关闭。浏览器通常会弄清楚，但最好正确处理，并记住 />.
```
<div class="inline form-group">
  <label form="depot">Depot/Site</label>
  <input id="depot" list="depots" name="depot" style="width: 100px;">
  <datalist id="depots">
    <option value="COMPANY (H&S Projects Team" />
    <option value="CS - C** Street Depot" />
  </datalist>
</div>
```

<link href="https://ssl.gstatic.com/docs/script/css/add-ons.css" rel="stylesheet" />
<!-- The above css link has been relocated from Stylesheet.html for
     compatibility with the Stack Snippet tool.
-->

<html>

<body>
  <h3>ProReactive Hazard Logging v3.0.0</h3>
  <form action="<?= action ?>" method="post">
    <div class="block">
      <div class="inline form-group">
        <label form="date">Date</label>
        <input type="date" id="date" name="date" style="width: 100px;" />
      </div>
      <div class="inline form-group">
        <label form="depot">Depot/Site</label>
        <input id="depot" list="depots" name="depot" style="width: 100px;">
        <datalist id="depots">
          <option value="COMPANY (H&S Projects Team" />
          <option value="CS - C** Street Depot" />
        </datalist>
      </div>
      <div class="inline form-group">
        <label form="reporter">Reporter</label>
        <input type="text" name="reporter" style="width: 100px;" />
      </div>
      <div class="inline form-group">
        <label form="details">Contact No</label>
        <input type="text" name="details" id="details" style="width: 100px;" />
      </div>
      <div class="inline form-group">
        <label form="source">Source Code</label>
        <input list="sources" name="source" id="source" style="width: 100px;">
        <datalist id="sources">
          <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>
      </div>
      <div class="inline form-group">
        <label form="hazard">Hazard Code</label>
        <input list="hazards" name="hazard" style="width: 100px;">
        <datalist id="hazards">
          <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>
      </div>
      <div class="inline form-group">
        <label form="details">Brief Details</label>
        <input type="text" name="details" id="details" />
      </div>
      <div class="inline form-group">
        <label form="description">Full Description</label>
        <input type="text" name="description" id="description" />
      </div>
      <div class="inline form-group">
        <label form="priority">Priority Code</label>
        <input list="priorities" name="priority" id="priority">
        <datalist id="priorities">
          <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>
      </div>
    </div>

    <div class="block">
      <input type="submit" value="SUBMIT" />
    </div>
  </form>
</body>

</html>

附录 - 检查 add-ons.css

您可以访问 the css file 查看 Google 推荐的类的样式。 css 通过 form-group.

定义标签和输入元素之间的空间关系

.inline {
  display: inline-block;
}

.inline + .inline {
  margin-left: 12px;
}

...

.form-group label + input,
.form-group label + select,
.form-group label + textarea {
  display: block;
}

如何使用输入上方的标签设置 HtmlService 表单元素的样式？

How to style HtmlService form elements with labels above input?

html

forms

format

row

google-apps-script

附录 - 检查 add-ons.css