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