README

俄语版本

生成带有附加标签的HTML表单字段

此类是一个包装类，用于 HTMLinputGenerator。它解决了两个重要问题

1. 通过使用数组中的名称来查找字段值。此数组可以存储，例如，正在编辑的某些实体的数据或HTTP查询的参数。

2. 生成附加的HTML标签。 HTMLinputGenerator 总是生成单个HTML元素，而在某些情况下，将字段作为更复杂的结构会更方便。这些情况是

   • <input type="checkbox/radio"> 包裹在 <label>
   • 具有相同 name 的 <input type="checkbox/radio"> 组
   • 当 <input type="checkbox"> 未选中时，显式值

安装

composer require one234ru/form-inputs-generator

使用方法

要获取HTML代码，您需要基于配置和数据数组创建一个对象，然后将其转换为字符串。

配置是 扩展 的 HTMLinputGenerator 配置，通常产生相同的HTML

$config = [
    'type' => 'text',
    'name' => 'something',
];
$obj_1 = new One234ru\HTMLinputGenerator($config, $_GET['something'] ?? '');
$obj_2 = new One234ru\FormInputsGenerator($config, $_GET); 
var_dump( strval($obj_1) === strval($obj_2) ); // true

仅在配置中存在某些键时，才会激活特殊模式。 所有此类情况均列于下文。

将 <input type = "checkbox/radio"> 包裹在 <label>

CSS对于复选框和单选按钮的能力非常有限，通常不足以获得所需的外观。
解决方案是将字段包裹在 <label> 标签中，隐藏字段本身，并将描述添加到其后，包裹在带有背景图的 <span> 或 <div> 中。该图像作为字段的视觉等效物（CSS允许根据字段是否选中调整样式；请参见pseudocheckbox.html中的示例）。

此外，将文本包裹在 <label> 中使其可点击以选中/取消选中字段，从而提高用户体验。

所有这些都导致以下结构

<label>
	<input type="checkbox" name="something" value="1">
	<span>Something</span>
</label>

此结构很容易获得 - 只需将 label 元素添加到配置中

$config = [
	'type' => 'checkbox',
	'name' => 'something',
	'value' => 1,
	'label' => 'Something'
];

通过传递作为 label 的数组进行微调

[
	...
	'label' => [
		'attr' => [
			'class' => 'label-for-something',
		],
		'text_wrapper' => [
			'tag' => 'div',
			'attr' => [
				'class' => 'text-for-something'
			],
		],
		'text' => '<b>Something</b>',
	]
]

结果（格式化以提高可读性）

<label class="label-for-something">
	<input type="checkbox" name="something" value="1">
	<div class="text-for-something">
		<b>Something</b>
	</div>
</label>

以下两个配置产生相同的结果

	'label' => 'Something'

	'label' => [
		'text' => 'Something'
	]

相同的技巧也适用于 <input type="radio">。

对于除 'checkbox' 或 'radio' 之外的其他 type，指定 label 不会产生任何影响。

具有相同 name 的 <input type="checkbox/radio"> 组

通过 value 参数打开组生成模式

$config = [
	'type' => 'radio',
	'name' => 'something',
	'values' => [
		1 => 'One', 
		[
			'value' => 2,
			'label' => 'Two', 
		],
		[
			'value' => 3,
			'label' => [
				'attr' => [
					'class' => 'special-label',
				],
				'text' => 'Three', 
			],
		],
		[
			'value' => 4,
		]
	]
];

结果（格式化以提高可读性）

<label>
	<input type="radio" name="something" value="1">
	<span>One</span>
</label>
<label>
	<input type="radio" name="something" value="2">
	<span>Two</span>
</label>
<label class="special-label">
	<input type="radio" name="something" value="3">
	<span>Three</span>
</label>
<input type="radio" name="something" value="4">

除了最后一个字段外，所有字段都包裹在 <label> 中。 label 数组中每个元素的键与上述单个字段的情况具有相同的效果。

第一个字段的配置是一个键值对 - 1 => 'One'。这相当于以下数组

[
	'value' => 1,
	'label' => 'One'
]

第四个字段没有任何包装。这可以通过指定没有 label 属性的配置数组来实现。

标准键（如 attr 和 label）可以指定在顶层 - 它们将被所有 values 成员继承，并且可以针对每个特定的成员重新定义

$config = [
	'type' => 'radio',
	'name' => 'something',
	'attr' => [
		'class' => 'standard-input',
	],
	'label' => [
		'attr' => [
			'class' => 'standard-label',
		],
	], 
	'values' => [
		1 => 'One', 
		[
			'value' => 2,
			'label' => 'Two', 
		],
		[
			'value' => 3,
			'label' => [
				'attr' => [
					'class' => 'special-label', // Will override top-level value
				],
				'text' => 'Three', 
			],
		],
		[
			'attr' => [
				'class' => 'special-input', // Will override top-level value
			],
			'value' => 4,
		]
	]
];

<label class="standard-label">
	<input type="radio" name="something" value="1" class="standard-input">
	<span>One</span>
</label>
<label class="standard-label">
	<input type="radio" name="something" value="2" class="standard-input">
	<span>Two</span>
</label>
<label class="special-label">
	<input type="radio" name="something" value="3" class="standard-input">
	<span>Three</span>
</label>
<input type="radio" name="something" value="4" class="special-input">

在 type="checkbox" 的情况下，向 name 属性的值追加空方括号

$config = [
	'type' => 'checkbox',
	'name' => 'something',
	'values' => ...
];

<label>
	<input type="checkbox" name="something[]" value="1">
	<span>One</span>
</label>
<label>
	<input type="checkbox" name="something[]" value="2">
	<span>Two</span>
</label>
<label class="special-label">
	<input type="checkbox" name="something[]" value="3">
	<span>Three</span>
</label>
<input type="checkbox" name="something[]" value="4">

对于除 'checkbox' 或 'radio' 之外的其他任何 type，忽略 values 参数。

当 <input type="checkbox"> 未选中时，显式值

复选框仅在选中时影响HTTP查询。否则，对应的关键字将不存在，接收方需要做出“如果没有明确的‘是’——将其视为‘否’”等建议。

将“否”以显式形式呈现可能更为方便。这可以通过以下技巧实现：复选框前面添加一个隐藏字段，其name和与“否”变体对应的value相同。

<input type="hidden" name="something" value="0">
<input type="checkbox" name="something" value="1">

如果复选框被选中，其值将覆盖查询中隐藏字段的值。

通过off_value参数开启生成此类隐藏字段，该参数包含实际值。上面示例中的HTML代码对应以下配置

[
	'type' => 'checkbox',
	'name' => 'something',
	'value' => 1,
	'off_value' => 0
]

off_value与label和其他标准参数一起使用效果良好

[
	'type' => 'checkbox',
	'name' => 'something',
	'value' => 1,
	'off_value' => 0,
	'label' => 'Something', 
	'attr' => [
		'class' => 'some-class',
	]
]

<label>
	<input type="hidden" name="something" value="0">
	<input type="checkbox" name="something" value="1" class="some-class">
	<span>Something</span>
</label>

如果type不等于'checkbox'，则off_value没有作用。