Question

我正在尝试将已弃用的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>

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。< / p>
输入元素需要id属性才能生效。除非您通过POST提交表单，否则他们不需要name。（这不是这个问题的主题 - ＆＃39; 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碰撞，同时提高代码可读性。

此外 - 当您设置<option>时，value应自动关闭。浏览器通常会将其弄清楚，但最好将其弄清楚，并记住/>。
```
<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>
```

＆＃13;

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

＆＃13;

附录 - 审查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表单元素？

2 个答案:

附录 - 审查add-ons.css