在工作中常用的几个form
aligned-form & select
handler代码 handlers/form.py
class MainHandler(tornado.web.RequestHandler):
def get(self):
# 表单模板测试
self.render("form.html")
def post(self):
print self.request.arguments
print self.get_argument("cb", "xx")template模板 templates/form.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 pure form</title>
<link rel="stylesheet" href="/static/css/pure/forms.css" />
</head>
<body>
<form class="pure-form pure-form-aligned" method="post">
<fieldset>
<div class="pure-control-group">
<label for="name">Username</label>
<input id="name" name="name" type="text" placeholder="Username">
</div>
<div class="pure-control-group">
<label for="password">Password</label>
<input id="password" name="password" type="password" placeholder="Password">
</div>
<div class="pure-control-group">
<label for="email">Email Address</label>
<input id="email" name="email" type="email" placeholder="Email Address">
</div>
<div class="pure-control-group">
<label for="foo">Extra Label</label>
<input id="foo" name="foo" type="text" placeholder="Enter something here...">
</div>
<div class="pure-control-group">
<label for="state">State</label>
<select id="state" name="state">
<option>AL</option>
<option>CA</option>
<option>IL</option>
</select>
</div>
<div class="pure-controls">
<label for="cb" class="pure-checkbox">
<input id="cb" name="cb" type="checkbox"> I've read the terms and conditions
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</div>
</fieldset>
</form>
</body>
</html> 注: 必须有name字段, tornado通过name识别参数的
效果图
checkbox & radio
handler代码 handlers/form2.py
class MainHandler(tornado.web.RequestHandler):
def get(self):
# 表单模板测试
self.render("form.html")
def post(self):
print self.request.arguments
print self.get_argument("cb", "xx")template模板 templates/form2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 pure form</title>
<link rel="stylesheet" href="/static/css/pure/forms.css" />
</head>
<body>
<form class="pure-form" method="post">
<label for="option-one" class="pure-checkbox">
<input id="option-one" name="cb" type="checkbox" value="cb1">
Here's option one.
</label>
<label for="option-two" class="pure-radio">
<input id="option-two" type="radio" name="optionsRadios" value="rd1" checked>
Here's a radio button. You can choose this one..
</label>
<label for="option-three" class="pure-radio">
<input id="option-three" type="radio" name="optionsRadios" value="rd2">
..Or this one!
</label>
<button type="submit" class="pure-button pure-button-primary">Submit</button>
</form>
</body>
</html> 注: radio box如果要互斥,name必须一致
效果图
来源：oschina
链接：https://my.oschina.net/u/1047802/blog/195432