How To Style Htmlservice Form Elements With Labels Above Input?
Solution 1:
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 useform="field-id"instead.Group the
<label>and<input>elements together within a<div>, and apply the styling classesinlineandform-groupto the div.Input elements need
idattributes for this to work. Unless you're submitting a form viaPOST, they don't need aname. (That's not the topic of this question - 'nuff said.)<divclass="inline form-group"><labelform="city">City</label><inputtype="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
styleattribute 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.<divclass="block"> ... input fields ... </div><divclass="block"> ... button(s) ... </div>When using
<datalist>elements to provide auto-completion, watch the names. For example, you had an input element nameddepotand 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 avalue. Browsers will usually figure it out, but better to get it right, and remember the/>.<divclass="inline form-group"><labelform="depot">Depot/Site</label><inputid="depot"list="depots"name="depot"style="width: 100px;"><datalistid="depots"><optionvalue="COMPANY (H&S Projects Team" /><optionvalue="CS - C** Street Depot" /></datalist></div>
<linkhref="https://ssl.gstatic.com/docs/script/css/add-ons.css" /><!-- 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><formaction="<?= action ?>"method="post"><divclass="block"><divclass="inline form-group"><labelform="date">Date</label><inputtype="date"id="date"name="date"style="width: 100px;" /></div><divclass="inline form-group"><labelform="depot">Depot/Site</label><inputid="depot"list="depots"name="depot"style="width: 100px;"><datalistid="depots"><optionvalue="COMPANY (H&S Projects Team" /><optionvalue="CS - C** Street Depot" /></datalist></div><divclass="inline form-group"><labelform="reporter">Reporter</label><inputtype="text"name="reporter"style="width: 100px;" /></div><divclass="inline form-group"><labelform="details">Contact No</label><inputtype="text"name="details"id="details"style="width: 100px;" /></div><divclass="inline form-group"><labelform="source">Source Code</label><inputlist="sources"name="source"id="source"style="width: 100px;"><datalistid="sources"><optionvalue="01 - Accident/Incident investigations & reports" /><optionvalue="02 - Company or location H&S Committee / Forum actions" /><optionvalue="03 - Emergency Preparedness reviews/activities" /></datalist></div><divclass="inline form-group"><labelform="hazard">Hazard Code</label><inputlist="hazards"name="hazard"style="width: 100px;"><datalistid="hazards"><optionvalue="01 - Access equipment fault" /><optionvalue="02 - Assault - verbal/physical" /><optionvalue="03 - Blocked/held open fire route/exit" /><optionvalue="04 - Contractor / visitor non-compliance or poor/unsafe practice" /></datalist></div><divclass="inline form-group"><labelform="details">Brief Details</label><inputtype="text"name="details"id="details" /></div><divclass="inline form-group"><labelform="description">Full Description</label><inputtype="text"name="description"id="description" /></div><divclass="inline form-group"><labelform="priority">Priority Code</label><inputlist="priorities"name="priority"id="priority"><datalistid="priorities"><optionvalue="02 - WITHIN 24-48 HOURS" /><optionvalue="03 - WITHIN 1 WEEK" /><optionvalue="04 - WITHIN 1 MONTH" /><optionvalue="05 - WITHIN 3 MONTHS" /><optionvalue="06 - FOR MANAGEMENT DISCUSSION" /></datalist></div></div><divclass="block"><inputtype="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;
}
Solution 2:
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!
Post a Comment for "How To Style Htmlservice Form Elements With Labels Above Input?"