目錄
前端HTML基礎之form表單
一:form表單
1.form表單功能
表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互
表單能夠包含input系列標簽，比如文本字段、復選框、單選框、提交按鈕等等。
表單還可以包含textarea、select、fieldset和 label標簽。
form表單:獲取用戶的數據並發送給后端(服務端)
eg:網站的登錄、注冊、驗證碼等...
| 屬性 | 描述 |
|---|---|
| accept-charset | 規定在被提交表單中使用的字符集（默認：頁面字符集）。 |
| action | 規定向何處提交表單的地址（URL）（提交頁面）。 |
| autocomplete | 規定瀏覽器應該自動完成表單（默認：開啟）。 |
| enctype | 規定被提交數據的編碼（默認：url-encoded）。 |
| method | 規定在提交表單時所用的 HTTP 方法（默認：GET）。 |
| name | 規定識別表單的名稱（對於 DOM 使用：document.forms.name）。 |
| novalidate | 規定瀏覽器不驗證表單。 |
| target | 規定 action 屬性中地址的目標（默認：_self）。 |
2.表單元素
基本概念：
HTML表單是HTML元素中較為復雜的部分，表單往往和腳本、動態頁面、數據處理等功能相結合，因此它是制作動態網站很重要的內容。
表單一般用來收集用戶的輸入信息
表單工作原理：
訪問者在瀏覽有表單的網頁時，可填寫必需的信息，然后按某個按鈕提交。這些信息通過Internet傳送到服務器上。
服務器上專門的程序對這些數據進行處理，如果有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤后，服務器反饋一個輸入完成的信息。
二:form表單搭建(注冊頁面)
- 簡易版注冊頁面
<h2>注冊頁面</h2>
<form action="">
<p> <!--<lable包裹input並綁定id>-->
<label for="d1">username:</label>
<!--<用戶注冊框>-->
<input type="text" id="d1">
</p>
<p> <!--<用戶注冊密碼>-->
<label for="d2">password:</label>
<input type="password" id="d2">
</p> <!--<日歷展示>-->
<p>birthday:<input type="date"></p>
1.編寫input會出現黃色陰影問題
- 解決方法
直接編寫input會出現黃色陰影，原因在於input需要結合lable一起使用
方式1:lable包裹input並綁定id
<label for='input標簽id值'>input標簽</label>
方式2:label與input單獨出現並綁定id
<label for="d1">username:</label>
<input type="text" id="d1">
三:完整版，前端代碼(注冊頁面)
</head>
<body>
<h2>注冊頁面</h2>
<form action="">
<p>
<label for="d1">username:</label>
<input type="text" id="d1">
</p>
<p>
<label for="d2">password:</label>
<input type="password" id="d2">
</p>
<p>birthday:<input type="date"></p>
<p>gender:
<input type="radio" name="gender" checked="checked">male
<input type="radio" name="gender">female
<input type="radio" name="gender">others
</p>
<p>hobby:
<input type="checkbox" checked>籃球
<input type="checkbox" checked>足球
<input type="checkbox" checked>雙色球
</p>
<p>email:
<input type="email">
</p>
<p>province
<select name="" id="">
<option value="">北京</option>
<option value="">深圳</option>
<option value="">上海</option>
</select>
</p>
<p>明星
<select name="" id="">
<option value="">蒼老師</option>
<option value="">明老師</option>
<option value="">三上老師</option>
</select>
</p>
<p>info:
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
<p>file:
<input type="file">
</p>
<p>files:
<input type="file" multiple>
</p>
<p>
<input type="submit" value="注冊">
<input type="button" value="幫助">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
四:type屬性介紹
- 獲取用戶數據最為常用的標簽就是input標簽並且該標簽是行內標簽
1.input(type屬性)
<input> 元素會根據不同的 type 屬性，變化為多種形態。
通過type參數的不同變換不同的表現形式
| type屬性 | 表現形式 |
|---|---|
| text | 普通文本 |
| password | 密碼展示 |
| date | 日歷展示 |
| radio | 單選>>>:多個選項標簽需要有相同的name屬性才能(單選) |
| checked='checked' | （默認選中）需要額外配置checked='checked' 當屬性名與屬性值相等的時候可以簡寫checked |
| checkbox | 多選>>>:默認選中也是checked屬性 |
| 郵箱格式 | |
| file | 上傳文件>>>:默認只支持單個文件 如果需要一次性上傳多個需要額外配置 multiple |
| select | 標簽是下拉框選項單選(地址) 一個個選項就是一個個option標簽 默認是單選也可以變為多選 |
| multiple | 下拉框多選 |
| textarea | 標簽個人簡介(多行文本 )獲取大段文本內容 |
| submit | 提交按鈕>>>:點擊出發提交數據的動作(注冊) (按鈕組的提示信息可以通過value屬性自定義， 如果不自定義那么不同的瀏覽器可能會展示出不同的提示信息 尤其是submit按鈕) |
| button | 普通按鈕>>>:本身沒有任何功能 需要綁定(JS) (按鈕組的提示信息可以通過value屬性自定義， 如果不自定義那么不同的瀏覽器可能會展示出不同的提示信息 尤其是submit按鈕) |
| reset | 重置按鈕 (按鈕組的提示信息可以通過value屬性自定義， 如果不自定義那么不同的瀏覽器可能會展示出不同的提示信息 尤其是submit按鈕) |
五:form表單提交數據
- 方法1
數據的提交地址由form表單的action參數來控制
action="URL"
不寫默認朝當前頁面所在的地址提交
- 方法2
method="數據的提交方式"
數據的提交方式有很多種 這里先忽略(后續框架更新)
get post put delete patch...
- 方法3
form表單在提交數據的時候 如果含文件則需要指定兩個固定參數
method='post'
enctype="multipart/form-data"
六:前后端交互
- 只看效果即可
- 后端框架TCP服務端
以flask框架為例>>>:第三方框架 pip3 install flask
1.搭建簡易版服務端
from flask import Flask,request
app = Flask(__name__)
@app.route('/index/', methods=['GET', 'POST'])
def index():
print(request.form)
print(request.form)
return 'flask框架真簡單'
app.run()
2.前端設置(提交數據網址參數)
form表單在提交數據的時候 如果含文件則需要指定兩個固定參數
method='post'
<form action="http://127.0.0.1:5000/index/" method="post">
3.網址測試
4.服務端(后端)
測試服務器接收客戶端數據，不顯示用戶數據
5.服務端不顯示客戶端數據原因
1.前端通過標簽獲取用戶數據發送給后端的過程中 標簽需要有name屬性
相當於字典的key
2.用戶輸入的數據會存儲到標簽的value屬性中 相當於字典的value
如果是選擇型標簽需要自行加上name和value 才能將用戶數據發送到后端
七:完整版 前后端交互
- 服務端
from flask import Flask,request
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 獲取普通數據
print(request.files) # 獲取文件數據
file_obj = request.files.get('file') # 獲取文件對象
file_obj.save('xxx.md') # 保存文件
return 'flask框架真簡單'
app.run()
PYTHON 復制 全屏
1.前端解決方法
前端用戶輸入的數據會存儲到標簽的value屬性中
相當於字典的value如果是選擇型標簽需要自行加上name和value
k:v鍵值對 才能將用戶數據發送到后端
2.form如果包含文件則需要指定兩個固定參數
enctype="multipart/form-data"
- 前端
</head>
<body>
<h2>注冊頁面</h2>
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<p>
<label for="d1">username:</label>
<input type="text" id="d1" name="name">
</p>
<p>
<label for="d2">password:</label>
<input type="password" id="d2" name="pwd">
</p>
<p>birthday:<input type="date" name="birth"></p>
<p>
<input type="radio" name="gender" checked="checked" value="男">male
<input type="radio" name="gender" value="女">female
<input type="radio" name="gender" value="其他">others
</p>
<p>hobby:
<input type="checkbox" checked value="basketball">籃球
<input type="checkbox" checked value="football">足球
<input type="checkbox" checked value="doublecolorball">雙色球
</p>
<p>email:
<input type="email" name="meail">
</p>
<p>province
<select name="全國地址" id="">
<option value="bj">北京</option>
<option value="sz">深圳</option>
<option value="sh">上海</option>
</select>
</p>
<p>明星
<select name="明星" id="">
<option value="cang">蒼老師</option>
<option value="ming">明老師</option>
<option value="sanshang">三上老師</option>
</select>
</p>
<p>info:
<textarea name="簡介" id="" cols="30" rows="10"></textarea>
</p>
<p>file:
<input type="file" name="files">
</p>
<p>files:
<input type="file" multiple name="files">
</p>
<p>
<input type="submit" value="注冊">
<input type="button" value="幫助">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
2.網址注冊測試(前后端交互測試)
