LabArchives Widget HTML Editor

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.

HTML Editor Screen Capture with Source Enabled

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.




PhD Candidate in Neuroscience at University of Michigan. Hope College Grad. Enjoys data organization. Passionate about teaching science.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

The Personal Project to Win Your Next Career Fair

How to Set Proxy in Selenium

Single Parenting, Java Module System, Lego, and Trump

Top 4 Open-source Music Software You Can Use Without Restriction

Dynamic programming: part 1

Things To Keep in Mind When Hiring A Magento Developer

How To Choose The Best Mobile Backend As A Service (MBaaS)

Syscalls, Upcalls, and Hypercalls

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Amanda G. Gibson

Amanda G. Gibson

PhD Candidate in Neuroscience at University of Michigan. Hope College Grad. Enjoys data organization. Passionate about teaching science.

More from Medium

Using Just 2 CSS Class Display Text On Bootsratp 5 Card When Hover

CSS : Box Model

CSS Box — Model . It has 4 layers. Margin box, Border Box, Padding Box, Content Box.

Styling Bold and Italic Fonts Using CSS

Vuetify use CSS Grid classes