PHP: 创建单选按钮?
PHP: Radio button creation?
我正在使用 cakephp 3 制作搜索表单,我必须使用单选按钮。
我不知道如何用 php 制作它们。这是我目前所拥有的:
input[type=radio] + label:before {
display: inline-block;
vertical-align: middle;
margin: -2px 8px 0 0;
height: 23px;
width: 23px;
border-radius: 50%;
border: 2px solid #777;
background-color: #fff;
background-clip: padding-box;
content: "";
transition: box-shadow .01s .39s ease-in-out, background .4s ease-in-out;
}
input[type=radio]:checked + label:before {
box-shadow: inset 0 0 0 2px #fff;
border: solid #F44336;
background-color: #F44336;
transition: background .4s ease-in-out;
}
<div class="col-sm-3 text-center">
<input type="radio" name="radio" id="radio1" value="1">
<label for="radio1">Product Shots</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" name="radio" id="radio3" value="3">
<label for="radio3">Video</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" name="radio" id="radio2" value="2">
<label for="radio2">Printing Materials</label>
</div>
标签旁边的单选按钮没有出现:
<div class="col-sm-3 text-center">
<?= $this->Form->input('multimedia_type_id', ['type' => 'radio',
'name' => 'radio',
'label' => false,
'options' => $multimediaTypes
]); ?>
</div>
在 CAKEPHP3 中创建单选按钮,
语法是:
Cake\View\Helper\FormHelper::radio(string $fieldName, array $options, array $attributes)
value
- 表示选中此单选按钮时的值。
label
- 指示是否为小部件添加标签的布尔值
应该显示。
hiddenField
- 布尔值,表示您是否希望 radio()
的结果包含值为“”的隐藏输入。这对于创建非连续的收音机很有用。
disabled
- 设置为 true 或 disabled 以禁用所有单选按钮。
empty
- 设置为 true 以创建值为“”的输入作为第一个选项。当为真时,单选标签将为“empty
”。将此选项设置为字符串以控制标签值。
通常 $options 是一个简单的键 => 值对。但是,如果您需要将自定义属性放在单选按钮上,您可以使用扩展格式:
echo $this->Form->radio(
'favorite_color',
[
['value' => 'r', 'text' => 'Red', 'style' => 'color:red;'],
['value' => 'u', 'text' => 'Blue', 'style' => 'color:blue;'],
['value' => 'g', 'text' => 'Green', 'style' => 'color:green;'],
]
);
// Will output
<input type="hidden" name="favorite_color" value="">
<label for="favorite-color-r">
<input type="radio" name="favorite_color" value="r" style="color:red;" id="favorite-color-r">
Red
</label>
<label for="favorite-color-u">
<input type="radio" name="favorite_color" value="u" style="color:blue;" id="favorite-color-u">
Blue
</label>
<label for="favorite-color-g">
<input type="radio" name="favorite_color" value="g" style="color:green;" id="favorite-color-g">
Green
</label>
更多详情:查看CakePHP3 documentation。
这个有效:
input[type=radio] + label:before {
display: inline-block;
vertical-align: middle;
margin: -2px 8px 0 0;
height: 23px;
width: 23px;
border-radius: 50%;
border: 2px solid #777;
background-color: #fff;
background-clip: padding-box;
content: "";
transition: box-shadow .01s .39s ease-in-out, background .4s ease-in-out;
}
input[type=radio]:checked + label:before {
box-shadow: inset 0 0 0 2px #fff;
border: solid #F44336;
background-color: #F44336;
transition: background .4s ease-in-out;
}
<div class="col-sm-3 text-center">
<input type="radio" id="1" name="multimedia_type_id" value="1"/>
<label for="1">Product Shots</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" id="2" name="multimedia_type_id" value="2"/>
<label for="2">Video</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" id="3" name="multimedia_type_id" value="3"/>
<label for="3">Printing Materials</label>
</div>
我正在使用 cakephp 3 制作搜索表单,我必须使用单选按钮。
我不知道如何用 php 制作它们。这是我目前所拥有的:
input[type=radio] + label:before {
display: inline-block;
vertical-align: middle;
margin: -2px 8px 0 0;
height: 23px;
width: 23px;
border-radius: 50%;
border: 2px solid #777;
background-color: #fff;
background-clip: padding-box;
content: "";
transition: box-shadow .01s .39s ease-in-out, background .4s ease-in-out;
}
input[type=radio]:checked + label:before {
box-shadow: inset 0 0 0 2px #fff;
border: solid #F44336;
background-color: #F44336;
transition: background .4s ease-in-out;
}
<div class="col-sm-3 text-center">
<input type="radio" name="radio" id="radio1" value="1">
<label for="radio1">Product Shots</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" name="radio" id="radio3" value="3">
<label for="radio3">Video</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" name="radio" id="radio2" value="2">
<label for="radio2">Printing Materials</label>
</div>
标签旁边的单选按钮没有出现:
<div class="col-sm-3 text-center">
<?= $this->Form->input('multimedia_type_id', ['type' => 'radio',
'name' => 'radio',
'label' => false,
'options' => $multimediaTypes
]); ?>
</div>
在 CAKEPHP3 中创建单选按钮,
语法是:
Cake\View\Helper\FormHelper::radio(string $fieldName, array $options, array $attributes)
value
- 表示选中此单选按钮时的值。label
- 指示是否为小部件添加标签的布尔值 应该显示。hiddenField
- 布尔值,表示您是否希望radio()
的结果包含值为“”的隐藏输入。这对于创建非连续的收音机很有用。disabled
- 设置为 true 或 disabled 以禁用所有单选按钮。empty
- 设置为 true 以创建值为“”的输入作为第一个选项。当为真时,单选标签将为“empty
”。将此选项设置为字符串以控制标签值。
通常 $options 是一个简单的键 => 值对。但是,如果您需要将自定义属性放在单选按钮上,您可以使用扩展格式:
echo $this->Form->radio(
'favorite_color',
[
['value' => 'r', 'text' => 'Red', 'style' => 'color:red;'],
['value' => 'u', 'text' => 'Blue', 'style' => 'color:blue;'],
['value' => 'g', 'text' => 'Green', 'style' => 'color:green;'],
]
);
// Will output
<input type="hidden" name="favorite_color" value="">
<label for="favorite-color-r">
<input type="radio" name="favorite_color" value="r" style="color:red;" id="favorite-color-r">
Red
</label>
<label for="favorite-color-u">
<input type="radio" name="favorite_color" value="u" style="color:blue;" id="favorite-color-u">
Blue
</label>
<label for="favorite-color-g">
<input type="radio" name="favorite_color" value="g" style="color:green;" id="favorite-color-g">
Green
</label>
更多详情:查看CakePHP3 documentation。
这个有效:
input[type=radio] + label:before {
display: inline-block;
vertical-align: middle;
margin: -2px 8px 0 0;
height: 23px;
width: 23px;
border-radius: 50%;
border: 2px solid #777;
background-color: #fff;
background-clip: padding-box;
content: "";
transition: box-shadow .01s .39s ease-in-out, background .4s ease-in-out;
}
input[type=radio]:checked + label:before {
box-shadow: inset 0 0 0 2px #fff;
border: solid #F44336;
background-color: #F44336;
transition: background .4s ease-in-out;
}
<div class="col-sm-3 text-center">
<input type="radio" id="1" name="multimedia_type_id" value="1"/>
<label for="1">Product Shots</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" id="2" name="multimedia_type_id" value="2"/>
<label for="2">Video</label>
</div>
<div class="col-sm-3 text-center">
<input type="radio" id="3" name="multimedia_type_id" value="3"/>
<label for="3">Printing Materials</label>
</div>