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() }} 

问题是，当我试图把我的形式，有一些问题的名和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 
} 

但datepicker，复选框或单选按钮仍然存在问题。

所以，我看到两个型动物的解决方案：

第一：只有一个世代的形式，但在桌面和移动形式的结构是完全不同的，所以它是非常困难的，但也许有一些HTML/css技巧，我不知道？

二：更改名称和所有的移动输入的ID，但在我的控制器我不得不重复我的“的getPost功能”

你有什么建议吗？

Answer 1

好吧，我找到一个解决方案，我将只使用手机之一，它工作得很好，结构非常相似

Answer 2

我的观点是具有桌面/移动重复的内容是一个坏主意。一些原因：

• 无障碍;
• 代码臃肿;
• 你让你的生活更难，因为你注意到自己:)
• SEO ...

，你应着眼于什么？除了客户端验证和ajax发送之外，每个输入只有1个，并且不需要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' 
     ], 
    ]; 

再次，请注意，这是我个人的“除了”到尔康的形式（它没有内置）。

为了您的形式，它应该是这个样子：

{% 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 %}