Flask框架學(xué)習(xí)筆記之表單基礎(chǔ)介紹與表單提交方式
本文實(shí)例講述了Flask框架學(xué)習(xí)筆記之表單基礎(chǔ)介紹與表單提交方式。分享給大家供大家參考,具體如下:
表單介紹
表單是HTML頁面中負(fù)責(zé)數(shù)據(jù)采集功能的部件。由表單標(biāo)簽,表單域和表單按鈕組成。通過表單,將用戶輸入的數(shù)據(jù)提交給服務(wù)器,并交給服務(wù)端進(jìn)行處理。
表單標(biāo)簽
用于聲明表單的范圍,位于表單標(biāo)簽的元素將被提交。
語法:<form></form>
屬性:Method規(guī)定用于發(fā)送表單數(shù)據(jù)的 HTTP 方法。
Enctype規(guī)定在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對其進(jìn)行編碼。(適用于 method="post" 的情況)
action規(guī)定當(dāng)提交表單時向何處發(fā)送表單數(shù)據(jù)。(指定url)
表單域
表單域包含了文本框,密碼框等多種類型
語法:<input ……/>
屬性:type規(guī)定input元素類型。
name定義input元素名稱
value規(guī)定input元素值
表單域的種類
文本框type=text
密碼框type=password
文本區(qū)域type=textarea(可輸入多行數(shù)據(jù))
文件上傳框type=file
單選框type=radio
復(fù)選框type=checkbox
表單按鈕
提交按鈕
復(fù)位按鈕
一般按鈕
實(shí)現(xiàn):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form> <input type="text" placeholder="Text" name="text" /># text <input type="password" placeholder="password" name="password" /># password <textarea placeholder="Textarea" name="textarea" style="resize:none"></textarea># 文本區(qū)域 <input type="file" name="file" /># 文件上傳 <input type="radio" name="Option" value="Option1" /> Option1# 單選框 <input type="radio" name="Option" value="Option2" /> Option2 <input type="checkbox" name="Option" value="Option1" /> Option1# 多選框 <input type="checkbox" name="Option" value="Option2" /> Option2 <input type="submit" value="Submit" /># submit按鈕 <input type="reset" value="Reset" /># 重置按鈕 <input type="button" value="button" /># 普通按鈕 </form> </body> </html>
普通按鈕下沒有js語言支持是無效果的。
這里編寫一個簡單的js腳本來實(shí)現(xiàn)點(diǎn)擊button彈出表單中的信息:
function getValue() { var text=document.form1.text1.value; alert(text) }
html程序:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="../static/j.js"></script># 這里插入js腳本 </head> <body> <form name="form1"># 添加表單名字 <input type="text" placeholder="Text" name="text1" /># 修改text表單名 <input type="password" placeholder="password" name="password" /> <textarea placeholder="Textarea" name="textarea" style="resize:none"></textarea> <input type="file" name="file" /> <input type="radio" name="Option" value="Option1" /> Option1 <input type="radio" name="Option" value="Option2" /> Option2 <input type="checkbox" name="Option" value="Option1" /> Option1 <input type="checkbox" name="Option" value="Option2" /> Option2 <input type="submit" value="Submit" /> <input type="reset" value="Reset" /> <input type="button" value="button" οnclick="getValue()" /># 點(diǎn)擊就調(diào)用getValue()函數(shù) </form> </body> </html>
表單的提交方式
GET和POST
GET方式通過URL提交數(shù)據(jù),數(shù)據(jù)在URL中可以看到。
POST方式,數(shù)據(jù)放置在HTML Header中提交
兩種提交方式的區(qū)別
GET請求可以被瀏覽器緩存
POST所請求的URL可以被緩存,但數(shù)據(jù)不會被緩存
POST請求不便于分享
POST請求沒有長度限制
GET請求的數(shù)據(jù)暴露在URL中,會帶來一些安全問題。
GET方式的適用場合
單純的請求數(shù)據(jù),不進(jìn)行其他操作
表單數(shù)據(jù)較短,不超過1024個字符
對安全性要求一般的場合
POST方式適用的場合
數(shù)據(jù)不僅僅用于請求,或提交上傳數(shù)據(jù)。
表單數(shù)據(jù)過長時
要傳送的數(shù)據(jù)不是ASCII編碼
希望本文所述對大家基于flask框架的Python程序設(shè)計有所幫助。
相關(guān)文章
幫你快速上手Jenkins并實(shí)現(xiàn)自動化部署
在未學(xué)習(xí)Jenkins之前,只是對Jenkins有一個比較模糊的理解,即Jenkins是一個自動化構(gòu)建項(xiàng)目發(fā)布的工具,可以實(shí)現(xiàn)代碼->github或者gitlab庫->jenkins自動部署->訪問的整體的過程,而無需人為重新打包,今天就帶大家詳細(xì)了解一下,幫你快速上手Jenkins,需要的朋友可以參考下2021-06-06pytorch中的torch.nn.Conv2d()函數(shù)圖文詳解
這篇文章主要給大家介紹了關(guān)于pytorch中torch.nn.Conv2d()函數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2022-02-02python編程開發(fā)之textwrap文本樣式處理技巧
這篇文章主要介紹了python編程開發(fā)之textwrap文本樣式處理技巧,實(shí)例分析了Python中textwrap的常用方法與處理文本樣式的相關(guān)使用技巧,需要的朋友可以參考下2015-11-11pampy超強(qiáng)的模式匹配工具的實(shí)現(xiàn)
在自然語言處理界,模式匹配可以說是最常用的技術(shù)。甚至可以說,將NLP技術(shù)作為真實(shí)生產(chǎn)力的項(xiàng)目都少不了模式匹配。本文就介紹了pampy超強(qiáng)的模式匹配工具的實(shí)現(xiàn),感興趣的可以了解一下2021-07-07Python數(shù)據(jù)結(jié)構(gòu)之樹的全面解讀
數(shù)據(jù)結(jié)構(gòu)中有很多樹的結(jié)構(gòu),其中包括二叉樹、二叉搜索樹、2-3樹、紅黑樹等等。本文中對數(shù)據(jù)結(jié)構(gòu)中常見的樹邏輯結(jié)構(gòu)和存儲結(jié)構(gòu)進(jìn)行了匯總,不求嚴(yán)格精準(zhǔn),但求簡單易懂2021-11-11