Python圖形界面添加radio button單選

Python圖形界面添加radio button單選按鈕

現代碼

 1 # radiobuttons globals
 2 COLOR1="Blue"
 3 COLOR2="Gold"
 4 COLOR3="Red"
 5 
 6 # radiobutton callback
 7 def radCall():
 8     radSel=radVar.get()
 9     if      radSel==1: win.configure(background=COLOR1)
10    elif   radSel==2: win.configure(background=COLOR2)
11    elif   radSel==3: win.configure(background=COLOR3)
12 
13 # create three radionbuttons
14 radVar=tk.IntVar()
15 rad1=tk.Radiobutton(win, text=COLOR1, variable=radVar, value=1, command=radCall)
16 rad1.grid(column=0, row=5, sticky=tk.W)
17 
18 rad2=tk.Radiobutton(win, text=COLOR2, variable=radVar, value=2, command=radCall)
19 rad2.grid(column=1, row=5, sticky=tk.W)
20 
21 rad3=tk.Radiobutton(win, text=COLOR3, variable=radVar, value=3, command=radCall)
22 rad3.grid(column=2, row=5, sticky=tk.W)

運行結果

設置背景色為藍色

設置背景色為黃色

設置背景色為紅色

工作原理

#2/3/4 創建模塊級全局變量，在創建單選框按鈕和設置背景顏色時用到。

#7 回調函數，根據用戶選擇設置窗口背景顏色。

#14 聲明變量radVar為適用于tkinter的IntVar()類型，為三個單選按鈕所共用。

#15-22 創建三個單選按鈕，設置按鈕標簽顯示內容，綁定按鈕變量，設置數值及命令等。

因篇幅原因，未附上完整代碼，如需參考其余代碼及注釋，敬請移步至之前文章；

或私信獲取完整代碼源文件，謝謝。

敬請關注更多Python GUI學習內容分享：

節課，我們實現表單中的單選和多選功能。

對于所有人而言，每天都會面臨各種各樣的選擇。例如：1000W和北大錄取通知書我該選哪一個？我是去考研還是去工作？地上有一張50元和一張100元，我要撿哪一張？

在HTML中如何實現單選和多選呢?

我們可以通過在 form 標簽里，嵌入 input 標簽，通過設置 input 標簽的 type 屬性值來實現單選和多選。

單選，type 的取值為 radio，radio 是收音機的意思，因為我們收聽節目只能調到一個波段，因此用它來表示單選按鈕，就是讓用戶在有限的選擇中只選擇一個。

多選，type 取值為 checkbox，譯為復選框，也叫多選框，讓用戶在有限的選擇中選擇更多的選項。

我們來實現一個單選和多選的功能。

打開編輯器，新建一個 radio_checkbox.html 文件，自動補全基礎代碼，在body標簽內部編寫一個 form 表單標簽，在 form 標簽里面添加文本 選擇性別： (冒號讀出來) ，緊接著添加一個 input 標簽，設置標簽的 type 屬性值為 radio，后面添加文本 "男"，回車換行。

使用同樣的方法，再添加一個 input 標簽，設置標簽的 type 屬性值為 radio，后面添加文本 "女"。保存。

用瀏覽器打開頁面，一組性別選擇的單選框顯示在頁面中。使用鼠標點擊單選控件，這時你會發現單選框出現了問題，性別居然能選擇多個?

在這里需要提醒大家的是：

單選框控件必須成組使用才有意義，并且每組至少需要兩個單選框。

而“組”是通過 name 屬性來建立的，凡是 name 值相同的就是一組。

同組的單選框，只有一個會處在選中狀態，其他的會自動呈現為未選中狀態。

因此，如果沒有給單選框設置 name 屬性，默認每個單選框自成一組，一旦選中這個單選框，要想通過點擊來解除選中狀態就做不到了。

回到編輯器，為兩個 input 單選框定義 name 屬性，值設置為 gender。保存。

回到瀏覽器，刷新。當我們再次點擊性別選框的時候，單選的效果實現了。

返回編輯器，在單選框結尾處添加一個 br 標簽。回車換行。

輸入文本：前端基礎包括：在文本后輸入 input 中括號 type 等于 checkbox，input[type=checkbox] 按下 tab 鍵，創建三個多選框控件。

分別在每一個 input 復選框后面添加文本 HTML、CSS、JavaScript。保存。

回到瀏覽器，刷新，包含三個選項的復選框做好了。鼠標點擊復選框，出現了對鉤，表示已經選中，再次點擊選中的復選框，取消選擇。

我們再刷新一下頁面，發現單選框和多選框在默認情況下，都沒有選中。能不能在打開頁面的時候，性別的男和前端基礎的HTML，默認選中呢？

單選框和多選框默認選中效果，都可以通過定義 checked 屬性來實現，它的值只要不為空，任何字符都可以，通常我們會使用 checked 字符串作為它的值。另外，選中和取消選中只有兩個狀態，所以也可以不用定義值，只定義一個屬性名就可以了。

返回編輯器，給第一個單選控件添加 checked 屬性，再給第一個多選控件添加 checked 屬性。保存。

回到瀏覽器，刷新。性別和HTML默認選中了。點擊其他控件，單選多選的功能依然有效。

單選框和多選選框我們就講完了，快自己實現一下吧。

文章配套視頻鏈接點我「鏈接」

讀本文約需要10分鐘，您可以先關注我們，避免下次無法找到。

HTML基礎教程上篇介紹了HTML的基礎知識及一些常用的標簽，本篇文章主要介紹HTML的樣式、表單、Table、框架等內容。下面我們就一起來了解吧！

01 HTML樣式

所有的HTML可以通過設置其style屬性來設置標簽的樣式，下面我們就來演示幾個常用的HTML樣式設置。

1）設置標簽寬度與高度

我們創建一個div標簽，然后設置其高度與寬度，但由于div標簽默認沒有顏色我們看不到效果，所以在設置其高度與寬度時，同時為其設置一個背景顏色，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- 給div寬度設置為一個長寬都為400px的正方形塊，同時背景色代碼塊為#46a6ff -->  
9.   <div style="width: 400px; height: 400px; background-color: #46a6ff;"></div>  
10. </body>  
11. </html>

2）設置字體類型與大小

我們在上面div塊中加入文字，并給加入的文字設置字體類型與大小，同時為其加粗，具體示列如下：

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- font-family是設置字體類型；font-size是設置字體大小；font-weight是給字體加粗  -->  
9.   <div style="width: 400px; height: 400px;  
10.         background-color: #46a6ff; font-family: 'Microsoft YaHei'; font-size: 40px; font-weight: bold">  
11.     我是div塊  
12.   </div>  
13. </body>  
14. </html>

3）設置字體水平與垂直居中

上面我們給div加了字體樣式但并沒有居中，現在我們來看看怎么設置字體居中

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- text-align給文字設置水平居中；line-height將其值設為與height一致，文字內容就可以垂直居中   -->  
9.   <div style="width: 400px; height: 400px;  
10.         background-color: #46a6ff; font-family: 'Microsoft YaHei';  
11.         font-size: 40px; font-weight: bold;  
12.         text-align: center; line-height: 400px">  
13.     我是div塊  
14.   </div>  
15. </body>  
16. </html>

02 HTML Table

在HTML頁面開發時我們經常會用到表格進行數據展示，HTML的表格是由標簽<table>來定義的，每個表格均有若干行（<tr> 標簽定義），每行被分割為若干單元格（由<td> 標簽定義）。表格中常用的標簽與樣式屬性如下：

下面我們創建兩個表格示列，分別設置上述屬性具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   <!-- 表格示列1 -->  
9.   <table border="1" bordercolor="black" width="450" height="100">  
10.      <caption>表格示列1</caption>  
11.      <tr bgcolor="red" > <!-- tr為一行的起始與結束 -->  
12.        <th>Column 1</th> <!-- 表格頭 -->  
13.        <th>Column 2</th>  
14.        <th>Column 3</th>  
15.      </tr>  
16.   
17.     <tr bgcolor="cyan"> <!-- 設置表格背景色 -->  
18.       <td>Data 1</td> <!-- td單元格 -->  
19.       <td>Data 2</td>  
20.       <td>Data 3</td>  
21.     </tr>  
22.   
23.     <tr bgcolor="yellow">  
24.       <td colspan="2">New Data 1</td> <!-- 設置該單元格合并這一行上的兩列 -->  
25.       <td>New Data 2</td>  
26.     </tr>  
27.   </table>  
28.   
29.   <!-- 表格示列2 -->  
30.   <table border="1" bordercolor="black" width="80%" height="100"> <!-- 設置單元格寬與高為百分比 -->  
31.      <caption> 表格示列2</caption>  
32.       <tr bgcolor="red" >  
33.         <th>Column 1</th>  
34.         <th>Column 2</th>  
35.         <th>Column 3</th>  
36.      </tr>  
37.   
38.      <tr>  
39.        <td rowspan="2">Data 1</td> <!-- 設置該單元格合并這一列上的兩行 -->  
40.        <td>Data 2</td>  
41.        <td>Data 3</td>  
42.      </tr>  
43.   
44.      <tr>  
45.       <td>Data 2</td>  
46.       <td>Data 3</td>  
47.      </tr>  
48.   </table>  
49. </body>  
50. </html>

03 HTML表單

HTML 表單是一個包含表單元素的區域，用于搜集不同類型的用戶輸入。HTML表單在我們日常瀏覽網頁時很常見，比如各網站的登錄頁面，就是典型的HTML表單應用。HTML表單常用的標簽元素有如下幾種：

1）Text input：字符輸入框，一般賬戶與密碼輸入都是用的該標簽

2）Text area：文本輸入框，一般需要輸入較多文本內容使用

3）Radio button：單選框

4）Checkbox：多選框

5）Select box：選擇框

6）File select：文件選擇框

7）Buttons：按鈕

表單元素常用的屬性及值設置如下表所示：

結合上表我們創建一個表單示列，按照上表的屬性值進行設置，具體操作如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8. <form>  
9.   <h4>Input輸入框</h4>  
10.   用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="10"><br>  
11.   密碼 : <input type="password" name="user_pass" ><br>  
12.   <h4> Radio單選框:（name值設置時必須一致）</h4>  
13.     <input type="radio" name="r_gender"> Male  
14.     <input type="radio" name="r_gender"> Female  
15.     <input type="radio" name="r_gender" checked> Infant  
16.   <h4> Check box多選框 :（name值設置時必須不一樣）</h4>  
17.     <input type="checkbox" name="c_male" checked> Male  
18.     <input type="checkbox" name="c_female"> Female  
19.     <input type="checkbox" name="c_infant"> Infant  
20.   <h4> Select box :選擇框（單選）</h4>  
21.     <select name="s_box">  
22.       <option value="s_male">Male</option>  
23.       <option value="s_female" selected>Female</option>  
24.       <option value="s_infant">Infant</option>  
25.     </select>  
26.   <h4> Select box :擇框（多選）</h4>  
27.   <!-- 選擇項默認展示4個，其它的選擇內容需要通過鼠標滾動 -->  
28.   <select name="s_box" size="4" multiple>  
29.     <option value="s_male" selected>Male</option>  
30.     <option value="s_female" selected>Female</option>  
31.     <option value="s_infant">Infant 1</option>  
32.     <option value="s_infant" selected>Infant 2</option>  
33.     <option value="s_infant">Infant 3</option>  
34.     <option value="s_infant">Infant 4</option>  
35.   </select>  
36.   <h4> Text文本輸入框</h4>  
37.     <textarea rows="10" cols="80" name="txt_area">文本框  
38.        HTML基礎教程  
39.        表單示列  
40.     </textarea>
41.   </form>
42. </body>
43. </html>

下面我們再創建一個button的表單示列，具體如下

1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <!-- 設置表單提交方式為get, 跳轉的url為"http://www.baidu.com" -->  
10.   <form method="get" action="http://www.baidu.com">  
11.     <h4> Buttons按鈕表單示列</h4>  
12.     用戶名 : <input type="text" name="user_name" size="4" value="成哥" maxlength="16"><br>  
13.     密碼 : <input type="password" name="user_pass" ><br>  
14.     <!-- 點擊在游覽器上方顯示Say Hello -->  
15.     <input type="button" onclick="alert('Hello')" name="b_alert" value="Say Hello"/><br>  
16.     <!-- 點擊跳轉到百度 -->  
17.     <input type="submit" name="b_submit" value="百度走起"/>  
18.     <!-- 點擊重置會重置表單內輸入的內容 -->  
19.     <input type="reset" name="b_reset" value="重置"/><br>  
20.   </form>  
21.   
22. </body>  
23. </html>

04 HTML框架iframe

使用HTML框架可以在同一個瀏覽器窗口中顯示多個頁面，iframe的語法格式如下所示

1. <iframe src="URL">  
2.   <!-- URL指向不同的頁面 -->  
3. </iframe>  
我們現在創建一個iframe框架使用示列具體如下
1. <!DOCTYPE html>  
2. <html>  
3. <head>  
4.   <title>HTML基礎教程</title>  
5.   <meta charset="utf-8" />  
6. </head>  
7. <body>  
8.   
9.   <h4>iframe使用示列一(簡單的iframe使用)</h4>  
10.   <!-- 給iframe顯示區域設置寬度為800，高度為200，同時去掉其邊框 -->  
11.   <iframe src="http://www.baidu.com" width="800" height="200" frameborder="0"></iframe>  
12.   
13.   <br/>  
14.   <br/>  
15.   
16.   <h4>iframe使用示列二(通過點擊指定鏈接在iframe中顯示)</h4>  
17.   <!-- a標簽中的target名稱必須與iframe的name一致都為qq -->  
18.   <a href="http://www.qq.com" target="qq">點擊我在iframe中顯示qq頁面</a>  
19.   <iframe name="qq" width="800" height="200" frameborder="0"></iframe>  
20. </body>  
21. </html>

05 總結

至此我們《HTML基礎教程》就全部講完了，有任何問題都可以在文章后面留言。最后如果喜歡本篇文章不要忘了點贊、關注與轉發哦！

-END-

@IT管理局專注計算機領域技術、大學生活、學習方法、求職招聘、職業規劃、職場感悟等類型的原創內容。期待與你相遇，和你一同成長。

文章推薦：

程序員都必掌握的前端教程之HTML基礎教程（上）

在線咨詢

上一篇：MUI-日期聯動-picker（選擇器）
下一篇：瀏覽器內核大揭秘

您的項目需求

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

整合營銷服務商