快捷導(dǎo)航

Flask框架學(xué)習(xí)筆記之表單基礎(chǔ)介紹與表單提交方式

更新時(shí)間：2019年08月12日 11:19:51 作者：Cytues

這篇文章主要介紹了Flask框架學(xué)習(xí)筆記之表單基礎(chǔ)介紹與表單提交方式,結(jié)合實(shí)例形式分析了flask框架中表單的基本功能、定義、用法及表單提交的get、post方式使用技巧,需要的朋友可以參考下

本文實(shí)例講述了Flask框架學(xué)習(xí)筆記之表單基礎(chǔ)介紹與表單提交方式。分享給大家供大家參考，具體如下：

表單介紹

表單是HTML頁(yè)面中負(fù)責(zé)數(shù)據(jù)采集功能的部件。由表單標(biāo)簽，表單域和表單按鈕組成。通過(guò)表單，將用戶輸入的數(shù)據(jù)提交給服務(wù)器，并交給服務(wù)端進(jìn)行處理。

表單標(biāo)簽

用于聲明表單的范圍，位于表單標(biāo)簽的元素將被提交。

語(yǔ)法：<form></form>

屬性：Method規(guī)定用于發(fā)送表單數(shù)據(jù)的 HTTP 方法。

Enctype規(guī)定在向服務(wù)器發(fā)送表單數(shù)據(jù)之前如何對(duì)其進(jìn)行編碼。（適用于 method="post" 的情況）

action規(guī)定當(dāng)提交表單時(shí)向何處發(fā)送表單數(shù)據(jù)。(指定url）

表單域

表單域包含了文本框，密碼框等多種類型

語(yǔ)法：<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語(yǔ)言支持是無(wú)效果的。

這里編寫一個(gè)簡(jiǎn)單的js腳本來(lái)實(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>