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