LabArchives Widget HTML Editor
How to begin designing your Widget using HTML form elements
This article is part of a series on how to get started with designing custom LabArchives Widgets. You can find the introduction and links to the other articles in the series here.
After navigating to the Widget Manager and opening a widget, the first tab that is shown is the Widget HTML Editor. This defaults to a preview of the page within the Rich Text Editor. While the HTML Editor can give you a general idea of how your form will appear, you should use the Preview pane to view it with styling. To edit the form using HTML, press the “Source” button so that it is highlighted.
Creating Form Elements
Form elements are indicated by <input> <select> or <textarea> tags. To avoid errors within LabArchives, you should use the <input type="button"/> designation to create clickable buttons as opposed to using the <button> tag. In situations where you need to add stylized content within a clickable element, you can use <button> if you add the type="button" attribute. Adding unique id attributes allows you to easily reference these form elements within the Script Editor. An example section of HTML code for a widget is provided below.
Each of these elements need a name attribute for LabArchives to properly save and recall the form data. These names must be all lowercase and unique. Be cautious about using _ (underscore) within the name, as these can trigger LabArchives commands that change the element type, as described in this article. You can read more about using the LabArchives Widget Manager to design your widget here if you prefer to use this editor rather than designing strictly with HTML.
For a general introduction to HTML, you can view the W3Schools HTML tutorial. Particularly relevant will be the section on HTML forms. MDN also has great HTML information.
CSS styles and other scripts can be added to the page when editing the HTML source for the page. The use of <div> tags in the example above allows for easier organization and styling of the form with CSS, as do many of the class attributes. For help with CSS, which is the language used to provide instructions for how to style the form, you can also reference the W3Schools CSS tutorial or the MDN CSS resources. Another resource (passed on from my brother) that has been tremendously helpful, and well-designed, is the HTML & CSS: design and build websites book by Jon Duckett.
My GitHub Repository with Widget Templates
You can find the full code for a template widget and other examples at https://github.com/gibson-amandag/LabArchivesWidgetTemplates.
