How to style HtmlService form elements with labels above input?

Question

I am trying to recreate a form that was written with the deprecated UiApp into an HtmlService version. I inherited most of this code so I am trying to learn/improve/tidy as I go.

The old form looks like this, with a label above each input box:

The best I can get the new form to look like is like this, with labels in line with inputs:

The code I have so far is:

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

So my questions are:

How do I get the entry box titles to be headers like the old form? This is so I can add the "add/remove row" buttons and it all lines up as the form is used to enter multiple items at each use.
How do I move the 'style="width: ***px;"' to a CSS sheet to improve the code? The text input boxes need to be different sizes (e.g. the 'contact no' entry is an phone ext. so only needs to be small, the others the same & the details/description boxes double line height)

As per request from mogsdad, here is the stylesheet contents:

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

What's in your stylesheet? (You should include that in the question, since problem 1 is all about css.) — Mogsdad, Jul 09 '15 at 13:13

score 1 · Answer 1 · answered Jul 09 '15 at 10:15

1

Part 2 answered:

I had missed the line:

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

at the start of my code and this now works! Any answers to part 1 massively appreciated!

answered Jul 09 '15 at 10:15

witham

139
1
2
13

Mogsdad · Accepted Answer · 2015-07-09T16:13:50.717

If you're including the default Stylesheet.html file, it also pulls in Google's css file, https://ssl.gstatic.com/docs/script/css/add-ons.css. (Your stylesheet doesn't do this - you should, why re-invent the wheel?)

That css file provides the styling you're looking for, providing that you apply the appropriate classes to your form elements. This is all documented in CSS Package for Add-ons, which is easy to miss if you're not working on an add-on!

Control of input field labels is described on that page, under Text fields. Starting with that, here's an overview of the required changes. The full code is in a runnable snippet below, so you can grab a copy there, as well as see it in action.

Instead of plain-text field labels, use <label> elements.

Their example shows use of for="field-id" to associate labels with elements, but under HTML5 we now use form="field-id" instead.
Group the <label> and <input> elements together within a <div>, and apply the styling classes inline and form-group to the div.

Input elements need id attributes for this to work. Unless you're submitting a form via POST, they don't need a name. (That's not the topic of this question - 'nuff said.)
```
<div class="inline form-group">
  <label form="city">City</label>
  <input type="text" id="city" style="width: 150px;">
</div>
```
Note that in this example from the documentation, there is still a style attribute for the field width, which was what you wanted to avoid in your question #2. The reasoning behind doing this is that we're using generalized css classes to style common attributes of related elements - this keeps our look consistent. By keeping element-specific styling that doesn't affect the overall appearance within the elements themselves, we avoid clutter in the css file. This is consistent with the principle of separating design & development concerns, although seeing the style attribute might make you think otherwise.
Consider the input fields one block, and the submit button (+ any other buttons) as another, and put them in separate divs, with class="block". This will provide vertical spacing between them.
```
<div class="block">
  ... input fields ...
</div>

<div class="block">
  ... button(s) ...
</div>
```
When using <datalist> elements to provide auto-completion, watch the names. For example, you had an input element named depot and a datalist with the same id. By using the plural form for the datalist, an id collision is avoided while improving code readability.

Also - <option> should be self-closing when you're setting a value. Browsers will usually figure it out, but better to get it right, and remember the />.
```
<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>

Addendum - examining add-ons.css

You can see what the styling for Google's recommended classes are by visiting the css file. The css defines the spatial relationships between labels & input elements via 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;
}

That's great Mogsdad. I'll work through the list of suggestions and come back with either a follow up or updated code. — witham, Jul 09 '15 at 14:34
If you have to ask clarifying questions, sure, add a comment. If you move on to the next problem, ask a new question. But there is no need to come back with updated code - in fact, fixing the code _in your question_ is a Bad Idea, since it makes it hard for future readers to locate questions that are relevant to their own problem. While helping individuals is one goal here, building a legacy of more generally useful answers is a larger one. — Mogsdad, Jul 09 '15 at 14:39

How to style HtmlService form elements with labels above input?

2 Answers2

Addendum - examining add-ons.css

Linked