Phalcon，表单和html结构

Question

我正在使用 Phalcon 生成表单，出于某些 html 结构和响应原因，我需要将表单生成分为两部分，“桌面”部分和“移动部分”使用引导响应类

{{ 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，但在我的控制器中我必须复制我的“getPost 函数”

你有什么建议吗？

Answer 1

我的观点是，为桌面/移动设备重复内容是个坏主意。几个原因：

• 可访问性；
• 代码臃肿；
• 当你注意到自己时，你让你的生活变得更加艰难:)
• 搜索引擎优化...

你应该瞄准什么？每个输入只有 1 个，不需要 JavaScript，除了客户端验证和 ajax 发送:) 处理 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 %}

Answer 2

好的，我找到了解决方案，我就用手机，效果很好，结构很相似