web表单

1.表单介绍

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

添加文本控件:单行文本框、密码框、多行文本框(文本域)

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

上传文件控件

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

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

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

表单控件
控件名字 元素 部分元素元素特性
单行文本框 name,maxlength
密码框 name,size,maxlength
文本域                             访问该页面可以看到一个丑陋的表单。通过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;
}
访问页面可以看到一个简单的表单界面:

web表单_第2张图片

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

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




你可能感兴趣的:(web表单)