web表单

矫情吗；* 2022-06-03 00:09 178阅读 0赞

1.表单介绍

表单通常用来收集网页访问者信息，常见的表单比如搜索引擎的搜索框、各网页应用的注册或者登陆界面等。一个表单通常包括多个表单控件，一些常用的表单控件如下：

添加文本控件：单行文本框、密码框、多行文本框（文本域）

选择控件：单选按钮、复选框、下拉列表

上传文件控件

提交表单控件：提交按钮、图像按钮

html5还加入了日期控件、电子邮件和URL输入控件、搜索输入控件。

下表列出了一些表单控件的元素以及部分属性，元素属性中name和对应的数据会成对地发到服务器，所以大部分控件需要设置name属性。

<table>  表单控件  
 <tbody> 
  <tr> 
   <td>控件名字</td> 
   <td>元素</td> 
   <td>部分元素元素特性</td> 
  </tr> 
  <tr> 
   <td>单行文本框</td> 
   <td>&lt;input type="text"&gt;</td> 
   <td>name,maxlength</td> 
  </tr> 
  <tr> 
   <td>密码框</td> 
   <td>&lt;input type="password"&gt;</td> 
   <td>name,size,maxlength</td> 
  </tr> 
  <tr> 
   <td>文本域</td> 
   <td>&lt;textarea&gt;</td> 
   <td>name</td> 
  </tr> 
  <tr> 
   <td>单选按钮</td> 
   <td>&lt;input type=ratio&gt;</td> 
   <td>name,value(发送到服务器的值),checked(设置为checked表示加载时选定)</td> 
  </tr> 
  <tr> 
   <td>复选框</td> 
   <td>&lt;input "type"="checkbox"&gt;</td> 
   <td>name,value(发送到服务器的值),checked</td> 
  </tr> 
  <tr> 
   <td>下拉框</td> 
   <td>&lt;select&gt;内使用&lt;option&gt;来表示每一项</td> 
   <td>name</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&lt;option&gt;</td> 
   <td>value,selected(设置为selected表示默认选择)</td> 
  </tr> 
  <tr> 
   <td>多选框</td> 
   <td>&lt;select multiple='multiple'&gt;内使用&lt;option&gt;来表示每一项</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>文件上传域</td> 
   <td>&lt;input type="file"&gt;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>提交按钮</td> 
   <td>&lt;input type="submit"&gt;</td> 
   <td>name(非必要),value(按钮文本)</td> 
  </tr> 
  <tr> 
   <td>图像按钮</td> 
   <td>&lt;input type="image"&gt;</td> 
   <td>&nbsp;</td> 
  </tr> 
  <tr> 
   <td>html5日期控件</td> 
   <td>&lt;input type="date"&gt;</td> 
   <td>name</td> 
  </tr> 
  <tr> 
   <td>html5电子邮件</td> 
   <td>&lt;input type="email"&gt;</td> 
   <td>name</td> 
  </tr> 
  <tr> 
   <td>html5URL输入控件</td> 
   <td>&lt;input type="url"&gt;</td> 
   <td>name</td> 
  </tr> 
  <tr> 
   <td>html5搜索输入控件</td> 
   <td>&lt;input type="search'&gt;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

2.表单的工作原理

用户填写表单，然后单击一个按钮将所填信息提交到服务器，为了区分各类输入数据，表单的内容采用“名称/值”这样成对的格式。在Flask web服务端，可以使用request.form访问到用户提交的表单。服务器接收到表单内容，通常会再返回给浏览器一个页面。

3.表单结构

在服务器返回的html页面中，所有表单控件位于<form>元素中。比如可以构建一个包含一个文本输入框和提交按钮的表单：

hello.html

<!DOCTYPE html>
    
    <html>
      <head>
        <title>Hello</title>
        <meta name="charset" content="utf8"/>
      </head>
      
      <body>
        {% if name %}
    	  <h1>Hello,{
       {name}}</h1>
    	{% else %}
    	  <h1>Hello,Stranger!</h1>
    	{% endif %}
        <form actions="http://127.0.0.1:8000" method="post">
    	  <label>What your name?<input type="text" name="name" /></label>
    	  <input type="submit" value="提交">
    	</form>
      </body>
    </html>

<form>标签通常需要设置action特性和method特性，表示接收表单的URL以及方法。

同时在服务端脚本中获取该表单并显示出来：

#coding:utf-8
    
    from flask import Flask,request,render_template
    app=Flask(__name__)
    
    @app.route("/",methods=["POST","GET"])
    def index():
    	name=None
    	form=None
    	if request.method=="POST":
    		form=request.form
    		name=form["name"]
    	return render_template("hello.html",name=name)
    
    if __name__=="__main__":
    	app.run(debug=True,host="0.0.0.0",port=8000)

启动服务器后，访问页面填写表单后，会根据表单内容返回给用户新的页面，比如填写“小明”后提交：

![Center][]

可以使用CSS来调整表单表现，同时可以使用JS对输入数据进行表单验证，在浏览器就初步检查用户输入的表单数据是否符合要求，这比发送到服务器服务器再返回结果来得快。

4.一个包含各类表单控件的例子：

hello.html

<!DOCTYPE html>
    <html>
      <head>
        <title>Forms</title>
        <meta charset="utf8"/>
        <link rel="stylesheet" href="/static/css/style.css" type="text/css" />
      </head>
      
      <body>
        <form actions="http://127.0.0.1:8000" method="post">
          <fieldset>
            <legend>个人信息</legend>
            <div class="info">
              <label>姓名：<input type="text" name="name" size="30" maxlength="100" /></label>
              <br />
              <label>电子邮件：<input type="email" size="30" maxlength="100" name="email" /></label>
            </div>
            <div class="info">
              <label>性别：</labe>
              <label><input type="radio" name="sex" value="male">男</label>
              <label><input type="radio" name="sex" value="female">女</label>
            </div>
            <div class="info">
              <label for="age">年龄：</label>
              <select name="age" class="age">
                {% for age in range(100) %}
                  <option value="{
       {age+1}}">{
       {age+1}}</option>
                {% endfor %}
              </select>
            </div>
          </fieldset>
          <fieldset>
            <legend>一些问题</legend>
            <div class="ques">
              <span>你喜欢的运动是什么？</span>
              <br />
              <label><input type="checkbox" name="run" />跑步</label>
              <label><input type="checkbox" name="swim" />游泳</label>
              <br />
            </div>
            <div class="ques">
              <label for="comments">你有什么想说的吗？</label>
              <br />
              <textarea rows="5" cols="40" id="comments"></textarea>
             </div>
          </fieldset>
          <input id="submit" type="submit" value="提交">
        </form>
      </body>
    </html>

访问该页面可以看到一个丑陋的表单。通过CSS可以让它变得美观一些。把CSS放到static文件夹目录下，便于直接访问。

static/css/style.css:

input {
      font-size:120%;
      color:#5a5854;
      background-color:#f2f2f2;
      border:1px solid #bdbdbd;
      padding:5px 5px 5px 5px;
      margin-bottom:10px;
      border-radius:5px;
    }
    #submit {
      width:100px;
      height:45px;
      color:white;
      background-color:rgb(0,150,255);
    }
    #submit:focus {
      background-color:rgb(0,50,255)
    }
    input:focus,input:hover {
      background-color:#ffffff;
      border:1px solid #blele4;
    }
    select {
      border-radius:2px;
      border:1px solid #bdbdbd;
    }
    textarea {
      border-radius:5px;
      border:1px solid #bdbdbd;
    }
    fieldset {
    	width:90%;
    	border:1px inset rgb(0,150,255);
    	border-radius:5px;
    	padding:10px;
    	margin:10px;
    }
    legend {
    	background-color:#efeefef;
    	border:1px solid  rgb(0,170,255);
    	padding:5px 10px;
    	text-align:left;
    	border-radius:5px;
    }
    div {
    	float:left;
    	text-align:right;
    	clear:left;
    	margin:5px;
    	padding:5px;
    }
    div.ques {
    	text-align:left;
    }

访问页面可以看到一个简单的表单界面：

![SouthEast][]

这是一个简单的表单示例，自己实现了表单以及样式控制，提交表单后表单可以通过Flask的请求对象request获取表单数据从而处理表单。

但是在Flask中更方便的方法是使用Flask-WTF扩展，可以便捷地处理表单，Flask-WTF在下一篇博客介绍。

[Center]: /images/20220603/6ac25770f031418aadd350b5efdfa6b3.png
[SouthEast]: /images/20220603/3f3d9ca93bf1430eb02910091958cb40.png