我正在使用 Phalcon 生成表单，出于某些 html 结构和响应原因，我需要将表单生成分为两部分，“桌面”部分和“移动部分”使用 Bootstrap 响应类
{{ form(form.getAction(), 'method': 'post', 'role': 'form','id' : 'criteres','class' : 'row center-block fond_partie not_middle_lg','style' : 'max-width : 1064px', 'action' : '/propal/recherche') }}
<div class="row hidden-sm hidden-md visible-lg hidden-xs" id="large">
{% for element in form %}
<?php if (is_a($element, 'Forms\Element\Datepicker')) { ?>
{{ element }}
<?php } else if (is_a($element, '\Phalcon\Forms\Element\Radio')) { ?>
<div class="form-group col-xs-12 ">
<?php if ($element->getAttribute('titre')) { ?>
<label class="bold">{{ element.getAttribute('titre') }}</label>
<?php } ?>
<div class="form-check">
<label><input type="radio" class="form-check-input" value="{{ element.getAttribute('value') }}" name="{{ element.getAttribute('name') }}">{{ element.getName() }}</label>
</div>
</div>
<?php } else if (is_a($element, '\Phalcon\Forms\Element\Check')) { ?>
<?php if ($element->getAttribute('titre')) { ?>
<div class="form-group col-md-12 col-lg-12 col-xs-6">
<?php } else { ?>
<div class="form-group col-md-12 col-lg-12 col-xs-6">
<?php } ?>
<?php if ($element->getAttribute('titre')) { ?>
<label class="bold" >{{ element.getAttribute('titre') }}</label><br>
<?php } ?>
{{ element.render() }}
{{ element.label(['class': 'control-label']) }}
</div>
<?php } else { ?>
<div class="form-group col-xs-3 col-lg-12">
{{ element.label(['class': 'control-label bold']) }}
{{ element.render(['class': 'form-control']) }}
</div>
<?php } ?>
{% endfor %}
</div>
<div class="row visible-xs visible-sm visible-md hidden-lg" style="margin-bottom: 45px" id="small">
{% for element in form %}
{% if loop.index == 1 %}
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12" style="margin-bottom: 10px">
{{ element.label(['class': 'control-label bold']) }}
{{ element.render(['class': 'form-control']) }}
</div>
{% elseif loop.index == 2 %}
{{ element }}
{% elseif loop.index == 3 %}
<div class="col-xs-12" style="margin-top: 10px">
{{ element.label(['class': 'control-label bold']) }}
{{ element.render(['class': 'form-control']) }}
</div>
{% elseif loop.index == 4 %}
<div class="col-xs-12" style="margin-top: 10px">
{{ element.label(['class': 'control-label bold']) }}
{{ element.render(['class': 'form-control']) }}
</div>
</div>
</div>
{% elseif loop.index == 5 %}
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12">
{{ element.label(['class': 'control-label bold']) }}
{{ element.render(['class': 'form-control']) }}
</div>
{% elseif loop.index == 6 %}
<div class="col-xs-12" style="margin-top: 10px">
{{ element.label(['class': 'control-label bold']) }}
{{ element.render(['class': 'form-control']) }}
</div>
{% elseif loop.index == 7 %}
<div class="col-xs-12" style="margin-top: 10px">
{{ element.label(['class': 'control-label bold']) }}
{{ element.render(['class': 'form-control']) }}
</div>
</div>
</div>
{% elseif loop.index == 8 %}
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12">
<?php if ($element->getAttribute('titre')) { ?>
<label class="bold">{{ element.getAttribute('titre') }}</label>
<?php } ?>
<div class="form-check" style="margin: 10px 0">
<label><input type="radio" class="form-check-input" value="{{ element.getAttribute('value') }}" name="{{ element.getAttribute('name') }}">{{ element.getName() }}</label>
</div>
</div>
{% elseif loop.index == 9 %}
<div class="col-xs-12" style="margin: 10px 0">
<label><input type="radio" class="form-check-input" value="{{ element.getAttribute('value') }}" name="{{ element.getAttribute('name') }}">{{ element.getName() }}</label>
</div>
{% elseif loop.index == 10 %}
<div class="col-xs-12" style="margin: 10px 0">
<label><input type="radio" class="form-check-input" value="{{ element.getAttribute('value') }}" name="{{ element.getAttribute('name') }}">{{ element.getName() }}</label>
</div>
</div>
</div>
{% elseif loop.index == 11 %}
<div class="col-xs-3">
<div class="row">
<div class="col-xs-12">
<?php if ($element->getAttribute('titre')) { ?>
<label class="bold" >{{ element.getAttribute('titre') }}</label><br>
<?php } ?>
{{ element.render() }}
{{ element.label(['class': 'control-label']) }}
</div>
{% elseif loop.index > 10 %}
<div class="col-xs-12">
{{ element.render() }}
{{ element.label(['class': 'control-label']) }}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
<i class="fa fa-caret-right" aria-hidden="true"></i>
{{ submit_button("Lancer la recherche", "class": "btn btn-research") }}
{{ end_form() }}
问题是当我尝试发送我的表单时，names 和 ids 的重复出现了一些问题，所以我尝试了一些 javascript
if ($(window).width() >= 1183) {
console.log("more");
$("#small :input").attr('disabled', 'disabled'); //Disable
$("#large :input").removeAttr('disabled'); //Enable
// the width of browser is more then 1200px
} else {
console.log("less");
$("#small :input").removeAttr('disabled'); //Disable
$("#large :input").attr('disabled', 'disabled'); //Enable
// the width of browser is less then 1200px
}
但日期选择器、复选框或单选按钮仍然存在问题。
所以我看到了两种不同的解决方案:
第一: 只有一代表单，但在桌面和移动设备中，表单的结构完全不同，因此非常困难，但也许有一些我不知道的 html/css 技巧不知道？
第二:更改所有移动输入的名称和 ID，但在我的 Controller 中我必须复制我的“getPost 函数”
你有什么建议吗？
最佳答案
我的观点是，为桌面/移动设备提供重复的内容不是一个好主意。几个原因:
- 可访问性；
- 代码臃肿；
- 当您注意到自己时，您的生活会变得更加艰难 :)
- 搜索引擎优化...
你的目标是什么？每个输入只有 1 个，除了客户端验证和 ajax 发送之外不需要 JavaScript :) 处理 CSS 媒体查询中的所有响应式内容，如果您确实需要在屏幕上移动某些内容，则可能需要少量的 JavaScript。
我通常为扩展基本表单类的每个表单都有一个配置类。在该配置文件中，我正在设置验证规则和其他元素特定选项。 一个简单的例子:
class ProfileRegistration extends BaseForm
{
private $_fields = [
'names' => [
'type' => 'text',
'validation' => 'required',
'width' => '...'
],
'email' => [
'type' => 'email',
'validation' => 'required',
'width' => '...'
],
'password' => [
'type' => 'password',
'validation' => 'required|min[5]'
'width' => '...'
],
'newsletter' => [
'type' => 'checkbox',
'width' => '...'
],
'agree' => [
'type' => 'checkbox',
'validation' => 'required',
'attributes' => [
'value' => 'default value'
]
],
'recaptcha' => [
'type' => 'recaptcha'
],
];
再次请注意，这是我个人对 Phalcon 表单的“添加”(它不是内置的)。
对于您的表单，它应该看起来像这样:
{% for element in form %}
<div class="form-group {{ element.width|default('col-md-12 col-lg-12 col-xs-6') }}">
{{ element.label(...) }}
{{ element.render(...) }}
{{ element.messages(...) }}
</div>
{% endfor %}
关于html - Phalcon、表单和 html 结构，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45033318/