input标签的值只能两位小数_Day51 HTML表格表单标签、flask框架
目錄
- 表格標(biāo)簽
- 表單標(biāo)簽
- action標(biāo)簽
- input標(biāo)簽
- select標(biāo)簽
- textarea標(biāo)簽
- form表單提交文件需要注意
- flask框架
1、表格標(biāo)簽
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表格標(biāo)簽</title><meta name="viewport" content="width=device-width,initial-scale=1"> </head> <body> <!-- cellpadding：文字距離邊框的距離border：邊框厚度--><table border="7" cellpadding="5"><thead> <!-- 一個tr就是一行--><tr> <!-- th加粗的表頭--><th>username</th><th>password</th><th>hobby</th></tr></thead><tbody><tr> <!-- td不加粗的文本--><td>jason</td><td>123</td><td>read</td></tr><tr><td>egon</td><td>123</td><td>tea</td></tr><tr> <!-- colspan占左右兩個空格，水平方向--><td colspan="2">tank</td></tr><tr> <!-- rowspan占上下兩個空格，豎直方向--><td rowspan="2">jack</td><td>password</td><td>playing</td></tr><tr><td>test</td><td>test</td></tr></tbody></table> </body> </html>""" @version:3.8 @author:Dinding @file:01 表格標(biāo)簽.py """2、表單標(biāo)簽
用于獲取前端用戶輸入的數(shù)據(jù)(用戶輸入的、上傳的、選擇的)，基于網(wǎng)絡(luò)發(fā)送給后端服務(wù)器。在該form標(biāo)簽內(nèi)部書寫的獲取用戶的數(shù)據(jù)都會被form標(biāo)簽提交
1、action標(biāo)簽action：控制數(shù)據(jù)提交的后端路徑-給哪個服務(wù)端提交數(shù)據(jù)
1、action為空：默認(rèn)是朝當(dāng)前頁面所在的url提交數(shù)據(jù)
2、寫全路徑：https://www.luffycity.com/，朝路飛服務(wù)器提交
3、只寫路徑后綴：action='/index/'，會自動識別出當(dāng)前頁面所在的后端服務(wù)器的ip和port并拼接到前面，即host:port/index/-->
獲取用戶輸入的標(biāo)簽，一般input標(biāo)簽要配合label標(biāo)簽一起使用，input不跟label關(guān)聯(lián)也沒問題。
第一種方式：將input標(biāo)簽寫在label標(biāo)簽內(nèi)：
<p>
<label for="d1"> <!--for="d1"表示這個label標(biāo)簽下面包的是id=“d1”的標(biāo)簽-->
username:<input type="text" id="d1" name="username">
</label>
</p>
第二種方式：通過input標(biāo)簽的id關(guān)聯(lián)上label標(biāo)簽即可，無需嵌套
<p>
<label for="d2">password:</label>
<input type="password" id="d2" name="password">
</p>
input標(biāo)簽的類型：
text：普通文本
password：密文
date：日期 submit:提交按鈕，用來觸發(fā)form表單提交數(shù)據(jù)的動作，如果沒有指定按鈕的文本內(nèi)容，不同的瀏覽器打開之后可能渲染的文本內(nèi)容會不一致，需要指定value button：就是一個普通的按鈕，本身沒有任何的功能，但是它是最有用的，學(xué)完js之后可以給它自定義各種功能。
reset：重置內(nèi)容
radio：單選
checked：默認(rèn)選中，checked=“checked” ；當(dāng)標(biāo)簽屬性名和屬性值一樣時，簡寫成checked
checkbox：多選
file：獲取文件
hidden：隱藏當(dāng)前框，釣魚網(wǎng)站就會用到
<p>你看不到我，隱藏了：
<input type="hidden">
</p>
針對用戶輸入的標(biāo)簽：
1、加上value="defaultvalue"，就是默認(rèn)值，默認(rèn)顯示成defaultvalue，最終獲取到的數(shù)據(jù)就是這里的defaultvalue。
2、加上disabled屬性，就是只能看，不能改了，禁用。例如當(dāng)我們修改密碼的時候，用戶名只能看不能改，需要修改的是密碼。
3、readonly屬性跟disabled差不多，也是只能看不能改。
<p>
<label for="da">
disable:<input type="text" id="da" name="disable" disabled value="disable">
</label>
</p>
默認(rèn)是單選，加multiple可變成多選
4、textarea標(biāo)簽用來獲取大段文本：
<p>自我介紹：
<textarea name="" id="" cols="30" rows="10"></textarea>
</p>
3、form表單提交文件需要注意：
如果不寫，默認(rèn)是get，但是我們這里是要提交用戶輸入或選擇的數(shù)據(jù)給服務(wù)器，所以需要指定為post方式
<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
enctype類似于數(shù)據(jù)提交的編碼格式，默認(rèn)是urlencoded，只能夠提交普通的文本數(shù)據(jù)，formdata就可以支持提交文件數(shù)據(jù)，這樣上傳的csv、Excel文件我們就能獲取到了。
表單代碼總結(jié)：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>表單標(biāo)簽</title><meta name="viewport"content="width=device-width,initial-scale=1"> </head> <body><h1>注冊頁面</h1><form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data"> <!-- 一般input要配合label一起使用，不一起使用也可以。有兩種寫法：一種嵌套，一種不嵌套--> <!-- label和input標(biāo)簽都是行內(nèi)標(biāo)簽會出現(xiàn)在一行內(nèi)，可以用一個p標(biāo)簽包裹一下--><p><label for="d1">username:<input type="text" id="d1" name="username"></label></p><p><!--label標(biāo)簽是為了給input標(biāo)簽加一個標(biāo)識--><label for="da">disable:<input type="text" id="da" name="disable" value="disableqw"></label></p><p>你看不到我，隱藏了：<input type="hidden"></p><p><label for="d2">password:</label><!--type=password表示輸入密碼的時候為星號*--><input type="password" id="d2" name="password"></p><p><label for="d3"><!--type=date，輸入框內(nèi)會有日期可供選擇-->birth :<input type="date" id="d3" name="birthday"></label></p><p>gender: <!-- <input type="radio" name="gender" checked="checked">男生當(dāng)標(biāo)簽的屬性名和屬性值一樣時，可以簡寫，例如checked--><input type="radio" name="gender" value="male" checked>男生<input type="radio" name="gender" value="female">女生<input type="radio" name="gender" value="other">其他</p><p><input type="submit" value="注冊"><input type="button" value="按鈕"></p><p>hobby:<input type="checkbox" name="hobby" value="read" checked>read<input type="checkbox" name="hobby" value="BD">BD<input type="checkbox" name="hobby" value="tea">tea<input type="checkbox" name="hobby" value="football">football<input type="checkbox" name="hobby" value="basketball">basketball</p><p>province1：<select name="multipleselect" id=""><option value="sz">深圳</option><option value="gz">廣州</option><!--默認(rèn)選中的是成都--><option value="cd" selected>成都</option><option value="sh">sh</option></select></p><p>province：<!--多選，加一個multiple--><select name="" id="" multiple><option value="">深圳</option><option value="" selected>廣州</option><option value="" selected>成都</option><option value="">sh</option></select></p><p>province2：<select name="" id=""><!--雙層嵌套--><optgroup label="sh"><option value="">fudong</option><option value="">fudong1</option><option value="">fudong2</option></optgroup><optgroup label="sh1"><option value="">chaoyang</option><option value="">chaoyang1</option><option value="">chaoyang2</option></optgroup><optgroup label="sh2"><option value="">111</option><option value="">222</option><option value="">333</option></optgroup></select></p><p>上傳文件： <!-- multiple支持上傳多個文件--><input type="file" name="myfile" multiple></p><p>自我介紹：<textarea name="info" id="123" cols="30" rows="10"></textarea></p><p><input type="submit" value="注冊"></input></p><p><input type="button" value="按鈕-好玩的普通按鈕"></p><p><input type="reset" value="重置"></p><button>提交數(shù)據(jù)</button></form><!-- 輸入框的提示--><input type="text" placeholder="用戶名提示"></body> </html>4、FLASK框架
通過搭建flask框架，可以獲取到前端表單中用戶輸入或者選擇的數(shù)據(jù)。
from flask import Flask,request app=Flask(__name__)# 當(dāng)前url既可以支持get請求也可以支持post請求，如果不寫默認(rèn)只能支持get請求。 # 裝飾器 @app.route('/index/',methods=['GET','POST']) def index():print(request.form) # 打印出了form表單提交過來的非文件數(shù)據(jù)# 前端用戶輸入內(nèi)容點擊注冊后，這里就會獲取到鍵值對數(shù)據(jù)，如下：# 這里要補充兩點# 1、這個地方打印能獲取到數(shù)據(jù)的肯定是標(biāo)簽加上了name屬性的，如果說提交的數(shù)據(jù)在這里沒有，那么要檢查是否給標(biāo)簽加了name屬性# 2、那些用戶選擇的，不需要用戶輸入的標(biāo)簽，需要我們給這些值添加一個value值，不然我們獲取到的鍵值對數(shù)據(jù)無法取到正確的值。# <input type="radio" name="gender" value="male" checked>男生# 獲取到的數(shù)據(jù)：# ImmutableMultiDict([('username', ''), ('password', ''), ('birthday', ''), ('gender', 'male'), ('hobby', 'read'), ('myfile.png', 'Track My Tasks.xlsx')])# POST /index/ HTTP/1.1ImmutableMultiDict([])# 文件數(shù)據(jù)需要單獨獲取：print(request.files)# ImmutableMultiDict([('myfile.png', <FileStorage: 'Track My Tasks.xlsx' ('application/octet-stream')>)])file_obj=request.files.get('myfile.png') # 這里的myfile就是我們自己設(shè)置的name屬性print(file_obj.name)file_obj.save(file_obj.name)return 'OK'app.run() 創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎總結(jié)
以上是生活随笔為你收集整理的input标签的值只能两位小数_Day51 HTML表格表单标签、flask框架的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 路由器一网线分配多ip一个路由器拉网线如
- 下一篇： 2017年html5行业报告,云适配发布