zoukankan      html  css  js  c++  java
  • form在模版中的渲 染方式

    链接:https://www.jianshu.com/p/46b2aa2d5a23

    form.as_p

    渲染表单为一系列的p标签,每个p标签包含一个字段:

    <p>
    
       <label for="id_subject">Subject:</label>
    
       <input id="id_subject" type="text" name="subject" maxlength="100" />
    
    </p>

    form.as_ul

    渲染表单为一系列的li标签,每个li 标签包含一个字段,它不包含ul标签:

    <li>
    
      <label for="id_subject">Subject:</label>
    
      <input id="id_subject" type="text" name="subject" maxlength="100" />
    
    </li>

    form.as_table

    输出表单为一个HTML的table:

    <tr>
    
      <th>
    
       <label for="id_subject">Subject:</label>
    
      </th>
    
      <td>
    
        <input id="id_subject" type="text" name="subject" maxlength="100" />
    
      </td>
    
    </tr>

    for field in form

    通过迭代form,获取其中的所有field。field可引用的包括{{ field.label_tag }} , {{ field }} , {{ field.errors }} :

     

     {% for field in form %}
    
      <div class="form-group">    
    
          {{ field.label_tag }}        
    
         <div class="">
    
            {{ field }}
    
         </div>
    
         {{ field.errors }}
    
      </div>

     {% endfor %}

    • field.label_tag
      {{ field.label_tag }}输出为field的label元素:
      <label for="id_message">Message:</label>
    • field
      {{ field }}输出为field的input
      <input type="text" name="message" id="id_message" />
    • field.errors
      {{ field.errors }}field的errors元素(errors一般在form验证出错的时候显示)
      ['This field is required.']

    form.fieldname

    直接将form作为一个dict,引用其每一个field,比如 {{ form.title }} 引用form中的title这个field:

    <div class="form-group">
    
       <label class="control-label">
    
           {{ form.title.label_tag }}   
    
       </label>
    
       <div class="">
    
           {{ form.title }}
    
       </div>
    
       {{ form.title.errors }}
    
    </div>

    这种方式一般用于form需要更加精准的样式的时候,逐个元素逐个元素的编排到html中。

  • 相关阅读:
    86. 分隔链表
    85. 最大矩形
    84. 柱状图中最大的矩形
    82. 删除排序链表中的重复元素 II
    80. 删除排序数组中的重复项 II
    77. 组合
    java-xml
    java-反射
    springboot解决跨域问题(CorsConfig )
    解决oracle锁表
  • 原文地址:https://www.cnblogs.com/fyc001/p/9192503.html
Copyright © 2011-2022 走看看