Html表单
#转载请留言联系
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:
1、<form>标签 定义整体的表单区域
- action属性 定义表单数据提交地址 例如:http://www.baidu.com
- method属性 定义表单提交的方式,一般有“get”方式和“post”方式
2、<label>标签 label 标签不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。
3、<input>标签 定义通用的表单元素
- type属性
- type="text" 定义单行文本输入框
- type="password" 定义密码输入框
- type="radio" 定义单选框
- type="checkbox" 定义复选框
- type="file" 定义上传文件 form表单需要加上属性enctype="multipart/form-data"
- type="submit" 定义提交按钮
- type="reset" 定义重置按钮
- type="button" 定义一个普通按钮
- value属性 定义表单元素的值,此值是数据提交时键的值
- name属性 定义表单元素的名称,此名称是提交数据时的键名
- checked: radio 和 checkbox 默认被选中
- readonly: 只读. text 和 password
- disabled: 对所用input都好使.
4、<textarea>标签 定义多行文本输入框
name: 表单提交项的键. cols: 文本域默认有多少列 rows: 文本域默认有多少行
5、<select>标签 定义下拉表单元素
name:表单提交项的键.size:选项个数multiple:多选项 <option> 下拉选中的每一项 属性:value:表单提交项的值. selected: selected下拉选默认被选中<optgroup>为每一项加上分组
6、label 鼠标移到姓名上出输入框
<label for="www">姓名</label> <input id="www" type="text">7.fieldset
<fieldset><legend>登录吧</legend><input type="text"> </fieldset>
示例
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><link rel="icon" href="https://developer.mozilla.org/static/img/favicon32.7f3da72dcea1.png"><link rel="stylesheet" href="#"><title>Form表单注册面学习</title></head> <body> <!--action 定义表单数据提交地址--> <form action="http://127.0.0.1:8000/post_info" method="post" enctype="multipart/form-data"><!--单行文本框--><input type="text" name="username" placeholder="请输入账号"><br><br><!--密码框--><input type="password" name="password" placeholder="请输入密码"><br><br><!--单选框-->性别:<label><input type="radio" name="sex" value="1">男</label><label><input type="radio" name="sex" value="2">女</label><!--多选框--><br><br>最喜欢的游戏:<label><input type="checkbox" name="fav" value="LOL">英雄联盟</label><label><input type="checkbox" name="fav" value="shoot">喷射战士</label><label><input type="checkbox" name="fav" value="zelder">塞尔达传说</label><label><input type="checkbox" name="fav" value="mario">马里奥</label><!--上传图片--><br><br><input type="file" name="pic"><!--多行文本框--><br><br><textarea name="text" cols="30" rows="10"></textarea><!--下拉列表--><br><br><select name="city"><option value="gz">广州</option><option value="sz">深圳</option><option value="zh">中山</option></select><!--提交表单--><input type="submit" value="提交"><!--重置表单--><input type="reset" value="重置"> </form> </body> </html></body> </html>
Django 接受表单提交的数据
# urls.py添加 url(r'^post_info$', views.post_info),# views.py添加 def post_info(request):print(request.POST)print(request.GET)print(request.FILES)for item in request.FILES:fileObj = request.FILES.get(item)f = open(fileObj.name, 'wb')iter_file = fileObj.chunks()for line in iter_file:f.write(line)f.close()return HttpResponse('ok')
参考:https://www.cnblogs.com/chichung/p/9664362.html