HTML表單
HTML表單
HTML表單是用戶和web站點或應用程序之間交互的主要內容之一。它們允許用戶將數據發送到web站點。大多數情況下，數據被發送到web服務器，但是web頁面也可以自己攔截它並使用它；
-
HTML表單是由一個或多個小部件組成的。這些小部件可以是文本字段(單行或多行)、選擇框、按鈕、複選框或單選按鈕；
-
HTML表單和常規HTML文檔的主要區別在於，大多數情況下，表單收集的數據被發送到web服務器；
form表單
所有的HTML表單都是以一個
<form>標籤開始的；
- form表單:獲取用戶的數據並發送給後端(服務端)
<form></form>標籤
<form action="/my-handling-form-page" method="post">
</form>
這個元素正式定義了一個表單，就像<div>和<p>標籤，它是一個容器元素，但它也支持一些特定的屬性來配置表單的行為方式。它的所有屬性都是可選的，但實踐中最好至少要設置action屬性和method屬性。
action屬性定義了在提交表單時,應該把所收集的數據送給誰(地址)(URL)去處理，.action=”URL”method屬性定義了發送數據的HTTP方法(它可以是「get」或「post」)，method=”數據的提交方式”- 提交方式：get post put delete patch
input標籤
獲取用戶數據最為常用的標籤就是
<input>標籤並且該標籤是行內標籤；
- 直接編寫
input標籤會出現黃色陰影，原因在於input需要結合lable標籤一起使用；
方式1:lable包裹input並綁定id
<label for='input標籤id值'>input標籤</label>
<!--案例-->
<p>
<label for="d1">name:
<input type="text" id="d1">
</label>
</p>
方式2:label與input單獨出現並綁定id
<label for="d1">username:</label>
<input type="text" id="d1">
<!--案例-->
<p>
<label for="d1">name:</label>
<input type="text" id="d1">
</p>
input標籤通過type指定不同的參數來修改表現形式（變形金剛）
type指定的參數
| 參數 | 說明 |
|---|---|
| text | 普通文本 |
| password | 密文密碼 |
| date | 日曆展示 |
| radio | 單選 -> 多個選項標籤需要有相同的name屬性 默認選中需要額外配置checked=’checked’ 當屬性名與屬性值相等的時候可以簡寫checked |
| checkbox | 多選，相當於複選框，默認選中參數也是checked |
| 郵箱格式 | |
| file | 上傳文件（單個） |
| file 添加multiple參數 |
上傳多個文件 |
| submit | 提交按鈕 |
| button | 普通按鈕（本身沒有任何功能，需要綁定js） |
| reset | 重置按鈕 |
按鈕組的提示信息可以通過value屬性自定義，如果不自定義那麼不同的瀏覽器可能會展示出不同的提示信息，尤其是submit按鈕
select標籤
下拉框
<!--select下拉框，默認單選，多選需要指定參數multiple-->
<select name="province" id="" >
<option value="北京">Beijing</option>
<option value="上海">Shanghai</option>
<option value="天津">Tianjin</option>
</select>
進度條標籤
<progress max="100" value="30">30/100</progress>
textarea標籤
文本框
<p>textbox:
<!-- 文本框 -->
<textarea name="info" cols="30" rows="10"></textarea>
</p>
案例：前後端交互
flask框架寫後端，可以用過後端框架來達到TCP服務端的目的
from flask import Flask,request
app = Flask(__name__)
@app.route('/index/',methods=['GET','POST'])
def index():
print(request.form) # 獲取普通數據
print(request.files) # 獲取文件數據
# print(request.form.get('name'))
file_obj = request.files.get('file') # 獲取文件對象
file_obj.save('xxx.md') # 保存文件
return '提交成功'
app.run()
HTML表單寫提交數據
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>信息頁面</h2>
<!--表單-->
<form action="//127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
<!--利用塊級標籤分行顯示 -->
<!--lable綁定id-->
<p>
<label for="d1">name:</label>
<input type="text" id="d1" name="name">
</p>
<!-- 密文密碼 -->
<!-- lable標籤包裹input -->
<p><label>pwd: <input type="password" name="pwd"></label></p>
<p><label>birthday:<input type="date" name="data"></label></p>
<!--性別單選框-->
<p>gender
<!--如果想要實現單選的功能，name指定同一個參數 -->
<!--checked默認選中，參數名和參數值相同可以簡寫為checked-->
<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="checked" name="hobby" value="籃球">baskball
<input type="checkbox" name="hobby" value="足球" >football
<input type="checkbox" name="hobby" value="乒乓">pingpang
<p>others hobby:<input type="text" name="hobby" value="其他愛好"><p>
<p>email:<input type="email" name="email" value="please input Email"></p>
</p>
<p>province:
<!--select下拉框，默認單選，多選需要指定參數multiple-->
<select name="province" id="" >
<option value="北京">Beijing</option>
<option value="上海">Shanghai</option>
<option value="天津">Tianjin</option>
</select>
</p>
<p>idol:
<!--多選multiple-->
<select name="idol" id="" multiple>
<option value="dzj">鄧紫棋</option>
<option value="zjl">周杰倫</option>
<option value="cyx">陳奕迅</option>
</select>
</p>
<p>textbox:
<!-- 文本框 -->
<textarea name="info" id="" cols="30" rows="10"></textarea>
</p>
<p>File:
<!--上傳單個文件-->
<input type="file" name="file">
</p>
<p>MultFile:
<!--上傳多個文件，文件夾不可以-->
<input type="file" multiple name="files">
</p>
<p>
<!-- 按鈕組 -->
<!-- 添加value可以指定字段，不添加value參數自動渲染系統默認的字段 -->
<input type="submit" value="註冊" >
<input type="button" value="返回">
<input type="reset" value="重置">
</p>
</form>
</body>
</html>
注意事項：
-
前端通過標籤獲取用戶數據發送給後端的過程中 標籤需要有name屬性，相當於字典的key；
-
用戶輸入的數據會存儲到標籤的value屬性中，相當於字典的value；
-
如果是選擇型標籤需要自行加上name和value；
-
數據的提交地址由
form表單的action參數來控制action="URL" # 不寫默認朝當前頁面所在的地址提交 method="數據的提交方式" 方式：get post put delete patch -
form表單在提交數據的時候，如果含文件則需要指定兩個固定參數：
method='post' enctype="multipart/form-data"
案例2：簡易表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hammer</title>
<style>
form {
/* 居中表單 */
margin: 0 auto;
width: 400px;
/* 顯示錶單的輪廓 */
padding: 1em;
border: 1px solid #af2c2c;
border-radius: 1em;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
form li + li {
margin-top: 1em;
}
label {
/* 確保所有label大小相同並正確對齊 */
display: inline-block;
width: 90px;
text-align: right;
}
input, textarea {
/* 確保所有文本輸入框字體相同
textarea默認是等寬字體 */
font: 1em sans-serif;
/* 使所有文本輸入框大小相同 */
width: 300px;
box-sizing: border-box;
/* 調整文本輸入框的邊框樣式 */
border: 1px solid #999;
}
input:focus, textarea:focus {
/* 給激活的元素一點高亮效果 */
border-color: #000;
}
textarea {
/* 使多行文本輸入框和它們的label正確對齊 */
vertical-align: top;
/* 給文本留下足夠的空間 */
height: 5em;
}
.button {
/* 把按鈕放到和文本輸入框一樣的位置 */
padding-left: 90px; /* 和label的大小一樣 */
}
button {
/* 這個外邊距的大小與label和文本輸入框之間的間距差不多 */
margin-left: .5em;
}
</style>
</head>
<body>
<form action="/my-handling-form-page" method="post">
<div>
<label for="name">Name:</label>
<input type="text" id="name" name="user_name">
</div>
<div>
<label for="mail">E-mail:</label>
<input type="email" id="mail" name="user_email">
</div>
<div>
<label for="msg">Message:</label>
<textarea id="msg" name="user_message"></textarea>
</div>
<div class="button">
<button type="submit">Send your message</button>
</div>
<div>
<!-- <textarea>by default this element is filled with this text</textarea>-->
</div>
</form>
</body>
</html>
