一些很有用的资源
- 很详细的介绍了GET和POST的区别的知乎回答: GET 和 POST 到底有什么区别-大宽宽
- MDN的 HTML表单指南-中文, Web forms — Working with user data-English
- 对于form的设计和用户体验问题, 这篇文章很不错 An Extensive Guide To Web Form Usability, 比如"Forms should never consist of more than one column."
tips
- 正确设置标签(\<label for="[the id of input]">[Lable]:\</label>)的另一个好处是可以在所有浏览器中单击标签来激活相应的小部件(element)
- \<input> autofocus 属性, 页面加载时元素自动具有输入焦点
- \<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>
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) }}
<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