Django未绑定Model的Form表单在HTML模板中无法渲染排查

直接在模板中写{{ form }}时，Django默认会调用form.as_table()方法渲染表单项，输出内容全部由<tr>表格行标签包裹。这类标签必须嵌套在<table>父标签内才符合HTML规范，否则浏览器会自动过滤掉这部分不符合嵌套规则的DOM节点，最终页面只会显示表单内写死的提交按钮，看不到输入控件。

任选以下一种方式修改即可：

• 方式1：保留默认table渲染逻辑，给表单套上table标签，同时补上POST表单必需的{% csrf_token %}（否则提交会报403权限错误），表单部分代码修改为：

<form method="post" action="/home/">
    {% csrf_token %}
    <table>
        {{ form }}
    </table>
    <button type="submit" name="search">
        Get rank
    </button>
</form>

• 方式2：改用段落格式渲染表单，将{{ form }}替换为{{ form.as_p }}，这种方式输出的表单项由<p>标签包裹，不需要额外嵌套父标签：

<form method="post" action="/home/">
    {% csrf_token %}
    {{ form.as_p }}
    <button type="submit" name="search">
        Get rank
    </button>
</form>

• 方式3：改用无序列表格式渲染，将{{ form }}替换为{{ form.as_ul }}，外层套上<ul>标签即可。

1. HTML语法不规范
   • base.html缺少根<html>标签，包裹content块的div标签属性之间多了多余的逗号，可能触发浏览器怪异渲染模式，修正后base.html代码：

   <!DOCTYPE html>
   <html>
   <head>
       <title>Blue's Valorant Ranked Checker</title>
   </head>
   <body>
       <div id="content" name="content">
           {% block content %}
           {% endblock %}
       </div>
   </body>
   </html>
   

   • home.html中提交按钮的type属性后多了多余逗号，删掉即可。
2. 视图代码冗余与逻辑问题
   • 顶部from urllib import response是无用冗余代码，可以直接删除；视图函数第一个参数约定命名为request，命名为response容易和响应对象混淆，虽然不影响运行但可读性差。
   • 当前home视图不区分GET/POST请求，打开页面就会硬编码调用第三方接口查询固定账号的数据，后续要对接用户输入的话，需要判断请求方法：POST请求时将提交数据绑定到表单，校验通过后再拿用户输入的账号参数调用接口，避免无效请求。
   • 模板中写了{{ mmr }}变量，但视图没有传入对应值，会显示为空，后续对接接口返回数据后补上即可。
3. 接口异常兼容：当前代码直接取接口返回的puuid字段，如果接口请求失败、Key过期或者返回格式不对，会直接抛500错误导致页面无法渲染，建议加上异常捕获和错误提示。

该场景是根据用户输入的账号标签查询对应数据，不会修改服务端任何存储内容，完全适合用GET请求：

• GET请求不需要加csrf_token，参数会拼接在URL上，用户可以直接收藏查询结果页
• 只有涉及数据新增、修改、删除的敏感操作，才必须使用POST请求
  如果改用GET方法，只需要把表单的method属性改成get，视图中从request.GET中获取用户提交的参数即可。

内容的提问来源于stack exchange，提问作者Blue