Input Types

Reference for form elements used in ECT login templates. Every input must be inside a <form action="<%- @action %>" method="post"> block.

Text Input

<div class="field">
  <label class="label">Cloud Name</label>
  <div class="control">
    <input class="inputfield" type="text" name="cloudName" value="<%= @cloudName %>" required>
  </div>
</div>

name="cloudName" → available as requestData.body.cloudName in the login handler.

Password Input

<div class="field">
  <label class="label">API Secret</label>
  <div class="control">
    <input class="inputfield" type="password" name="apiSecret" value="<%= @apiSecret %>" required>
  </div>
</div>

Use type="password" for secrets and API keys — masks the input in the browser.

URL Input

<div class="field">
  <label class="label">Server URL</label>
  <div class="control">
    <input class="inputfield" type="url" name="serverUrl" value="<%= @serverUrl %>" required>
  </div>
</div>

type="url" triggers browser-native URL validation before submission.

Static options

<div class="field">
  <label class="label">Server</label>
  <div class="control">
    <select class="inputfield" name="serverType" required>
      <option value="prod" <% if @server == "prod" : %>selected<% end %>>Production</option>
      <option value="uat" <% if @server == "uat" : %>selected<% end %>>UAT</option>
    </select>
  </div>
</div>

Dynamic options (loop)

<div class="field">
  <label class="label">Organization</label>
  <div class="control">
    <select class="select" name="org" value="<%= @organization %>">
      <option value="">Please choose an organization</option>
      <% for entry in @organizations : %>
      <option value="<%= entry.id %>"><%= entry.name %></option>
      <% end %>
    </select>
  </div>
</div>

Pass the list from the handler:

return render(path.join(import.meta.dirname, 'select-org'), {
  action: urlObject.toString(),
  organizations: orgs.map(o => ({ id: o.id, name: o.name })),
  logo,
  contact
})

Wrapped select (Bulma `.select` div)

<div class="field">
  <label class="label">Select a brand</label>
  <div class="control">
    <div class="select">
      <select name="brandId" required>
        <option value="">Select a brand</option>
        <% for brand in @brands : %>
          <option value="<%= brand.id %>"><%= brand.name %></option>
        <% end %>
      </select>
    </div>
  </div>
</div>

The outer .select div adds Bulma's dropdown styling with a caret icon.

Hidden Input

<input type="hidden" name="state" value="<%= @state %>">

Carries state or other data through form submission without displaying it.

Submit Button

<div class="field is-grouped">
  <div class="control">
    <button class="button is-link" type="submit">Login</button>
  </div>
</div>

.is-grouped allows placing multiple buttons side by side. .is-link applies CI HUB's blue button style.

Template Overview | Template Examples

On this page