log in
register

Web Form learning

Qingqi@2020-08-04 #tech

一些很有用的资源

  1. 很详细的介绍了GET和POST的区别的知乎回答: GET 和 POST 到底有什么区别-大宽宽
  2. MDN的 HTML表单指南-中文, Web forms — Working with user data-English
  3. 对于form的设计和用户体验问题, 这篇文章很不错 An Extensive Guide To Web Form Usability, 比如"Forms should never consist of more than one column."

tips

  1. 正确设置标签(\<label for="[the id of input]">[Lable]:\</label>)的另一个好处是可以在所有浏览器中单击标签来激活相应的小部件(element)
  2. \<input> autofocus 属性, 页面加载时元素自动具有输入焦点
  3. \<input type="hidden">可用于不需要用户看见的数据上传

example html code with PrimerCSS

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="primer.css" rel="stylesheet" />
</head>
<body>

<div class="container-lg d-flex flex-row mb-3 pb-6">
  <div class="col-12 mt-6 ml-6 mr-6 mb-6 pt-3 pl-3 pr-3 pb-3 box">
    <form action="#" method="post">
      <fieldset>
        <legend class="mb-3 h1">an example form</legend>
        <!-- table is not recommended -->
        <table>
          <tr>
            <td>
              <label class="mr-3" for="name">Name</label>
            </td>
            <td>
              <input class="form-control input-lg mb-3" type="text" id="name" name="name" size="32" autofocus>
            </td>
          </tr>
          <tr>
            <td>
              <label class="mr-3" for="mail">E-mail</label>
            </td>
            <td>
              <input class="form-control input-lg mb-3" type="email" id="mail" name="mail" size="32">
            </td>
          </tr>
          <tr>
            <td>
              <label class="mr-3" for="pwd">Password</label>
            </td>
            <td>
              <input class="form-control input-lg mb-3" type="password" id="pwd" name="pwd" size="32">
            </td>
          </tr>
          <tr>
            <td>
              <label class="mr-3" for="msg">Msg</label>
            </td>
            <td>
              <textarea class="form-control input-monospace mb-3" id="msg" name="msg" cols="30" rows="4">default  element</textarea>
            </td>
          </tr>
        </table>
        <div class="button">
          <button class="btn" type="submit">Send the information</button>
        </div>
      </fieldset>
    </form>
  </div>
  <div class="col-12 mt-6 ml-6 mr-6 mb-6 pt-3 pl-3 pr-3 pb-3 box">
    <form action="#" method="post">
      <fieldset>
        <legend class="mb-3 h1">an example form</legend>
        <div class="mb-3 d-flex flex-row flex-items-center">
          <label class="mr-3 col-1" for="fruit">fruit</label>
          <select class="form-select" id="fruit" name="fruit">
            <option>Banana</option>
            <option>Cherry</option>
            <option>Lemon</option>
          </select>
        </div>
        <div class="mb-3 d-flex flex-row flex-items-center">
          <label class="mr-3 col-1" for="water">water</label>
          <input type="checkbox" id="water" name="water" value="water">
        </div>
        <div class="mb-3 d-flex flex-row flex-items-center">
          <span class="text-bold mr-3 col-1">meal</span>
          <label for="soup">Soup</label>
          <input class="mr-2" type="radio" id="soup" name="meal" value="soup">
          <label for="curry">Curry</label>
          <input class="mr-2" type="radio" id="curry" name="meal" value="curry">
          <label for="pizza">Pizza</label>
          <input class="mr-2" type="radio" id="pizza" name="meal" value="pizza">
        </div>
        <div class="mb-3 d-flex flex-row flex-items-center">
          <label class="mr-3 col-1" for="file">file</label>
          <input type="file" name="file" id="file" accept=".txt">
        </div>
        <div>
          <input type="hidden" id="hidden1" name="hidden1" value="yes">
        </div>
        <div class="button mb-3">
          <button class="btn" type="submit">Send the information</button>
        </div>
        <div class="button">
          <button class="btn" type="reset">Reset the information</button>
        </div>
      </fieldset>
    </form>
  </div>
</div>

</body>
</html>

how this html looks like

use flask for web form

  • Without any configuration, the FlaskForm will be a session secure form with csrf protection
  • Use Flask-Bootstrap to auto complete
{% import "bootstrap/wtf.html" as wtf %}
{{ wtf.quick_form(form) }}
  • or use
<form method="POST">
 {{ form.hidden_tag() }}
 {{ form.name.label }} {{ form.name(id='my-text-field') }}
 {{ form.submit() }}
</form>
  • form.hidden_tag() used by Flask-WTF to implement CSRF protection
  • can give the field id or class attributes
Comments

Log in to add your comment

Don't have an account? register here