web表单

最新推荐文章于 2023-07-31 18:35:33 发布

木马啊

最新推荐文章于 2023-07-31 18:35:33 发布

阅读量1.2w

点赞数 8

文章标签： web表单 CSS表单布局表单控件

本文链接：https://blog.csdn.net/u010419337/article/details/78784675

版权

1.表单介绍

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

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

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

上传文件控件

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

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

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

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

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)

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

可以使用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;
}

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