N°2847 - Form and Input WIP

2026-04-25 11:38:44 +02:00 · 2020-09-22 13:24:22 +02:00
parent 40efaf0360
commit 33f11d2a43
19 changed files with 476 additions and 62 deletions
--- a/application/applicationcontext.class.inc.php
+++ b/application/applicationcontext.class.inc.php
@@ -24,6 +24,10 @@
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

+use Combodo\iTop\Application\UI\Component\Input\InputFactory;
+use Combodo\iTop\Application\UI\Layout\UIContentBlock;
+use Combodo\iTop\Application\UI\UIBlock;
+
 require_once(APPROOT."/application/utils.inc.php");

 /**
@@ -31,12 +35,12 @@ require_once(APPROOT."/application/utils.inc.php");
 */
 interface iDBObjectURLMaker
 {
-    /**
-     * @param string $sClass
-     * @param string $iId
-     *
-     * @return string
-     */
+	/**
+	 * @param string $sClass
+	 * @param string $iId
+	 *
+	 * @return string
+	 */
 	public static function MakeObjectURL($sClass, $iId);
 }

@@ -207,24 +211,39 @@ class ApplicationContext
 	 */
 	public function GetForPostParams()
 	{
-		return json_encode( $this->aValues);
+		return json_encode($this->aValues);
 	}
+
 	/**
 	 * Returns the context as sequence of input tags to be inserted inside a <form> tag
+	 *
 	 * @return string The context as a sequence of <input type="hidden" /> tags
 	 */
 	public function GetForForm()
 	{
 		$sContext = "";
-		foreach($this->aValues as $sName => $sValue)
-		{
+		foreach ($this->aValues as $sName => $sValue) {
 			$sContext .= "<input type=\"hidden\" name=\"c[$sName]\" value=\"".htmlentities($sValue, ENT_QUOTES, 'UTF-8')."\" />\n";
 		}
 		return $sContext;
 	}

+	/**
+	 * Returns the context as sequence of input tags to be inserted inside a <form> tag
+	 *
+	 */
+	public function GetForFormBlock(): UIBlock
+	{
+		$oContext = new UIContentBlock();
+		foreach ($this->aValues as $sName => $sValue) {
+			$oContext->AddSubBlock(InputFactory::MakeForHidden('c[$sName]', utils::HtmlEntities($sValue)));
+		}
+		return $oContext;
+	}
+
 	/**
 	 * Returns the context as a hash array 'parameter_name' => value
+	 *
 	 * @return array The context information
 	 */
 	public function GetAsHash()
--- a/css/backoffice/components/_all.scss
+++ b/css/backoffice/components/_all.scss
@@ -17,3 +17,5 @@
@import "tab";
@import "ajaxtab";
@import "title";
+@import "form";
+@import "input";
--- a/css/backoffice/components/_form.scss
+++ b/css/backoffice/components/_form.scss
@@ -0,0 +1,4 @@
+/*!
+ * copyright   Copyright (C) 2010-2020 Combodo SARL
+ * license     http://opensource.org/licenses/AGPL-3.0
+ */
--- a/css/backoffice/components/_input.scss
+++ b/css/backoffice/components/_input.scss
@@ -0,0 +1,4 @@
+/*!
+ * copyright   Copyright (C) 2010-2020 Combodo SARL
+ * license     http://opensource.org/licenses/AGPL-3.0
+ */
--- a/datamodels/2.x/itop-config/config.php
+++ b/datamodels/2.x/itop-config/config.php
@@ -26,7 +26,9 @@

 use Combodo\iTop\Application\UI\Component\Alert\AlertFactory;
 use Combodo\iTop\Application\UI\Component\Button\ButtonFactory;
+use Combodo\iTop\Application\UI\Component\Form\Form;
 use Combodo\iTop\Application\UI\Component\Html\Html;
+use Combodo\iTop\Application\UI\Component\Input\InputFactory;
 use Combodo\iTop\Application\UI\Component\Title\TitleFactory;
 use Combodo\iTop\Config\Validator\iTopConfigAstValidator;
 use Combodo\iTop\Config\Validator\iTopConfigSyntaxValidator;
@@ -167,23 +169,22 @@ try {
 			$sOriginalConfigEscaped = htmlentities($sOriginalConfig, ENT_QUOTES, 'UTF-8');
 			$oP->AddUiBlock(new Html('<p>'.Dict::S('config-edit-intro').'</p>'));

-			$oP->add("<form method=\"POST\">");
-			$oP->add("<input id=\"operation\" type=\"hidden\" name=\"operation\" value=\"save\">");
-			$oP->add("<input type=\"hidden\" name=\"transaction_id\" value=\"".utils::GetNewTransactionId()."\">");
+			$oForm = new Form();
+			$oForm->AddSubBlock(InputFactory::MakeForHidden('operation', 'save'));
+			$oForm->AddSubBlock(InputFactory::MakeForHidden('transaction_id', utils::GetNewTransactionId()));

 			// - Cancel button
 			$oCancelButton = ButtonFactory::MakeForSecondaryAction(Dict::S('config-cancel'), 'cancel_button', null, true, 'cancel_button');
 			$oCancelButton->SetOnClickJsCode("return ResetConfig();");
-			$oP->AddUiBlock($oCancelButton);
+			$oForm->AddSubBlock($oCancelButton);

 			// - Submit button
 			$oSubmitButton = ButtonFactory::MakeForValidationAction(Dict::S('config-apply'), null, Dict::S('config-apply'), true, 'submit_button');
-			$oP->AddUiBlock($oSubmitButton);
-
-			$oP->add("<input type=\"hidden\" id=\"prev_config\" name=\"prev_config\" value=\"$sOriginalConfigEscaped\">");
-			$oP->add("<input type=\"hidden\"  name=\"new_config\" value=\"$sConfigEscaped\">");
-			$oP->add("<div id =\"new_config\" style=\"position: absolute; top: ".$iEditorTopMargin."em; bottom: 0; left: 5px; right: 5px;\"></div>");
-			$oP->add("</form>");
+			$oForm->AddSubBlock($oSubmitButton);
+			$oForm->AddSubBlock(InputFactory::MakeForHidden('prev_config', $sOriginalConfigEscaped));
+			$oForm->AddSubBlock(InputFactory::MakeForHidden('new_config', $sConfigEscaped));
+			$oForm->AddHtml("<div id =\"new_config\" style=\"position: absolute; top: ".$iEditorTopMargin."em; bottom: 0; left: 5px; right: 5px;\"></div>");
+			$oP->AddUiBlock($oForm);

 			$oP->add_script(
 				<<<'JS'
--- a/lib/composer/autoload_classmap.php
+++ b/lib/composer/autoload_classmap.php
@@ -155,10 +155,16 @@ return array(
    'Combodo\\iTop\\Application\\UI\\Component\\Breadcrumbs\\Breadcrumbs' => $baseDir . '/sources/application/UI/Component/Breadcrumbs/Breadcrumbs.php',
    'Combodo\\iTop\\Application\\UI\\Component\\Button\\Button' => $baseDir . '/sources/application/UI/Component/Button/Button.php',
    'Combodo\\iTop\\Application\\UI\\Component\\Button\\ButtonFactory' => $baseDir . '/sources/application/UI/Component/Button/ButtonFactory.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\Form\\Form' => $baseDir . '/sources/application/UI/Component/Form/Form.php',
    'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearch' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearch.php',
    'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchFactory' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearchFactory.php',
    'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchHelper' => $baseDir . '/sources/application/UI/Component/GlobalSearch/GlobalSearchHelper.php',
    'Combodo\\iTop\\Application\\UI\\Component\\Html\\Html' => $baseDir . '/sources/application/UI/Component/Html/Html.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\Input\\Input' => $baseDir . '/sources/application/UI/Component/Input/Input.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\Input\\InputFactory' => $baseDir . '/sources/application/UI/Component/Input/InputFactory.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\Input\\InputWithLabel' => $baseDir . '/sources/application/UI/Component/Input/InputWithLabel.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\Input\\Select' => $baseDir . '/sources/application/UI/Component/Input/Select.php',
+    'Combodo\\iTop\\Application\\UI\\Component\\Input\\SelectOption' => $baseDir . '/sources/application/UI/Component/Input/SelectOption.php',
    'Combodo\\iTop\\Application\\UI\\Component\\Panel\\Panel' => $baseDir . '/sources/application/UI/Component/Panel/Panel.php',
    'Combodo\\iTop\\Application\\UI\\Component\\Panel\\PanelFactory' => $baseDir . '/sources/application/UI/Component/Panel/PanelFactory.php',
    'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenu' => $baseDir . '/sources/application/UI/Component/PopoverMenu/NewsroomMenu/NewsroomMenu.php',
--- a/lib/composer/autoload_static.php
+++ b/lib/composer/autoload_static.php
@@ -385,10 +385,16 @@ class ComposerStaticInit0018331147de7601e7552f7da8e3bb8b
        'Combodo\\iTop\\Application\\UI\\Component\\Breadcrumbs\\Breadcrumbs' => __DIR__ . '/../..' . '/sources/application/UI/Component/Breadcrumbs/Breadcrumbs.php',
        'Combodo\\iTop\\Application\\UI\\Component\\Button\\Button' => __DIR__ . '/../..' . '/sources/application/UI/Component/Button/Button.php',
        'Combodo\\iTop\\Application\\UI\\Component\\Button\\ButtonFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/Button/ButtonFactory.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\Form\\Form' => __DIR__ . '/../..' . '/sources/application/UI/Component/Form/Form.php',
        'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearch' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearch.php',
        'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearchFactory.php',
        'Combodo\\iTop\\Application\\UI\\Component\\GlobalSearch\\GlobalSearchHelper' => __DIR__ . '/../..' . '/sources/application/UI/Component/GlobalSearch/GlobalSearchHelper.php',
        'Combodo\\iTop\\Application\\UI\\Component\\Html\\Html' => __DIR__ . '/../..' . '/sources/application/UI/Component/Html/Html.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\Input\\Input' => __DIR__ . '/../..' . '/sources/application/UI/Component/Input/Input.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\Input\\InputFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/Input/InputFactory.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\Input\\InputWithLabel' => __DIR__ . '/../..' . '/sources/application/UI/Component/Input/InputWithLabel.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\Input\\Select' => __DIR__ . '/../..' . '/sources/application/UI/Component/Input/Select.php',
+        'Combodo\\iTop\\Application\\UI\\Component\\Input\\SelectOption' => __DIR__ . '/../..' . '/sources/application/UI/Component/Input/SelectOption.php',
        'Combodo\\iTop\\Application\\UI\\Component\\Panel\\Panel' => __DIR__ . '/../..' . '/sources/application/UI/Component/Panel/Panel.php',
        'Combodo\\iTop\\Application\\UI\\Component\\Panel\\PanelFactory' => __DIR__ . '/../..' . '/sources/application/UI/Component/Panel/PanelFactory.php',
        'Combodo\\iTop\\Application\\UI\\Component\\PopoverMenu\\NewsroomMenu\\NewsroomMenu' => __DIR__ . '/../..' . '/sources/application/UI/Component/PopoverMenu/NewsroomMenu/NewsroomMenu.php',
--- a/pages/preferences.php
+++ b/pages/preferences.php
@@ -18,7 +18,9 @@
 */

 use Combodo\iTop\Application\UI\Component\Button\ButtonFactory;
+use Combodo\iTop\Application\UI\Component\Form\Form;
 use Combodo\iTop\Application\UI\Component\Html\Html;
+use Combodo\iTop\Application\UI\Component\Input\InputFactory;
 use Combodo\iTop\Application\UI\Component\Panel\Panel;
 use Combodo\iTop\Application\UI\Component\Title\TitleFactory;
 use Combodo\iTop\Application\UI\Layout\PageContent\PageContentFactory;
@@ -45,46 +47,8 @@ function DisplayPreferences($oP)
 	//
 	//////////////////////////////////////////////////////////////////////////
 	$oUserLanguageBlock = new Panel(Dict::S('UI:FavoriteLanguage'), array(), 'grey', 'ibo-user-language-selection');
-	$oUserLanguageStartForm = new Html('<form method="post">');
-
-	$aLanguages = Dict::GetLanguages();
-	$aSortedlang = array();
-	foreach ($aLanguages as $sCode => $aLang) {
-		if (MetaModel::GetConfig()->Get('demo_mode')) {
-			if ($sCode != Dict::GetUserLanguage()) {
-				// Demo mode: only the current user language is listed in the available choices
-				continue;
-			}
-		}
-		$aSortedlang[$aLang['description']] = $sCode;
-	}
-	ksort($aSortedlang);
-	$sUserLanguageBlockSelect = '';
-	$sUserLanguageBlockSelect .= '<p>'.Dict::S('UI:Favorites:SelectYourLanguage').' <select name="language">';
-	foreach ($aSortedlang as $sCode)
-	{
-		$sSelected = ($sCode == Dict::GetUserLanguage()) ? 'selected' : '';
-		$sUserLanguageBlockSelect .= '<option value="'.$sCode.'" '.$sSelected.'/>'.$aLanguages[$sCode]['description'].' ('.$aLanguages[$sCode]['localized_description'].')</option>';
-	}
-	$sUserLanguageBlockSelect .= '</select></p>';
-	$sUserLanguageBlockSelect .= '<input type="hidden" name="operation" value="apply_language"/>';
-	$sUserLanguageBlockSelect .= $oAppContext->GetForForm();
-	$oUserLanguageBlockSelect = new Html($sUserLanguageBlockSelect);
-
-	// - Cancel button
-	$oUserLanguageCancelButton = ButtonFactory::MakeForSecondaryAction(Dict::S('UI:Button:Cancel'));
-	$oUserLanguageCancelButton->SetOnClickJsCode("window.location.href = '$sURL'");
-	// - Submit button
-	$oUserLanguageSubmitButton = ButtonFactory::MakeForValidationAction(Dict::S('UI:Button:Apply'), null, null, true);
-
-	$oUserLanguageEndForm = new Html('</form>');
-
-	$oUserLanguageBlock->AddSubBlock($oUserLanguageStartForm);
-	$oUserLanguageBlock->AddSubBlock($oUserLanguageBlockSelect);
-	$oUserLanguageBlock->AddSubBlock($oUserLanguageCancelButton);
-	$oUserLanguageBlock->AddSubBlock($oUserLanguageSubmitButton);
-	$oUserLanguageBlock->AddSubBlock($oUserLanguageEndForm);
-
+	$oUserLanguageForm = GetUserLanguageForm($oAppContext, $sURL);
+	$oUserLanguageBlock->AddSubBlock($oUserLanguageForm);
 	$oContentLayout->AddMainBlock($oUserLanguageBlock);

 	//////////////////////////////////////////////////////////////////////////
@@ -480,6 +444,48 @@ HTML
 	$oP->SetContentLayout($oContentLayout);
 }

+/**
+ * @param \ApplicationContext $oAppContext
+ * @param string $sURL
+ *
+ * @return \Combodo\iTop\Application\UI\Component\Form\Form
+ */
+function GetUserLanguageForm(ApplicationContext $oAppContext, string $sURL): Form
+{
+	$oUserLanguageForm = new Form();
+	$oUserLanguageForm->AddSubBlock(InputFactory::MakeForHidden('operation', 'apply_language'));
+
+	// Lang selector
+	$aLanguages = Dict::GetLanguages();
+	$aSortedLang = array();
+	foreach ($aLanguages as $sCode => $aLang) {
+		if (MetaModel::GetConfig()->Get('demo_mode')) {
+			if ($sCode != Dict::GetUserLanguage()) {
+				// Demo mode: only the current user language is listed in the available choices
+				continue;
+			}
+		}
+		$aSortedLang[$aLang['description']] = $sCode;
+	}
+	ksort($aSortedLang);
+	$oUserLanguageBlockSelect = InputFactory::MakeForSelect('language', Dict::S('UI:Favorites:SelectYourLanguage'));
+	foreach ($aSortedLang as $sCode) {
+		$bSelected = ($sCode == Dict::GetUserLanguage());
+		$oUserLanguageBlockSelect->AddOption(InputFactory::MakeForSelectOption($sCode, $aLanguages[$sCode]['description'].' ('.$aLanguages[$sCode]['localized_description'].')', $bSelected));
+	}
+	$oUserLanguageForm->AddSubBlock($oUserLanguageBlockSelect);
+
+	$oUserLanguageForm->AddSubBlock($oAppContext->GetForFormBlock());
+	// - Cancel button
+	$oUserLanguageCancelButton = ButtonFactory::MakeForSecondaryAction(Dict::S('UI:Button:Cancel'));
+	$oUserLanguageCancelButton->SetOnClickJsCode("window.location.href = '$sURL'");
+	$oUserLanguageForm->AddSubBlock($oUserLanguageCancelButton);
+	// - Submit button
+	$oUserLanguageSubmitButton = ButtonFactory::MakeForValidationAction(Dict::S('UI:Button:Apply'), null, null, true);
+	$oUserLanguageForm->AddSubBlock($oUserLanguageSubmitButton);
+	return $oUserLanguageForm;
+}
+
 /////////////////////////////////////////////////////////////////////////////
 //
 // Main program
--- a/sources/application/UI/Component/Form/Form.php
+++ b/sources/application/UI/Component/Form/Form.php
@@ -0,0 +1,47 @@
+<?php
+/**
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\UI\Component\Form;
+
+
+use Combodo\iTop\Application\UI\Layout\UIContentBlock;
+
+/**
+ * Class Form
+ *
+ * @package Combodo\iTop\Application\UI\Component\Form
+ */
+class Form extends UIContentBlock
+{
+	// Overloaded constants
+	public const BLOCK_CODE = 'ibo-form';
+	public const HTML_TEMPLATE_REL_PATH = 'components/form/layout';
+	public const JS_TEMPLATE_REL_PATH = 'components/form/layout';
+
+	/** @var string */
+	protected $sOnSubmitJsCode;
+
+	public function __construct(string $sName = null)
+	{
+		parent::__construct($sName);
+		$this->sOnSubmitJsCode = null;
+	}
+
+	public function SetOnSubmitJsCode(string $sJsCode): void
+	{
+		$this->sOnSubmitJsCode = $sJsCode;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetOnSubmitJsCode(): ?string
+	{
+		return $this->sOnSubmitJsCode;
+	}
+
+
+}
--- a/sources/application/UI/Component/Input/Input.php
+++ b/sources/application/UI/Component/Input/Input.php
@@ -0,0 +1,91 @@
+<?php
+/**
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+namespace Combodo\iTop\Application\UI\Component\Input;
+
+
+use Combodo\iTop\Application\UI\UIBlock;
+
+/**
+ * Class Input
+ *
+ * @package Combodo\iTop\Application\UI\Component\Input
+ */
+class Input extends UIBlock
+{
+	// Overloaded constants
+	public const BLOCK_CODE = 'ibo-input';
+	public const HTML_TEMPLATE_REL_PATH = 'components/input/layout';
+	public const JS_TEMPLATE_REL_PATH = 'components/input/layout';
+
+	public const INPUT_HIDDEN = 'hidden';
+
+	/** @var string */
+	protected $sType;
+	/** @var string */
+	protected $sName;
+	/** @var string */
+	protected $sValue;
+
+	/**
+	 * @return string
+	 */
+	public function GetType(): string
+	{
+		return $this->sType;
+	}
+
+	/**
+	 * @param string $sType
+	 *
+	 * @return Input
+	 */
+	public function SetType(string $sType): Input
+	{
+		$this->sType = $sType;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetName(): string
+	{
+		return $this->sName;
+	}
+
+	/**
+	 * @param string $sName
+	 *
+	 * @return Input
+	 */
+	public function SetName(string $sName): Input
+	{
+		$this->sName = $sName;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetValue(): string
+	{
+		return $this->sValue;
+	}
+
+	/**
+	 * @param string $sValue
+	 *
+	 * @return Input
+	 */
+	public function SetValue(string $sValue): Input
+	{
+		$this->sValue = $sValue;
+		return $this;
+	}
+
+
+}
--- a/sources/application/UI/Component/Input/InputFactory.php
+++ b/sources/application/UI/Component/Input/InputFactory.php
@@ -0,0 +1,46 @@
+<?php
+/**
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+
+namespace Combodo\iTop\Application\UI\Component\Input;
+
+
+class InputFactory
+{
+
+	public static function MakeForHidden(string $sName, string $sValue, ?string $sId = null): Input
+	{
+		$oInput = new Input($sId);
+
+		$oInput->SetType(Input::INPUT_HIDDEN)
+			->SetName($sName)
+			->SetValue($sValue);
+
+		return $oInput;
+	}
+
+	public static function MakeForSelect(string $sName, string $sLabel, ?string $sId = null): Select
+	{
+		$oInput = new Select($sId);
+
+		$oInput->SetName($sName)
+			->SetLabel($sLabel);
+
+		return $oInput;
+	}
+
+	public static function MakeForSelectOption(string $sValue, string $sLabel, bool $bSelected, ?string $sId = null): SelectOption
+	{
+		$oInput = new SelectOption($sId);
+
+		$oInput->SetValue($sValue)
+			->SetLabel($sLabel)
+			->SetSelected($bSelected);
+
+		return $oInput;
+	}
+
+}
--- a/sources/application/UI/Component/Input/InputWithLabel.php
+++ b/sources/application/UI/Component/Input/InputWithLabel.php
@@ -0,0 +1,37 @@
+<?php
+/**
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+
+namespace Combodo\iTop\Application\UI\Component\Input;
+
+
+class InputWithLabel extends Input
+{
+	public const HTML_TEMPLATE_REL_PATH = 'components/input/InputWithLabel';
+
+	/** @var string */
+	protected $sLabel;
+
+	/**
+	 * @return string
+	 */
+	public function GetLabel(): string
+	{
+		return $this->sLabel;
+	}
+
+	/**
+	 * @param string $sLabel
+	 *
+	 * @return InputWithLabel
+	 */
+	public function SetLabel(string $sLabel): InputWithLabel
+	{
+		$this->sLabel = $sLabel;
+		return $this;
+	}
+
+}
--- a/sources/application/UI/Component/Input/Select.php
+++ b/sources/application/UI/Component/Input/Select.php
@@ -0,0 +1,33 @@
+<?php
+/**
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+
+namespace Combodo\iTop\Application\UI\Component\Input;
+
+
+class Select extends InputWithLabel
+{
+	public const HTML_TEMPLATE_REL_PATH = 'components/input/Select';
+
+	/** @var array */
+	protected $aOptions;
+
+	public function __construct(?string $sId = null)
+	{
+		parent::__construct($sId);
+		$this->aOptions = [];
+	}
+
+	public function AddOption(SelectOption $oOption)
+	{
+		$this->aOptions[$oOption->GetId()] = $oOption;
+	}
+
+	public function GetSubBlocks()
+	{
+		return $this->aOptions;
+	}
+}
--- a/sources/application/UI/Component/Input/SelectOption.php
+++ b/sources/application/UI/Component/Input/SelectOption.php
@@ -0,0 +1,81 @@
+<?php
+/**
+ * @copyright   Copyright (C) 2010-2020 Combodo SARL
+ * @license     http://opensource.org/licenses/AGPL-3.0
+ */
+
+
+namespace Combodo\iTop\Application\UI\Component\Input;
+
+
+use Combodo\iTop\Application\UI\UIBlock;
+
+class SelectOption extends UIBlock
+{
+	public const HTML_TEMPLATE_REL_PATH = 'components/input/selectoption';
+
+	/** @var string */
+	protected $sValue;
+	/** @var string */
+	protected $sLabel;
+	/** @var bool */
+	protected $bSelected;
+
+	/**
+	 * @return string
+	 */
+	public function GetValue(): string
+	{
+		return $this->sValue;
+	}
+
+	/**
+	 * @param string $sValue
+	 *
+	 * @return SelectOption
+	 */
+	public function SetValue(string $sValue): SelectOption
+	{
+		$this->sValue = $sValue;
+		return $this;
+	}
+
+	/**
+	 * @return string
+	 */
+	public function GetLabel(): string
+	{
+		return $this->sLabel;
+	}
+
+	/**
+	 * @param string $sLabel
+	 *
+	 * @return SelectOption
+	 */
+	public function SetLabel(string $sLabel): SelectOption
+	{
+		$this->sLabel = $sLabel;
+		return $this;
+	}
+
+	/**
+	 * @return bool
+	 */
+	public function IsSelected(): bool
+	{
+		return $this->bSelected;
+	}
+
+	/**
+	 * @param bool $bSelected
+	 *
+	 * @return SelectOption
+	 */
+	public function SetSelected(bool $bSelected): SelectOption
+	{
+		$this->bSelected = $bSelected;
+		return $this;
+	}
+
+}
--- a/templates/components/form/layout.html.twig
+++ b/templates/components/form/layout.html.twig
@@ -0,0 +1,9 @@
+<form method="post"{% if oUIBlock.GetOnSubmitJsCode() %} {{ oUIBlock.GetOnSubmitJsCode() }}{% endif %}>
+    {% apply spaceless %}
+        {% block iboContentBlockContainer %}
+            {% for oSubBlock in oUIBlock.GetSubBlocks() %}
+                {{ render_block(oSubBlock, {aPage: aPage}) }}
+            {% endfor %}
+        {% endblock %}
+    {% endapply %}
+</form>
--- a/templates/components/input/inputwithlabel.html.twig
+++ b/templates/components/input/inputwithlabel.html.twig
@@ -0,0 +1,4 @@
+{% extends "components/input/layout.html.twig" %}
+{% block iboInputLabel %}
+    <label for="{{ oUIBlock.GetId() }}">{{ oUIBlock.GetLabel() }}</label>
+{% endblock %}
--- a/templates/components/input/layout.html.twig
+++ b/templates/components/input/layout.html.twig
@@ -0,0 +1,5 @@
+{% block iboInputLabel %}
+{% endblock %}
+{% block iboInput %}
+    <input type="{{ oUIBlock.GetType() }}" id="{{ oUIBlock.GetId() }}" name="{{ oUIBlock.GetName() }}" value="{{ oUIBlock.GetValue()|raw }}"/>
+{% endblock %}
--- a/templates/components/input/select.html.twig
+++ b/templates/components/input/select.html.twig
@@ -0,0 +1,10 @@
+{# @copyright   Copyright (C) 2010-2020 Combodo SARL #}
+{# @license     http://opensource.org/licenses/AGPL-3.0 #}
+{% extends "components/input/inputwithLabel.html.twig" %}
+{% block iboInput %}
+    <select id="{{ oUIBlock.GetId() }}" name="{{ oUIBlock.GetName() }}">
+        {% for oSubBlock in oUIBlock.GetSubBlocks() %}
+            {{ render_block(oSubBlock, {aPage: aPage}) }}
+        {% endfor %}
+    </select>
+{% endblock %}
--- a/templates/components/input/selectoption.html.twig
+++ b/templates/components/input/selectoption.html.twig
@@ -0,0 +1,3 @@
+{# @copyright   Copyright (C) 2010-2020 Combodo SARL #}
+{# @license     http://opensource.org/licenses/AGPL-3.0 #}
+<option id="{{ oUIBlock.GetId() }}" value="{{ oUIBlock.GetValue() }}" {% if oUIBlock.IsSelected() %}selected{% endif %}>{{ oUIBlock.GetLabel() }}</option>