HTML-表單 211

單的作用就是采集用戶填寫的信息,將其發往服務器做相應的處理

表單的元素必須寫在form標簽中,一個form就是一個表單,表單中最重要的元素是input

input元素有一個type屬性,type的可選值有：1)button(普通按鈕)2checkbox(復選框)3text(單行文本框)4password(密碼框)5radio(單選按鈕)6image(圖片按鈕)7file(文件選擇框)8hidden(隱藏字段)9<input type="file" />submit(提交按鈕)10reset(重置按鈕)

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>表單元素</title>
</head>
<body>
    <form action="http://www.bd.com/register.aspx" method="post">
        用 戶 名:<input type="text" value="張三" size="8" name="txtName" /><br /><br />
        用戶密碼:<input type="password" size="8" /><br /><br />
        用戶性別:<input type="radio" name="rdGender" value="1" />男<input type="radio" name="rdGender"
            value="0" />女<br /><br />
        興趣愛好:<input type="checkbox" value="0" checked="checked" />乒乓球<input type="checkbox" value="1" />籃球<input
            type="checkbox" value="2" />排球<br /><br />
        省市選擇:省:<select>
            <option value="0">北京</option>
            <option selected="selected" value="1">河南</option>
            <option value="2">河北</option>
        </select>
        市:<select>
            <option value="0">密云</option>
            <option selected="selected" value="1">鄭州</option>
            <option value="2">石家莊</option>
        </select><br /><br />
        上傳文件:<input type="file" /><br/><br/>
        <textarea cols="50" rows="10" readonly="readonly">
				北京百度網訊科技有限公司
				統一社會信用代碼/注冊號：91110000802100433B
				注冊資本：1342128萬元
				法定代表人：梁志祥
				成立日期：2001-06-05
				營業期限：2001-06-05 至 長期
				企業類型：有限責任公司(自然人投資或控股)
				注冊地址：北京市海淀區上地十街10號百度大廈2層
				經營范圍：技術轉讓、技術咨詢、技術服務、技術培訓、技術推廣；設計、開發、銷售計算機軟件；經濟信息咨詢；利用www.baidu.com、www.hao123.com(www.hao222.net、www.hao222.com)網站發布廣告；設計、制作、代理、發布廣告；貨物進出口、技術進出口、代理進出口；醫療軟件技術開發；委托生產電子產品、玩具、照相器材；銷售家用電器、機械設備、五金交電（不含電動自行車）、電子產品、文化用品、照相器材、計算機、軟件及輔助設備、化妝品、衛生用品、體育用品、紡織品、服裝、鞋帽、日用品、家具、首飾、避孕器具、工藝品、鐘表、眼鏡、玩具、汽車及摩托車配件、儀器儀表、塑料制品、花、草及觀賞植物、建筑材料、通訊設備、汽車電子產品、器件和元件、自行開發后的產品；預防保健咨詢；公園門票、文藝演出、體育賽事、展覽會票務代理；翻譯服務；通訊設備和電子產品的技術開發；計算機系統服務；車聯網技術開發；汽車電子產品設計、研發、制造（北京市中心城區除外）；演出經紀；人才中介服；經營電信業務；利用信息網絡經營音樂娛樂產品、演出劇（節）目、動漫產品、游戲產品（含網絡游戲虛擬貨幣發行）、表演、網絡游戲技法展示或解說（網絡文化經營許可證有效期至2020年04月17日）；因特網信息服務業務（除出版、教育、醫療保健以外的內容）；圖書、電子出版物、音像制品批發、零售、網上銷售。（市場主體依法自主選擇經營項目，開展經營活動；演出經紀、人才中介服務、利用信息網絡經營音樂娛樂產品、演出劇（節）目、動漫產品、游戲產品（含網絡游戲虛擬貨幣發行）、表演、網絡游戲技法展示或解說、經營電信業務以及依法須經批準的項目，經相關部門批準后依批準的內容開展經營活動；不得從事國家和本市產業政策禁止和限制類項目的經營活動。）
			</textarea><br /><br />
        <input type="button" value="按鈕" />
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>
</html>

還有一些次要的表單元素以后需要用到再說;關于瀏覽器兼容性自己測試不再截圖

絕大多數表單元素必須有name與value屬性,這樣的表單元素才能將此元素的的value值傳遞給服務器;如果method屬性值為get,點擊submit這個按鈕時在網址中就能看到填寫的值

如果是radio(單選按鈕)name屬性值必須一樣,這樣此元素值就會只能選擇其中一個

button:只是一個普通按鈕,以后會通過JavaScript進行操作;submit:自動將填寫在此網頁表單元素的值發送給action指定的服務器相應的程序去處理;reset:將表單元素中填入的值還原為默認值

HTML表單

、概述

這是Flask Mega-Tutorial系列的第三部分，我將告訴你如何使用Web表單。

在第二章中我為應用主頁創建了一個簡單的模板，并使用諸如用戶和用戶動態的模擬對象。在本章中，我將解決這個應用程序中仍然存在的眾多遺漏之一，那就是如何通過Web表單接受用戶的輸入。

Web表單是所有Web應用程序中最基本的組成部分之一。我將使用表單來為用戶發表動態和登錄認證提供途徑。

在繼續閱讀本章之前，確保你的microblog應用程序狀態和上一章完結時一致，并且運行時不會報任何錯誤。

二、Flask-WTF簡介和安裝

在Flask中，處理應用程序中的Web表單，將使用到Flask-WTF擴展庫，它是Flask和WTForms的簡單集成，主要功能有：使用CSRF(Cross-site request forgery，譯作跨站請求偽造)令牌保護表單、文件上傳、支持reCAPTCHA（譯作反全自動區分計算機和人類的圖靈測試，簡單點就是：驗證碼）。擴展是Flask生態系統中非常重要的一部分。今后還會需要更多的擴展。

我將使用Flask-WTF插件來處理本應用中的Web表單，它對WTForms進行了淺層次的封裝以便和Flask完美結合。這是本應用引入的第一個Flask插件，但絕不是最后一個。插件是Flask生態中的舉足輕重的一部分，Flask故意設計為只包含核心功能以保持代碼的整潔，并暴露接口以對接解決不同問題的插件。

Flask插件都是常規的Python三方包，可以使用pip安裝。那就繼續在你的虛擬環境中安裝Flask-WTF吧：
進入虛擬環境中，安裝Flask-WTF：

(venv) [root@python blog]# pip3 install flask-wtf

將附帶安裝WTForms，因為它是Flask-WTF的一部分。

2.1配置 configuration

目前為止，這個應用程序足夠簡單，無需擔心它的配置。Flask（以及Flask擴展）在如何執行操作方面提供了很多自由，并需要做一些決定，并將這些決定作為一個配置變量列表傳遞給框架。

應用程序有多種格式可指定配置選項。最基本的方案：在app.config這個字典中，將定義的變量作為鍵。形如：

app = Flask(__name__)app.config['SECRET_KEY'] = 'I am a secret, you can't guess.'#需要的話，可繼續添加更多的變量

盡管上述語法可為Flask成功創建配置選項，但根據關注點分離原則（Separation of concerns, SoC），所以不要將配置放在創建應用程序的相同位置，而是：將配置保存在單獨的.py文件中，并使用類存儲配置變量，將該.py文件放在項目頂級目錄下。
/microblog/config.py：密鑰配置

import os
class Config:
				SECRET_KEY = os.environ.get('SECRET_KEY') or 'you will never guess'

SECRET_KEY這個配置變量，將會被Flask及其擴展使用其值作為加密秘鑰，用于生產簽名或令牌。而Flask-WTF使用它來保護Web表單來免受CSFR攻擊。

密鑰的值是具有兩個術語的表達式，由or運算符連接。第一個術語是查找環境變量的值；第二個術語是一個硬編碼的字符串。當然這個安全性還是很低的。當將應用程序部署在生產服務器上時，得設置一個安全級別高的。

其中os.environ是獲取本機系統的各種信息（如環境變量等，你打印出來就明白了，哈哈），它是一個字典。我覺得os.environ.get('SECRET_KEY')在開發環境中并沒有用，是None，不知部署后是什么。
有了上述這個配置文件，接下來得讓Flask應用程序讀取并應用它。在創建Flask應用程序實例后，就用app.config.from_object()方法完成：
app/__init__.py：Flask配置

from flask import Flask
from config import Config                #從config模塊導入Config類


app = Flask(__name__)
app.config.from_object(Config)

from app import routes

查看剛才配置的密鑰是什么：

(venv) [root@python blog]# python3
Python 3.9.0 (default, Oct 16 2020, 10:57:11)
[GCC 4.8.5 20150623 (Red Hat 4.8.5-39)] on linux
Type "help", "copyright", "credits" or "license" for more information.
 >>>

2.2用戶登錄表單

Flask-WTF擴展使用Python類來表示Web表單。表單類只是將表單的字段定義為類變量。

再次根據SoC（關注點分離原則），新建一個forms.py模塊來存放Web表單類。在此，定義一個用戶登錄表單，要求用戶輸入用戶名、密碼，還包含“Remember Me”復選框、提交按鈕。
app/forms.py：用戶登錄表單

from flask_wtf import FlaskForm        #從flask_wtf包中導入FlaskForm類
from wtforms import StringField,PasswordField,BooleanField,SubmitField       #導入這些類
from wtforms.validators import DataRequired 

class LoginForm(FlaskForm):    
					username = StringField('Username', validators=[DataRequired()])    
					password = PasswordField('Password', validators=[DataRequired()])    
					remember_me = BooleanField('Remember Me')
					submit = SubmitField('Sign In')

在Flask生態下，Flask擴展一般都使用flask_\這樣的命名約定作為在模塊中頂級導入的符號。在這個情況下，Flask-WTF的所有符號都在flask_wtf下，這也是FlaskForm基類在app/forms.py頂部導入的地方。

from wtforms import StringField,PasswordField,BooleanField,SubmitField

這條語句表示：這個用戶登錄表單的字段類型的4個類是直接從WTForms包導入的，因為Flask-WTF擴展是不提供自定義（字段類型？）版本。對于每個字段，將在LoginForm類中將對象創建為類變量。每個字段都有一個描述或標簽作為第一個參數。

在某些字段中看到的可選參數validators將驗證行為附加到字段中，如用戶名、密碼肯定是需要進行驗證的。DataRequired驗證器只是簡單地檢查該字段不會提交為空。當然還有其他的驗證器可用。

2.3用戶登錄-表單模板

有了上一步的登錄表單，接下來得將表單添加到HTML模板中，讓其在網頁上呈現。
LoginForm類中定義的字段知道如何將自己渲染為HTML。
app/templates/login.html：用戶登錄表單模板

{% extends "base.html" %}
{% block content %}    
  <h1>Sign In</h1>
 			<form action="" method="post" novalidate>
        {{ form.hidden_tag() }}
				<p>
         {{ form.username.label }}<br>
          {{ form.username(size=32) }}
            </p>
				<p>
              {{ form.password.label }}<br>
              {{ form.password(size=32) }}
          </p>
					<p>
            {{ form.remember_me() }}
            {{ form.remember_me.label }}
							</p>
						<p>
                {{ form.submit() }}
             </p>
					</form>
{% endblock %}

這個用戶登錄表單模板使用了extends繼承語句繼承base.html模板，以確保一致的布局，即基礎模板包含了所有頁面的頂部導航欄。

在此的用戶登錄表單模板期望從LoginForm類實例化的表單對象作為參數給出，這個參數將由登錄視圖函數（目前還未編寫）發送。

以下將講述HTML知識，上述這段HTML代碼中：<form>標簽用作Web表單的容器。
其中action屬性表示用于告知瀏覽器當用戶在表單中輸入信息提交時應使用的URL。該屬性設置為空字符串時，表單將提交到當前位于地址欄的URL，即在頁面上呈現表單的URL。
method屬性用于指定在將表單提交到服務器時應使用的HTTP請求方法。默認情況下，是通過GET請求發送它。但幾乎在所有情況下，使用POST請求會獲得更好的用戶體驗，因為此類請求可在請求正文中提交表單數據，GET請求將表單字段添加到URL，會讓瀏覽器地址欄變得混亂。
novalidate屬性用于告知瀏覽器不對此表單中的字段運用驗證，這有效地將此任務留給服務器中運行的Flask應用程序。當然，使用novalidate完全是可選的，但對于第一種形式，設置它是很重要的，因為這將允許在本章后面的測試服務器端驗證。
form.hidden_tag()這個模板參數生成一個隱藏字段，其中包括用來防止CSRF攻擊的令牌。要使表單受保護，需要做的是包含此隱藏字段，并在Flask配置中定義的SECRET_KEY變量。
寫過HTML Web表單的同學可能會發現這個模板中沒有HTML字段，這是因為表單對象中的字段知道如何將自己呈現（渲染）為HTML，需要做的就是{ form.<field_name>.label }需要的字段標簽、{ form.<field_name>() }需要的字段。對于需要其他HTML屬性的字段，可將這些屬性作為參數傳遞。此模板中的用戶名、密碼字段將size作為參數添加到<input>這個HTML標簽作為屬性。這還是可將CSS類、或ID附加到表單字段的方法。

2.4用戶登錄-表單視圖

在編寫完上一步的用戶登錄表單模板后，想要在瀏覽器中看到此表單的最后一步是：在應用程序中編寫一個它的視圖函數，用于渲染該模板。

因此，編寫一個映射到/login URL的視圖函數login()，并將其傳遞給模板進行渲染。在routes模塊中增加代碼：

app/routes.py：用戶登錄視圖函數

from flask import render_template
from app import app
from app.forms import LoginForm

#...
 
@app.route('/login')
def login():
				form = LoginForm()          #表單實例化對象
        return render_template('login.html', title='Sign In', form=form)

上述視圖函數很簡單，從forms.py模塊中導入LoginForm類，然后實例化該類，最后將其發送到模板。form=form，return中將form實例對象賦值給form變量，這將獲得表單字段所需的全部內容。

為了便于訪問登錄表單，在基礎模板中改進，即在導航欄中包含指向它的鏈接：
app/templates/base.html：導航欄中增加登錄鏈接

<div>   
  	Microblog:    
      			<a href="/index">Home</a>
						<a href="/login">Login</a>
</div>

此刻，運行應用程序就可瀏覽器中查看該表單了。效果：圖略

2.5接收表單數據

嘗試點擊上述“Sign In”提交按鈕，瀏覽器將出現405錯誤“Method Not Allowed”。圖略

在上一步中，用戶登錄的視圖函數執行了一半的工作，即可在網頁上顯示表單。但它沒有處理用戶提交的數據的邏輯。這是Flask-WTF讓這項邏輯處理變得非常簡單的優勢。更新用戶登錄視圖函數代碼，它接受、驗證用戶提交的數據：
app/routes.py：接收登錄憑據

from flask import render_template,flash,redirect 
@app.route('/login',methods=['GET','POST'])
def login():
				form = LoginForm()
				if form.validate_on_submit():
          				flash('Login requested for user {},remember_me={}'.format(form.username.data,form.remember_me.data))
									return redirect('/index')
				return render_template('login.html',title='Sign In',form=form)

在@app.routes()裝飾器中參數methods作用是：告訴Flask這個視圖函數接受GET和POST請求方法，覆蓋默認值（即只接受GET請求）。HTTP協議中，GET請求是將信息返回給客戶端（如瀏覽器）的請求，到目前為止，該應用程序中的所有請求都屬于這種類型；POST 請求通常在瀏覽器上服務器提交表單數據時使用。上述出現“Method Not Allowed”，是因為瀏覽器嘗試發送POST請求，而應用程序沒有配置去接受它。

form.validate_on_submit()方法完成所有表單處理工作。當瀏覽器發送GET接收帶有表單的網頁請求時，此方法將返回False，此時函數會跳過if語句并直接在函數的最后一行呈現模板。
當用戶在瀏覽器按下提交按鈕時，瀏覽器發送POST請求，form.validate_on_submit()將收集所有數據，運行附加到字段的所有驗證器，如果一切正常，它將返回True，表明數據有效且可由應用程序處理。但如果至少有一個字段未通過驗證，則函數就會返回False，接著就像上述GET請求那樣。
當form.validate_on_submit()返回True，這個登錄視圖函數將調用兩個函數，分別是flash()、redirect()，均從flask包導入的。
flash() 用于向用戶顯示消息，如讓用戶知道某些操作是否成功。目前為止，將使用其機制作為臨時解決方案，因為暫無用戶登錄未真實所需的基礎結構，此時只是顯示一條消息用于確認應用程序已收到憑據。
redirect()用于指示客戶端（瀏覽器）自動導航到作為參數給出的其他頁面（如上述代碼中的/index頁面，即重定向到應用程序的/index頁面）。

當調用flash()函數時，Flask會存儲該消息，但閃爍的消息不會神奇地出現在Web頁面中。應用程序的模板需要以適用于站點布局的方式呈現/渲染這些閃爍的消息。因此，將這些消息添加到基礎模板中，以便所有模板都繼承此功能。更新基礎模板：
app/templates/base.html：基礎模板中的閃爍消息

<html>    
  <head>
  {% if title %}
<title>{{ title }} - Microblog</title>
	{% else %}
    <title>Welcome to Microblog</title>
  {% endif %}
    </head>
   <body>
    	<div>
      			Microblog:
              <a href="/index">Home</a>
   						<a href="/login">Login</a>
   			</div>
   			<hr>
      {% with messages = get_flashed_messages() %}
      {% if messages %} 
        <ul>
          {% for message in messages %}
       					<li>{{ message }}</li>
    			{% endfor %}
          </ul>
          {% endif %}
          {% endwith %}
          {% block content %}
          {% endblock %}
    </body>
   </html>

上述代碼中，使用with結構將調用get_flashed_messages()的結果分配給變量messages，都在模板的上下文。這個get_flashed_messages()函數來自Flask，并返回flash()之前已注冊的所有消息的列表。接著if語句判斷messages是否具有某些內容，在這種情況下，一個ul標簽被渲染成每個消息作為一個li標簽列表項。而這種渲染風格看起來不太好，但Web應用程序樣式化的主題將在稍后出現。

這些閃爍的消息的一個有趣屬性是：一旦通過get_flashed_messages()請求它們，它們就會從列表中刪除，因此它們在flash()調用后只出現一次。

運行程序，再次測試表單是如何工作的。確保將用戶名或密碼字段為空來提交表單，以查看DataRequired驗證器如何暫停提交過程。

用戶名或密碼為空時提交表單，網頁沒反應。都不為空時，隨意輸入。
圖略

點擊Sign in按鈕后，倒是出現了一條消息：Login requested for user 123456@qq.com，remember_me=Flase
圖略

2.6增強字段驗證

附加到表單字段的驗證器可防止無效數據接受到應用程序中。應用程序處理無效表單輸入的方式是重新顯示表單，讓用戶進行必要的更正。

當提交無效數據時，卻沒有明顯提示用戶提交的數據有問題，只是重新返回表單，這將影響用戶體檢。因此，現在的任務是：通過在驗證失敗的每個字段傍邊增加有意義的錯誤提示來改善用戶體驗。

實際上，表單驗證器已經生成了這些描述性錯誤消息，因此，缺少的是在模板中用于渲染/呈現它們的一些額外邏輯。在用戶登錄模板的用戶名、密碼字段中添加字段驗證消息：更新代碼
app/templates/login.html：提示字段驗證錯誤消息

{% extends "base.html" %}
{% block content %}
  <h1>Sign In</h1>
 				<form action="" method="post" novalidate>
          {{ form.hidden_tag() }}
						<p>
                  {{ form.username.label }}<br>
                   {{ form.username(size=32) }}<br>
                   {% for error in form.username.errors %}
                    <span style="color:red;">[{{ error }}]</span>
										{% endfor %}
              </p>
               <p>
                    {{ form.password.label }}<br>
                    {{ form.password(size=32) }}<br>
                    {% for error in form.password.errors %}
                    <span style="color:red;">[{{ error }}]</span>
										{% endfor %}
                 </p>
                  <p>
                   {{ form.remember_me() }}
                   {{ form.remember_me.label }}
										</p>
										<p>
                      {{ form.submit() }}
                     </p> 
</form>
{% endblock %}

上述代碼中，只是在用戶名、密碼字段之后添加for循環，以紅色字體消息渲染錯誤消息。一般規則下，任何附加驗證器的字段都會通過form.<field_name>.errors添加錯誤消息。這將是一個列表，因為字段可以附加多個驗證器，并且多個可能提供錯誤消息提示給用戶。

如果嘗試提交空用戶名或密碼的表單，將看到紅色錯誤提示，效果：圖略

2.7生成URL

用戶登錄表單現在比較完整了，下面將學習在模板包含鏈接和重定向的方法。例：基礎模板中的當前導航欄

<div>     
  Microblog:
    <a href="/index">Home</a>
		<a href="/login">Login</a>
</div>

登錄視圖函數還定義了傳遞給redirect()函數的鏈接：

@app.route('/login', methods=['GET', 'POST'])
def login():
				form = LoginForm()
				if form.validate_on_submit():
        # ...
        return redirect('/index')
					# ...

直接在模板、源文件中編寫鏈接的一個問題是：如果將來某天要重新組織鏈接，將不得不修改整個應用程序的這個鏈接，搜索、替換。

為更好地控制這些鏈接，Flask提供了一個名為 url_for()函數，它使用URL的內部映射到視圖函數來生成URL。例：url_for('login')返回/login；url_for('index')返回/index。url_for()中的參數就是端點名稱，也就是視圖函數的名字。

使用函數名稱而不是URL的優點：URL比視圖函數名稱更可能發生變化；某些URL很可能包含動態組件，手動生成這URL需要連接多個元素，這極易出錯，而url_for()能生成這些復雜的URL。

因此，今后每次應用程序要生成URL時，都使用url_for()。
更新基礎模板中的代碼：
app/templates/base.html：使用url_for()進行鏈接

...    
  <div>
  Microblog:
    <a href="{{ url_for('index') }}">Home</a>
     <a href="{{ url_for('login') }}">Login</a>
    </div>
       ...

更新login()視圖函數中的代碼：
app/routes.py：對鏈接使用url_for()函數

from flask import render_template, flash, redirect, url_for 

# ...
  
@app.route('/login', methods=['GET', 'POST'])

def login():   
				form = LoginForm()
				if form.validate_on_submit():
        # ... 
        return redirect(url_for('index'))
				# ...

目前為止，項目結構：

了使用模板語言和 CSS 框架來美化表單數據展示界面之外，還可以使用一些 JavaScript 庫和框架來為表單添加更多的交互和動態效果。下面介紹一些常用的 JavaScript 庫和框架：

jQuery：是一個快速、簡潔的 JavaScript 庫，提供了豐富的操作 HTML 文檔、處理事件、發送 Ajax 請求等功能，可以大大簡化 JavaScript 編程工作。
Vue.js：是一個輕量級、漸進式 JavaScript 框架，專注于構建用戶界面。它采用組件化開發模式，可以將表單拆分成多個小組件來開發和管理。
React：是一個由 Facebook 開發的 JavaScript 庫，用于構建高性能、可擴展的用戶界面。它使用虛擬 DOM 技術，可以快速更新界面并減少 Web 應用程序的加載時間。
AngularJS：是一個由 Google 開發的 JavaScript 框架，用于構建動態 Web 應用程序。它使用 MVC 架構模式，可以將表單數據和界面進行分離，從而實現更好的代碼組織和管理。

這些 JavaScript 庫和框架都具有不同的特點和優勢，可以根據項目需求和開發者的技能水平選擇合適的工具和技術來開發表單應用程序。

同時，還需要注意在使用 JavaScript 庫和框架時，要遵循良好的編程習慣和安全性要求，避免出現潛在的安全漏洞和性能問題。例如，要避免 XSS 攻擊、CSRF 攻擊等 Web 安全問題，并合理使用緩存技術、壓縮代碼、異步加載等優化方法，提高 Web 應用程序的性能和響應速度。

還可以使用一些表單美化工具和插件來為表單添加更多的樣式和效果。下面介紹一些常用的表單美化工具和插件：

Bootstrap Form Helpers：是一個基于 Bootstrap 的表單美化插件，提供了多種 UI 組件和樣式，例如日期選擇器、顏色選擇器、下拉框等，可以大大簡化表單開發工作。
jQuery Form Styler：是一個 jQuery 插件，可以將原生 HTML 表單元素轉換成美觀且易于操作的 UI 組件，例如滑塊、選擇器、復選框等，支持自定義皮膚和主題。
Select2：是一個功能強大的選擇框插件，支持搜索、多選、分組等高級功能，可以大大提升表單的交互效果和用戶體驗。
Chosen：也是一個選擇框插件，支持自動完成、多選、禁用等功能，具有輕量級和易用性的特點。

這些表單美化工具和插件都具有不同的功能和特點，可以根據項目需求和開發者的喜好選擇合適的工具和技術來美化表單應用程序。

--------------------下面我來詳細介紹一下樣例代碼。-------------------

首先是 user_info.html 模板代碼：

<!-- user_info.html -->

<h1>User Information:</h1>

<ul>
    <li><strong>Username:</strong> {{ user.username }}</li>
    <li><strong>Email:</strong> {{ user.email }}</li>
    <li><strong>First Name:</strong> {{ user.first_name }}</li>
    <li><strong>Last Name:</strong> {{ user.last_name }}</li>
</ul>

這個模板簡單地將表單數據渲染為一個無序列表，并使用了 Django 的模板語言來引用表單數據字段。例如，{{ user.username }} 引用了表單數據中的用戶名字段。同時，我們使用了 HTML 和 CSS 來設置標記和樣式來美化數據展示界面。

然后是 user_info_bootstrap.html 模板代碼：

<!-- user_info_bootstrap.html -->

<div class="panel panel-default">
    <div class="panel-heading"><h3 class="panel-title">User Information:</h3></div>
    <div class="panel-body">
        <dl class="dl-horizontal">
            <dt>Username:</dt>
            <dd>{{ user.username }}</dd>
            <dt>Email:</dt>
            <dd>{{ user.email }}</dd>
            <dt>First Name:</dt>
            <dd>{{ user.first_name }}</dd>
            <dt>Last Name:</dt>
            <dd>{{ user.last_name }}</dd>
        </dl>
    </div>
</div>

這個模板使用 Bootstrap 的面板和橫向列表組件來美化表單數據展示界面。通過使用 Bootstrap，我們可以為表單添加豐富的樣式和效果，使其看起來更加現代和專業。

最后是 user_info_vue.html 模板代碼：

<!-- user_info_vue.html -->

<div id="app">
    <h1>User Information:</h1>
    <ul>
        <li><strong>Username:</strong> {{ user.username }}</li>
        <li><strong>Email:</strong> {{ user.email }}</li>
        <li><strong>First Name:</strong> {{ user.first_name }}</li>
        <li><strong>Last Name:</strong> {{ user.last_name }}</li>
    </ul>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            user: {
                username: 'JohnDoe',
                email: 'johndoe@exemple.com',
                first_name: 'John',
                last_name: 'Doe'
            }
        }
    })
</script>

這個模板使用了 Vue.js，將表單數據渲染為一個無序列表，并使用了 Vue.js 的數據綁定功能來實現動態更新。在這個示例中，我們不需要從服務器加載表單數據，而是直接在客戶端定義了一個模擬數據。Vue.js 通過將數據綁定到 HTML 元素上，可以自動更新界面，并提供了方便的開發工具和調試方法，幫助我們快速構建復雜的用戶界面。

總之，以上三個模板代碼都使用了不同的技術和框架來展示表單數據。每種技術和框架都有其特點和優勢，可以根據項目需求和開發者的技能水平選擇合適的技術和工具來開發表單應用程序。無論我們使用何種技術和框架，都需要注意編程規范和安全防范措施，提高應用程序的質量和可靠性。

--------------------樣例代碼--------------

當我們展示表單數據時，需要對數據進行適當的格式化和排版，以確保數據的可讀性和美觀性。可以使用 Django 提供的模板語言來處理表單數據，并選擇合適的 HTML 和 CSS 樣式來呈現數據。

下面是一個簡單的表單數據展示示例，展示了一個用戶信息表單的數據：

<!-- user_info.html -->

<h1>User Information:</h1>

<ul>
    <li><strong>Username:</strong> {{ user.username }}</li>
    <li><strong>Email:</strong> {{ user.email }}</li>
    <li><strong>First Name:</strong> {{ user.first_name }}</li>
    <li><strong>Last Name:</strong> {{ user.last_name }}</li>
</ul>

在這個模板中，我們使用了 Django 的模板語言來引用表單數據字段。例如，{{ user.username }} 引用了表單數據中的用戶名字段。同時，我們使用了 HTML 和 CSS 來設置標記和樣式來美化數據展示界面。

如果您想要進一步美化表單數據展示界面，可以使用第三方 CSS 框架，例如 Bootstrap、Semantic UI 等，來為表單添加更多的樣式和效果。下面是一個使用 Bootstrap 美化的示例代碼：

<!-- user_info_bootstrap.html -->

<div class="panel panel-default">
    <div class="panel-heading"><h3 class="panel-title">User Information:</h3></div>
    <div class="panel-body">
        <dl class="dl-horizontal">
            <dt>Username:</dt>
            <dd>{{ user.username }}</dd>
            <dt>Email:</dt>
            <dd>{{ user.email }}</dd>
            <dt>First Name:</dt>
            <dd>{{ user.first_name }}</dd>
            <dt>Last Name:</dt>
            <dd>{{ user.last_name }}</dd>
        </dl>
    </div>
</div>

在這個模板中，我們使用了 Bootstrap 的面板和橫向列表組件來美化表單數據展示界面。使用 Bootstrap 可以為表單添加豐富的樣式和效果，使其看起來更加現代和專業。

在線咨詢

上一篇：HTML DIV+CSS 命名規范大全
下一篇：我是如何在 Go 中構建 Web 服務的

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商