Edit Form
HTML Code (Demo)
<form name="adminForm" id="adminForm" class="form-validate form-vertical">
<fieldset>
<joomla-tab breakpoint="768">
<joomla-tab-element id="editor" active name="Content" role="tabpanel">
<div class="control-group">
<div class="control-label">
<label id="jform_title-lbl" for="jform_title" class="required">
Title<span aria-hidden="true" class="star"> *</span>
</label>
</div>
<div class="controls">
<input type="text" name="jform[title]" id="jform_title" value="Test" size="30" required class="form-control required">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_alias-lbl" for="jform_alias">
Alias</label>
</div>
<div class="controls">
<input type="text" name="jform[alias]" id="jform_alias" value="test" size="45" aria-describedby="jform_alias-desc" placeholder="Auto-generate from title" class="form-control">
<div id="jform_alias-desc">
<small class="form-text">
The Alias will be used as part of the URL.</small>
</div>
</div>
</div>
<div class="control-group">
<div class="visually-hidden">
<label id="jform_articletext-lbl" for="jform_articletext">
Article Text</label>
</div>
<div class="controls">
<div class="js-editor-tinymce">
<textarea name="jform[articletext]" id="jform_articletext" cols rows style="width: 100%; height: 500px" class="mce_editable joomla-editor-tinymce"> <p><a href="#">Lorem Ipsum bla bla</a></p></textarea>
<div class="toggle-editor btn-toolbar float-end clearfix mt-3">
<div class="btn-group">
<button type="button" class="btn btn-secondary js-tiny-toggler-button">
<span aria-hidden="true" class="icon-eye"></span>
Toggle Editor</button>
</div>
</div>
</div>
</div>
</div>
</joomla-tab-element>
<joomla-tab-element id="publishing" name="Publishing" role="tabpanel">
<input type="hidden" name="jform[transition]" id="jform_transition" value>
<div class="control-group">
<div class="control-label">
<label id="jform_state-lbl" for="jform_state">
Status</label>
</div>
<div class="controls">
<select id="jform_state" name="jform[state]" size="1" class="form-select form-select-color-state form-select-success">
<option value="1" selected="selected">Published</option>
<option value="0">Unpublished</option>
<option value="2">Archived</option>
<option value="-2">Trashed</option>
</select>
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_catid-lbl" for="jform_catid" class="required">
Category<span aria-hidden="true" class="star"> *</span>
</label>
</div>
<div class="controls">
<joomla-field-fancy-select placeholder="Type or select a Category" search-placeholder="Type or select a Category" allow-custom new-item-prefix="#new#" required class="required">
<div data-type="select-one" tabindex="0" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="choices">
<div class="choices__inner">
<select id="jform_catid" name="jform[catid]" required hidden tabindex="-1" data-choice="active" class="required choices__input">
<option value="2" selected>Uncategorised</option>
</select>
<div role="listbox" class="choices__list choices__list--single">
<div data-item data-id="1" data-value="2" aria-selected="true" role="option" data-deletable class="choices__item choices__item--selectable">Uncategorised<button type="button" aria-label="Remove item: 2" data-button class="choices__button_joomla">Remove item</button>
</div>
</div>
</div>
<div aria-expanded="false" class="choices__list choices__list--dropdown"><input type="search" autocomplete="off" autocapitalize="none" spellcheck="false" aria-autocomplete="list" aria-label="Type or select a Category" placeholder="Type or select a Category" class="choices__input choices__input--cloned"> <div role="listbox" class="choices__list">
<div id="choices--jform_catid-item-choice-1" role="option" data-choice data-id="1" data-value="2" data-select-text="Press to select" data-choice-selectable class="choices__item choices__item--choice is-selected choices__item--selectable">Uncategorised</div>
</div>
</div>
</div>
</joomla-field-fancy-select>
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_tags-lbl" for="jform_tags">
Tags</label>
</div>
<div class="controls">
<joomla-field-fancy-select placeholder="Type or select some tags" allow-custom new-item-prefix="#new#" remote-search url="/jcrafts/index.php?option=com_tags&task=tags.searchAjax" term-key="like" min-term-length="3">
<div data-type="select-multiple" role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-expanded="false" class="choices">
<div class="choices__inner">
<select id="jform_tags" name="jform[tags][]" multiple hidden tabindex="-1" data-choice="active" class="choices__input"></select>
<div role="listbox" class="choices__list choices__list--multiple"></div><input type="search" autocomplete="off" autocapitalize="none" spellcheck="false" aria-autocomplete="list" aria-label="Type or select some tags" placeholder="Type or select some tags" style="min-width: 25ch; width: 1ch" class="choices__input choices__input--cloned"></div>
<div aria-expanded="false" class="choices__list choices__list--dropdown">
<div aria-multiselectable="true" role="listbox" class="choices__list">
<div class="choices__item choices__item--choice choices__notice has-no-choices">No results match</div>
</div>
</div>
</div>
</joomla-field-fancy-select>
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_note-lbl" for="jform_note">
Note</label>
</div>
<div class="controls">
<input type="text" name="jform[note]" id="jform_note" value size="40" maxlength="255" class="form-control">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_version_note-lbl" for="jform_version_note">
Version Note</label>
</div>
<div class="controls">
<input type="text" name="jform[version_note]" id="jform_version_note" value size="45" maxlength="255" class="form-control">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_created_by_alias-lbl" for="jform_created_by_alias">
Created by Alias</label>
</div>
<div class="controls">
<input type="text" name="jform[created_by_alias]" id="jform_created_by_alias" value size="20" class="form-control">
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_featured-lbl" for="jform_featured">
Featured</label>
</div>
<div class="controls">
<select id="jform_featured" name="jform[featured]" class="form-select">
<option value="0">No</option>
<option value="1" selected="selected">Yes</option>
</select>
</div>
</div>
<div data-showon="[{"field":"jform[featured]","values":["1"],"sign":"=","op":""}]" data-showon-initialised class="control-group">
<div class="control-label">
<label id="jform_featured_up-lbl" for="jform_featured_up">
Start Featured</label>
</div>
<div class="controls">
<div class="field-calendar">
<div class="input-group">
<input type="text" id="jform_featured_up" name="jform[featured_up]" value size="22" data-alt-value autocomplete="off" class="form-control">
<button type="button" id="jform_featured_up_btn" title="Open the calendar" data-inputfield="jform_featured_up" data-button="jform_featured_up_btn" data-date-format="%Y-%m-%d %H:%M:%S" data-firstday data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="1" data-show-others="1" data-time24="24" data-only-months-nav="0" data-min-year data-max-year data-date-type="gregorian" class="btn btn-primary">
<span aria-hidden="true" class="icon-calendar"></span>
<span class="visually-hidden">Open the calendar</span>
</button>
</div>
<div hidden style="position: absolute; box-shadow: rgba(0, 0, 0, 0.67) 0px 0px 70px 0px; min-width: 0px; padding: 0px; left: auto; top: auto; z-index: 1060; border-radius: 20px" class="js-calendar">
<div class="calendar-container">
<table style="margin-bottom: 0px; visibility: visible" class="table">
<thead class="calendar-header">
<tr class="calendar-head-row">
<td colspan="1" style="text-align: center; font-size: 18px; line-height: 18px" class="nav">
<a class="js-btn btn-prev-year">‹</a>
</td>
<td colspan="6" class="title title-year">
<div>
<div>
<span>2025</span>
</div>
</div>
</td>
<td colspan="1" style="text-align: center; font-size: 18px; line-height: 18px" class="nav">
<a class="js-btn btn-next-year">
›</a>
</td>
</tr>
<tr class="calendar-head-row">
<td colspan="1" style="text-align: center; font-size: 2em; line-height: 1em" class="nav">
<a class="js-btn btn-prev-month">‹</a>
</td>
<td colspan="6" style="text-align: center" class="title title-month">
<div>
<div>
<span>December</span>
</div>
</div>
</td>
<td colspan="1" style="text-align: center; font-size: 2em; line-height: 1em" class="nav">
<a class="js-btn btn-next-month">
›</a>
</td>
</tr>
<tr class="daynames wk">
<td class="day-name wn">wk</td>
<td class="day-name day-name-week">Sun</td>
<td class="day-name day-name-week">Mon</td>
<td class="day-name day-name-week">Tue</td>
<td class="day-name day-name-week">Wed</td>
<td class="day-name day-name-week">Thu</td>
<td class="day-name day-name-week">Fri</td>
<td class="day-name day-name-week">Sat</td>
</tr>
</thead>
<tbody>
<tr class="daysrow wk">
<td class="day wn">48</td>
<td style="text-align: center" class="day disabled othermonth weekend">30</td>
<td style="text-align: center; cursor: pointer" class="day">1</td>
<td style="text-align: center; cursor: pointer" class="day">2</td>
<td style="text-align: center; cursor: pointer" class="day">3</td>
<td style="text-align: center; cursor: pointer" class="day">4</td>
<td style="text-align: center; cursor: pointer" class="day">5</td>
<td style="text-align: center; cursor: pointer" class="day weekend">6</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">49</td>
<td style="text-align: center; cursor: pointer" class="day weekend">7</td>
<td style="text-align: center; cursor: pointer" class="day">8</td>
<td style="text-align: center; cursor: pointer" class="day">9</td>
<td style="text-align: center; cursor: pointer" class="day">10</td>
<td style="text-align: center; cursor: pointer" class="day">11</td>
<td style="text-align: center; cursor: pointer" class="day">12</td>
<td style="text-align: center; cursor: pointer" class="day weekend">13</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">50</td>
<td style="text-align: center; cursor: pointer" class="day weekend">14</td>
<td style="text-align: center; cursor: pointer" class="day">15</td>
<td style="text-align: center; cursor: pointer" class="day">16</td>
<td style="text-align: center; cursor: pointer" class="day">17</td>
<td style="text-align: center; cursor: pointer" class="day">18</td>
<td style="text-align: center; cursor: pointer" class="day">19</td>
<td style="text-align: center; cursor: pointer" class="day weekend">20</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">51</td>
<td style="text-align: center; cursor: pointer" class="day weekend">21</td>
<td style="text-align: center; cursor: pointer" class="day">22</td>
<td style="text-align: center; cursor: pointer" class="day">23</td>
<td style="text-align: center; cursor: pointer" class="day">24</td>
<td style="text-align: center; cursor: pointer" class="day">25</td>
<td style="text-align: center; cursor: pointer" class="day">26</td>
<td style="text-align: center; cursor: pointer" class="day weekend">27</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">52</td>
<td style="text-align: center; cursor: pointer" class="day selected today weekend">28</td>
<td style="text-align: center; cursor: pointer" class="day">29</td>
<td style="text-align: center; cursor: pointer" class="day">30</td>
<td style="text-align: center; cursor: pointer" class="day">31</td>
<td style="text-align: center" class="day disabled othermonth">1</td>
<td style="text-align: center" class="day disabled othermonth">2</td>
<td style="text-align: center" class="day disabled othermonth weekend">3</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">1</td>
<td style="text-align: center" class="day disabled othermonth weekend">4</td>
<td style="text-align: center" class="day disabled othermonth">5</td>
<td style="text-align: center" class="day disabled othermonth">6</td>
<td style="text-align: center" class="day disabled othermonth">7</td>
<td style="text-align: center" class="day disabled othermonth">8</td>
<td style="text-align: center" class="day disabled othermonth">9</td>
<td style="text-align: center" class="day disabled othermonth weekend">10</td>
</tr>
<tr class="time">
<td colspan="1" style="vertical-align: middle" class="time time-title"></td>
<td colspan="3" class="time hours-select">
<select data-chosen="true" style="width: 100%" class="time time-hours form-control form-select">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20" selected>20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
<td colspan="3" class="time minutes-select">
<select data-chosen="true" style="width: 100%" class="time time-minutes form-control form-select">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57" selected>57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</td>
<td colspan="1"> </td>
</tr>
</tbody>
</table>
<div class="buttons-wrapper btn-group">
<button type="button" data-action="clear" class="js-btn btn btn-clear">Clear</button>
<button type="button" data-action="today" class="js-btn btn btn-today">Today</button>
<button type="button" data-action="exit" class="js-btn btn btn-exit">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div data-showon="[{"field":"jform[featured]","values":["1"],"sign":"=","op":""}]" data-showon-initialised class="control-group">
<div class="control-label">
<label id="jform_featured_down-lbl" for="jform_featured_down">
Finish Featured</label>
</div>
<div class="controls">
<div class="field-calendar">
<div class="input-group">
<input type="text" id="jform_featured_down" name="jform[featured_down]" value size="22" data-alt-value autocomplete="off" class="form-control">
<button type="button" id="jform_featured_down_btn" title="Open the calendar" data-inputfield="jform_featured_down" data-button="jform_featured_down_btn" data-date-format="%Y-%m-%d %H:%M:%S" data-firstday data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="1" data-show-others="1" data-time24="24" data-only-months-nav="0" data-min-year data-max-year data-date-type="gregorian" class="btn btn-primary">
<span aria-hidden="true" class="icon-calendar"></span>
<span class="visually-hidden">Open the calendar</span>
</button>
</div>
<div hidden style="position: absolute; box-shadow: rgba(0, 0, 0, 0.67) 0px 0px 70px 0px; min-width: 0px; padding: 0px; left: auto; top: auto; z-index: 1060; border-radius: 20px" class="js-calendar">
<div class="calendar-container">
<table style="margin-bottom: 0px; visibility: visible" class="table">
<thead class="calendar-header">
<tr class="calendar-head-row">
<td colspan="1" style="text-align: center; font-size: 18px; line-height: 18px" class="nav">
<a class="js-btn btn-prev-year">‹</a>
</td>
<td colspan="6" class="title title-year">
<div>
<div>
<span>2025</span>
</div>
</div>
</td>
<td colspan="1" style="text-align: center; font-size: 18px; line-height: 18px" class="nav">
<a class="js-btn btn-next-year">
›</a>
</td>
</tr>
<tr class="calendar-head-row">
<td colspan="1" style="text-align: center; font-size: 2em; line-height: 1em" class="nav">
<a class="js-btn btn-prev-month">‹</a>
</td>
<td colspan="6" style="text-align: center" class="title title-month">
<div>
<div>
<span>December</span>
</div>
</div>
</td>
<td colspan="1" style="text-align: center; font-size: 2em; line-height: 1em" class="nav">
<a class="js-btn btn-next-month">
›</a>
</td>
</tr>
<tr class="daynames wk">
<td class="day-name wn">wk</td>
<td class="day-name day-name-week">Sun</td>
<td class="day-name day-name-week">Mon</td>
<td class="day-name day-name-week">Tue</td>
<td class="day-name day-name-week">Wed</td>
<td class="day-name day-name-week">Thu</td>
<td class="day-name day-name-week">Fri</td>
<td class="day-name day-name-week">Sat</td>
</tr>
</thead>
<tbody>
<tr class="daysrow wk">
<td class="day wn">48</td>
<td style="text-align: center" class="day disabled othermonth weekend">30</td>
<td style="text-align: center; cursor: pointer" class="day">1</td>
<td style="text-align: center; cursor: pointer" class="day">2</td>
<td style="text-align: center; cursor: pointer" class="day">3</td>
<td style="text-align: center; cursor: pointer" class="day">4</td>
<td style="text-align: center; cursor: pointer" class="day">5</td>
<td style="text-align: center; cursor: pointer" class="day weekend">6</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">49</td>
<td style="text-align: center; cursor: pointer" class="day weekend">7</td>
<td style="text-align: center; cursor: pointer" class="day">8</td>
<td style="text-align: center; cursor: pointer" class="day">9</td>
<td style="text-align: center; cursor: pointer" class="day">10</td>
<td style="text-align: center; cursor: pointer" class="day">11</td>
<td style="text-align: center; cursor: pointer" class="day">12</td>
<td style="text-align: center; cursor: pointer" class="day weekend">13</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">50</td>
<td style="text-align: center; cursor: pointer" class="day weekend">14</td>
<td style="text-align: center; cursor: pointer" class="day">15</td>
<td style="text-align: center; cursor: pointer" class="day">16</td>
<td style="text-align: center; cursor: pointer" class="day">17</td>
<td style="text-align: center; cursor: pointer" class="day">18</td>
<td style="text-align: center; cursor: pointer" class="day">19</td>
<td style="text-align: center; cursor: pointer" class="day weekend">20</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">51</td>
<td style="text-align: center; cursor: pointer" class="day weekend">21</td>
<td style="text-align: center; cursor: pointer" class="day">22</td>
<td style="text-align: center; cursor: pointer" class="day">23</td>
<td style="text-align: center; cursor: pointer" class="day">24</td>
<td style="text-align: center; cursor: pointer" class="day">25</td>
<td style="text-align: center; cursor: pointer" class="day">26</td>
<td style="text-align: center; cursor: pointer" class="day weekend">27</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">52</td>
<td style="text-align: center; cursor: pointer" class="day selected today weekend">28</td>
<td style="text-align: center; cursor: pointer" class="day">29</td>
<td style="text-align: center; cursor: pointer" class="day">30</td>
<td style="text-align: center; cursor: pointer" class="day">31</td>
<td style="text-align: center" class="day disabled othermonth">1</td>
<td style="text-align: center" class="day disabled othermonth">2</td>
<td style="text-align: center" class="day disabled othermonth weekend">3</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">1</td>
<td style="text-align: center" class="day disabled othermonth weekend">4</td>
<td style="text-align: center" class="day disabled othermonth">5</td>
<td style="text-align: center" class="day disabled othermonth">6</td>
<td style="text-align: center" class="day disabled othermonth">7</td>
<td style="text-align: center" class="day disabled othermonth">8</td>
<td style="text-align: center" class="day disabled othermonth">9</td>
<td style="text-align: center" class="day disabled othermonth weekend">10</td>
</tr>
<tr class="time">
<td colspan="1" style="vertical-align: middle" class="time time-title"></td>
<td colspan="3" class="time hours-select">
<select data-chosen="true" style="width: 100%" class="time time-hours form-control form-select">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20" selected>20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
<td colspan="3" class="time minutes-select">
<select data-chosen="true" style="width: 100%" class="time time-minutes form-control form-select">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57" selected>57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</td>
<td colspan="1"> </td>
</tr>
</tbody>
</table>
<div class="buttons-wrapper btn-group">
<button type="button" data-action="clear" class="js-btn btn btn-clear">Clear</button>
<button type="button" data-action="today" class="js-btn btn btn-today">Today</button>
<button type="button" data-action="exit" class="js-btn btn btn-exit">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_publish_up-lbl" for="jform_publish_up">
Start Publishing</label>
</div>
<div class="controls">
<div class="field-calendar">
<div class="input-group">
<input type="text" id="jform_publish_up" name="jform[publish_up]" value="2025-12-24 13:38:23" size="22" data-alt-value="2025-12-24 13:38:23" autocomplete="off" class="form-control">
<button type="button" id="jform_publish_up_btn" title="Open the calendar" data-inputfield="jform_publish_up" data-button="jform_publish_up_btn" data-date-format="%Y-%m-%d %H:%M:%S" data-firstday data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="1" data-show-others="1" data-time24="24" data-only-months-nav="0" data-min-year data-max-year data-date-type="gregorian" class="btn btn-primary">
<span aria-hidden="true" class="icon-calendar"></span>
<span class="visually-hidden">Open the calendar</span>
</button>
</div>
<div hidden style="position: absolute; box-shadow: rgba(0, 0, 0, 0.67) 0px 0px 70px 0px; min-width: 0px; padding: 0px; left: auto; top: auto; z-index: 1060; border-radius: 20px" class="js-calendar">
<div class="calendar-container">
<table style="margin-bottom: 0px; visibility: visible" class="table">
<thead class="calendar-header">
<tr class="calendar-head-row">
<td colspan="1" style="text-align: center; font-size: 18px; line-height: 18px" class="nav">
<a class="js-btn btn-prev-year">‹</a>
</td>
<td colspan="6" class="title title-year">
<div>
<div>
<span>2025</span>
</div>
</div>
</td>
<td colspan="1" style="text-align: center; font-size: 18px; line-height: 18px" class="nav">
<a class="js-btn btn-next-year">
›</a>
</td>
</tr>
<tr class="calendar-head-row">
<td colspan="1" style="text-align: center; font-size: 2em; line-height: 1em" class="nav">
<a class="js-btn btn-prev-month">‹</a>
</td>
<td colspan="6" style="text-align: center" class="title title-month">
<div>
<div>
<span>December</span>
</div>
</div>
</td>
<td colspan="1" style="text-align: center; font-size: 2em; line-height: 1em" class="nav">
<a class="js-btn btn-next-month">
›</a>
</td>
</tr>
<tr class="daynames wk">
<td class="day-name wn">wk</td>
<td class="day-name day-name-week">Sun</td>
<td class="day-name day-name-week">Mon</td>
<td class="day-name day-name-week">Tue</td>
<td class="day-name day-name-week">Wed</td>
<td class="day-name day-name-week">Thu</td>
<td class="day-name day-name-week">Fri</td>
<td class="day-name day-name-week">Sat</td>
</tr>
</thead>
<tbody>
<tr class="daysrow wk">
<td class="day wn">48</td>
<td style="text-align: center" class="day disabled othermonth weekend">30</td>
<td style="text-align: center; cursor: pointer" class="day">1</td>
<td style="text-align: center; cursor: pointer" class="day">2</td>
<td style="text-align: center; cursor: pointer" class="day">3</td>
<td style="text-align: center; cursor: pointer" class="day">4</td>
<td style="text-align: center; cursor: pointer" class="day">5</td>
<td style="text-align: center; cursor: pointer" class="day weekend">6</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">49</td>
<td style="text-align: center; cursor: pointer" class="day weekend">7</td>
<td style="text-align: center; cursor: pointer" class="day">8</td>
<td style="text-align: center; cursor: pointer" class="day">9</td>
<td style="text-align: center; cursor: pointer" class="day">10</td>
<td style="text-align: center; cursor: pointer" class="day">11</td>
<td style="text-align: center; cursor: pointer" class="day">12</td>
<td style="text-align: center; cursor: pointer" class="day weekend">13</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">50</td>
<td style="text-align: center; cursor: pointer" class="day weekend">14</td>
<td style="text-align: center; cursor: pointer" class="day">15</td>
<td style="text-align: center; cursor: pointer" class="day">16</td>
<td style="text-align: center; cursor: pointer" class="day">17</td>
<td style="text-align: center; cursor: pointer" class="day">18</td>
<td style="text-align: center; cursor: pointer" class="day">19</td>
<td style="text-align: center; cursor: pointer" class="day weekend">20</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">51</td>
<td style="text-align: center; cursor: pointer" class="day weekend">21</td>
<td style="text-align: center; cursor: pointer" class="day">22</td>
<td style="text-align: center; cursor: pointer" class="day">23</td>
<td style="text-align: center; cursor: pointer" class="day selected">24</td>
<td style="text-align: center; cursor: pointer" class="day">25</td>
<td style="text-align: center; cursor: pointer" class="day">26</td>
<td style="text-align: center; cursor: pointer" class="day weekend">27</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">52</td>
<td style="text-align: center; cursor: pointer" class="day today weekend">28</td>
<td style="text-align: center; cursor: pointer" class="day">29</td>
<td style="text-align: center; cursor: pointer" class="day">30</td>
<td style="text-align: center; cursor: pointer" class="day">31</td>
<td style="text-align: center" class="day disabled othermonth">1</td>
<td style="text-align: center" class="day disabled othermonth">2</td>
<td style="text-align: center" class="day disabled othermonth weekend">3</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">1</td>
<td style="text-align: center" class="day disabled othermonth weekend">4</td>
<td style="text-align: center" class="day disabled othermonth">5</td>
<td style="text-align: center" class="day disabled othermonth">6</td>
<td style="text-align: center" class="day disabled othermonth">7</td>
<td style="text-align: center" class="day disabled othermonth">8</td>
<td style="text-align: center" class="day disabled othermonth">9</td>
<td style="text-align: center" class="day disabled othermonth weekend">10</td>
</tr>
<tr class="time">
<td colspan="1" style="vertical-align: middle" class="time time-title"></td>
<td colspan="3" class="time hours-select">
<select data-chosen="true" style="width: 100%" class="time time-hours form-control form-select">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13" selected>13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
<td colspan="3" class="time minutes-select">
<select data-chosen="true" style="width: 100%" class="time time-minutes form-control form-select">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38" selected>38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57">57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</td>
<td colspan="1"> </td>
</tr>
</tbody>
</table>
<div class="buttons-wrapper btn-group">
<button type="button" data-action="clear" class="js-btn btn btn-clear">Clear</button>
<button type="button" data-action="today" class="js-btn btn btn-today">Today</button>
<button type="button" data-action="exit" class="js-btn btn btn-exit">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_publish_down-lbl" for="jform_publish_down">
Finish Publishing</label>
</div>
<div class="controls">
<div class="field-calendar">
<div class="input-group">
<input type="text" id="jform_publish_down" name="jform[publish_down]" value size="22" data-alt-value autocomplete="off" class="form-control">
<button type="button" id="jform_publish_down_btn" title="Open the calendar" data-inputfield="jform_publish_down" data-button="jform_publish_down_btn" data-date-format="%Y-%m-%d %H:%M:%S" data-firstday data-weekend="0,6" data-today-btn="1" data-week-numbers="1" data-show-time="1" data-show-others="1" data-time24="24" data-only-months-nav="0" data-min-year data-max-year data-date-type="gregorian" class="btn btn-primary">
<span aria-hidden="true" class="icon-calendar"></span>
<span class="visually-hidden">Open the calendar</span>
</button>
</div>
<div hidden style="position: absolute; box-shadow: rgba(0, 0, 0, 0.67) 0px 0px 70px 0px; min-width: 0px; padding: 0px; left: auto; top: auto; z-index: 1060; border-radius: 20px" class="js-calendar">
<div class="calendar-container">
<table style="margin-bottom: 0px; visibility: visible" class="table">
<thead class="calendar-header">
<tr class="calendar-head-row">
<td colspan="1" style="text-align: center; font-size: 18px; line-height: 18px" class="nav">
<a class="js-btn btn-prev-year">‹</a>
</td>
<td colspan="6" class="title title-year">
<div>
<div>
<span>2025</span>
</div>
</div>
</td>
<td colspan="1" style="text-align: center; font-size: 18px; line-height: 18px" class="nav">
<a class="js-btn btn-next-year">
›</a>
</td>
</tr>
<tr class="calendar-head-row">
<td colspan="1" style="text-align: center; font-size: 2em; line-height: 1em" class="nav">
<a class="js-btn btn-prev-month">‹</a>
</td>
<td colspan="6" style="text-align: center" class="title title-month">
<div>
<div>
<span>December</span>
</div>
</div>
</td>
<td colspan="1" style="text-align: center; font-size: 2em; line-height: 1em" class="nav">
<a class="js-btn btn-next-month">
›</a>
</td>
</tr>
<tr class="daynames wk">
<td class="day-name wn">wk</td>
<td class="day-name day-name-week">Sun</td>
<td class="day-name day-name-week">Mon</td>
<td class="day-name day-name-week">Tue</td>
<td class="day-name day-name-week">Wed</td>
<td class="day-name day-name-week">Thu</td>
<td class="day-name day-name-week">Fri</td>
<td class="day-name day-name-week">Sat</td>
</tr>
</thead>
<tbody>
<tr class="daysrow wk">
<td class="day wn">48</td>
<td style="text-align: center" class="day disabled othermonth weekend">30</td>
<td style="text-align: center; cursor: pointer" class="day">1</td>
<td style="text-align: center; cursor: pointer" class="day">2</td>
<td style="text-align: center; cursor: pointer" class="day">3</td>
<td style="text-align: center; cursor: pointer" class="day">4</td>
<td style="text-align: center; cursor: pointer" class="day">5</td>
<td style="text-align: center; cursor: pointer" class="day weekend">6</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">49</td>
<td style="text-align: center; cursor: pointer" class="day weekend">7</td>
<td style="text-align: center; cursor: pointer" class="day">8</td>
<td style="text-align: center; cursor: pointer" class="day">9</td>
<td style="text-align: center; cursor: pointer" class="day">10</td>
<td style="text-align: center; cursor: pointer" class="day">11</td>
<td style="text-align: center; cursor: pointer" class="day">12</td>
<td style="text-align: center; cursor: pointer" class="day weekend">13</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">50</td>
<td style="text-align: center; cursor: pointer" class="day weekend">14</td>
<td style="text-align: center; cursor: pointer" class="day">15</td>
<td style="text-align: center; cursor: pointer" class="day">16</td>
<td style="text-align: center; cursor: pointer" class="day">17</td>
<td style="text-align: center; cursor: pointer" class="day">18</td>
<td style="text-align: center; cursor: pointer" class="day">19</td>
<td style="text-align: center; cursor: pointer" class="day weekend">20</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">51</td>
<td style="text-align: center; cursor: pointer" class="day weekend">21</td>
<td style="text-align: center; cursor: pointer" class="day">22</td>
<td style="text-align: center; cursor: pointer" class="day">23</td>
<td style="text-align: center; cursor: pointer" class="day">24</td>
<td style="text-align: center; cursor: pointer" class="day">25</td>
<td style="text-align: center; cursor: pointer" class="day">26</td>
<td style="text-align: center; cursor: pointer" class="day weekend">27</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">52</td>
<td style="text-align: center; cursor: pointer" class="day selected today weekend">28</td>
<td style="text-align: center; cursor: pointer" class="day">29</td>
<td style="text-align: center; cursor: pointer" class="day">30</td>
<td style="text-align: center; cursor: pointer" class="day">31</td>
<td style="text-align: center" class="day disabled othermonth">1</td>
<td style="text-align: center" class="day disabled othermonth">2</td>
<td style="text-align: center" class="day disabled othermonth weekend">3</td>
</tr>
<tr class="daysrow wk">
<td class="day wn">1</td>
<td style="text-align: center" class="day disabled othermonth weekend">4</td>
<td style="text-align: center" class="day disabled othermonth">5</td>
<td style="text-align: center" class="day disabled othermonth">6</td>
<td style="text-align: center" class="day disabled othermonth">7</td>
<td style="text-align: center" class="day disabled othermonth">8</td>
<td style="text-align: center" class="day disabled othermonth">9</td>
<td style="text-align: center" class="day disabled othermonth weekend">10</td>
</tr>
<tr class="time">
<td colspan="1" style="vertical-align: middle" class="time time-title"></td>
<td colspan="3" class="time hours-select">
<select data-chosen="true" style="width: 100%" class="time time-hours form-control form-select">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20" selected>20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
</select>
</td>
<td colspan="3" class="time minutes-select">
<select data-chosen="true" style="width: 100%" class="time time-minutes form-control form-select">
<option value="00">00</option>
<option value="01">01</option>
<option value="02">02</option>
<option value="03">03</option>
<option value="04">04</option>
<option value="05">05</option>
<option value="06">06</option>
<option value="07">07</option>
<option value="08">08</option>
<option value="09">09</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
<option value="32">32</option>
<option value="33">33</option>
<option value="34">34</option>
<option value="35">35</option>
<option value="36">36</option>
<option value="37">37</option>
<option value="38">38</option>
<option value="39">39</option>
<option value="40">40</option>
<option value="41">41</option>
<option value="42">42</option>
<option value="43">43</option>
<option value="44">44</option>
<option value="45">45</option>
<option value="46">46</option>
<option value="47">47</option>
<option value="48">48</option>
<option value="49">49</option>
<option value="50">50</option>
<option value="51">51</option>
<option value="52">52</option>
<option value="53">53</option>
<option value="54">54</option>
<option value="55">55</option>
<option value="56">56</option>
<option value="57" selected>57</option>
<option value="58">58</option>
<option value="59">59</option>
</select>
</td>
<td colspan="1"> </td>
</tr>
</tbody>
</table>
<div class="buttons-wrapper btn-group">
<button type="button" data-action="clear" class="js-btn btn btn-clear">Clear</button>
<button type="button" data-action="today" class="js-btn btn btn-today">Today</button>
<button type="button" data-action="exit" class="js-btn btn btn-exit">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_access-lbl" for="jform_access">
Access</label>
</div>
<div class="controls">
<select id="jform_access" name="jform[access]" class="form-select">
<option value="1" selected="selected">Public</option>
<option value="5">Guest</option>
<option value="2">Registered</option>
<option value="3">Special</option>
<option value="6">Super Users</option>
</select>
</div>
</div>
</joomla-tab-element>
<joomla-tab-element id="language" name="Language" role="tabpanel">
<div class="control-group">
<div class="control-label">
<label id="jform_language-lbl" for="jform_language">
Language</label>
</div>
<div class="controls">
<select id="jform_language" name="jform[language]" class="form-select">
<option value="*" selected="selected">All</option>
<option value="en-GB">English (en-GB)</option>
<option value="de-DE">German (Germany)</option>
</select>
</div>
</div>
</joomla-tab-element>
<joomla-tab-element id="metadata" name="Metadata" role="tabpanel">
<div class="control-group">
<div class="control-label">
<label id="jform_metadesc-lbl" for="jform_metadesc">
Meta Description</label>
</div>
<div class="controls">
<textarea name="jform[metadesc]" id="jform_metadesc" cols="30" rows="3" maxlength="300" data-counter-label="{remaining} characters remaining of {maxlength} characters." aria-controls="short-and-sweet-counter-0" class="form-control charcount"></textarea>
<span aria-hidden="true" class="small text-muted">300 characters remaining of 300 characters.</span>
<span id="short-and-sweet-counter-0" role="status" aria-live="polite" style="position:absolute; overflow:hidden; height:1px; width:1px; padding:0; border:0; clip:rect(1px, 1px, 1px, 1px); clip-path:inset(50%); white-space:nowrap"></span>
</div>
</div>
<div class="control-group">
<div class="control-label">
<label id="jform_metakey-lbl" for="jform_metakey">
Keywords</label>
</div>
<div class="controls">
<textarea name="jform[metakey]" id="jform_metakey" cols="50" rows="5" class="form-control"></textarea>
</div>
</div>
</joomla-tab-element>
</joomla-tab>
<input type="hidden" name="task" value="">
<input type="hidden" name="return" value="aHR0cDovL2xvY2FsaG9zdC9qY3JhZnRzL2Vu">
<input type="hidden" name="e7452d1985c9d45411cf72db0ce6a415" value="1">
</fieldset>
<div class="d-grid gap-2 d-sm-block mb-2">
<button type="button" class="btn btn-primary" data-submit-task="article.apply">
<span class="icon-check" aria-hidden="true"></span>
Save</button>
<button type="button" class="btn btn-primary" data-submit-task="article.save">
<span class="icon-check" aria-hidden="true"></span>
Save & Close</button>
<button type="button" class="btn btn-primary" data-submit-task="article.save2copy">
<span class="icon-copy" aria-hidden="true"></span>
Save As Copy</button>
<button type="button" class="btn btn-danger" data-submit-task="article.cancel">
<span class="icon-times" aria-hidden="true"></span>
Cancel</button>
<button type="button" class="btn btn-secondary" data-joomla-dialog="{"popupType":"iframe","src":"/jcrafts/en/component/contenthistory?view=history&layout=modal&tmpl=component&field=jform_contenthistory&item_id=com_content.article.1&e7452d1985c9d45411cf72db0ce6a415=1","textHeader":"Versions"}" data-typealias="com_content.article">
<span class="icon-code-branch" aria-hidden="true"></span>
Versions</button>
</div>
</form>Configuration
Component Config:
Forms/edit-form/edit-form.config.js
{
"headline": "Edit Form"
}