---
# System prepended metadata

title: Python + Flask + Html (GET&POST)
tags: [智慧影像科專案]

---

# Python + Flask + Html (GET&POST)
###### tags: `智慧影像科專案`
## 網頁輸入表格&&判斷表格的資料

### 創建資料夾```templates```
```mkdir templates```

在資料夾中建立```index.html```

```New-Item index.html```

### **Python程式碼**
  
```demo.py```
```python=
from flask import Flask ,request ,render_template

app = Flask(__name__)

#網頁執行/say_hello時，會導至index.html
@app.route('/say_hello' ,methods=['GET'])
def getdata():
 return render_template('index.html')

#index.html按下submit時，會取得前端傳來的username，並回傳"Hellold! "+name
@app.route('/say_hello' ,methods=['POST'])
def submit():
 name = request.form.get('username')
 password = request.form.get('password')
 print (name +"+" +password)
 if name == "shin" and password == "123":
    return "Hello !"+name
 else :
    return "Go away!"
 
    

if __name__ == '__main__':
    app.run()
    
```




### **html程式碼** 
```index.html```

```html=
<!doctype html>
<title>Hello, World!</title>
<h1>Hello, your name is ?</h1>
<p></p>
<form action="/say_hello" method="post">
 <label style="text-align:left ;display: block ;width:50px">ID:</label> 
 <input type="textbox" name="username" style="width:100px"><br>
 <label style="text-align:left ;display: block ;width:50px">Password:</label> 
 <input type="password" name="password" style="width:100px"><br>
 <input type="submit" value="Submit" >
</form>

```

### 結果畫面

#### 瀏覽器
http://127.0.0.1:5000/say_hello
![](https://i.imgur.com/1e0rfRj.png)



#### 輸入ID:shin   Password=123

![](https://i.imgur.com/z2g9LUl.png)

:::success
**(正確)**回傳ID
![](https://i.imgur.com/SWt1rVw.png)
:::

#### 輸入錯誤ID及Password

![](https://i.imgur.com/Ba7ny68.png)

:::danger
**(錯誤)**回傳Go away!
![](https://i.imgur.com/s1U5BMW.png)


:::




