html基本標簽表單實現交互原理,單選框,覆選框,下拉框介紹

来源:https://www.cnblogs.com/dhnblog/archive/2020/02/12/12300620.html
-Advertisement-
Play Games

表單是什麼?表單是前端和伺服器做交互的一種機制,表單收集用戶輸入信息,之後發送或者提交給伺服器。用戶在輸入的信息稱之為內容,內容的文本分為普通和密碼型,用戶通過單選框、覆選框、下拉框(也就是下拉菜單)完成內容信息輸入,最後通過提交按鈕發送給伺服器!這裡要講到瀏覽器怎麼發送給伺服器?涉及到http協議... ...


表單是什麼?表單是前端和伺服器做交互的一種機制,表單收集用戶輸入信息,之後發送或者提交給伺服器。用戶在輸入的信息稱之為內容,內容的文本分為普通和密碼型,用戶通過單選框、覆選框、下拉框(也就是下拉菜單)完成內容信息輸入,最後通過提交按鈕發送給伺服器!這裡要講到瀏覽器怎麼發送給伺服器?涉及到http協議,也就是超文本傳輸協議,它是瀏覽器和伺服器通訊的一種機制。模式為:請求——應答,瀏覽器發送請求=>伺服器接收=>自身處理=>結果返回瀏覽器=>瀏覽器根據結果展示頁面給用戶,請求分為GET和POST。下麵用代碼依次展示說明:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>html基本標簽表單實現交互原理,單選框,覆選框,下拉框介紹</title>
 7 </head>
 8 <body>
 9     <form action="" method="POST">
10         <!-- <input type="text">  --><!--如果沒有name值,提交不成功,導航網址會顯示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?-->
11         用戶:<input type="text" name="ueser"><!--文本輸入類型text-->
12         <!--添加name值,提交後,導航網址會顯示file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=111-->
13         <br>
14         密碼:<input type="password" name="password"><!--密碼是password--><!--如果輸入用戶是11,密碼是abc展示為這樣file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=11&password=abc-->
15         <p>這裡涉及到加密問題,瀏覽器傳輸伺服器加密的密文用JS操作處理,後面學習中會聊到的</p>
16         <br>
17         性別:<input type="radio" name="sex" value="boy"><input type="radio" name="sex" value="womnen"><input type="radio" name="sex" value="weizhi">中性
18         <!--radio是單選框,這裡的name值都是一樣的,如果是不一樣的,選擇就是多個了-->
19         <!-- 性別: <input type="radio" name="sex1">男<input type="radio" name="sex">女<input type="radio" name="sex">中性 -->
20         <br>
21         <!-- <input type="checkbox">是這個覆選框,可以選擇多個 -->
22         愛好:<input type="checkbox" name="like" value="meinv">美女<input type="checkbox" name="like" value="car">汽車<input type="checkbox" name="like" value="power">權利
23         <br>
24         <!-- 下拉框select 裡面有選項是option -->
25         城市: 
26         <select name="city">
27             <option name="beijing" value="bj">北京</option>
28             <option name="shanghai" value="sh">上海</option>
29             <option name="guangzhou" value="gz">廣州</option>
30             <option name="shenzhen" value="sz">深圳</option>
31         </select>  
32         <br>
33         <input type="submit"><!--文本提交按鈕submit-->
34         <!--如果這樣就點擊提交,導航欄會出現file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=1&sex=on&like=on&city=%E5%8C%97%E4%BA%AC-->
35     </form>
36 </body>
37 </html>

然後你會驚訝的發現你的愛好和性別展示都是on,沒出來,這是什麼原因了?因為前端瀏覽器給用戶看,會涉及到一個預設值,用value表示,就是說只要和選擇相關就需要有預設值提交給伺服器,這樣我們添加下value值,之前是沒有的,現在在重新輸入下:
瀏覽器的視窗網址就會展示如下:file:///C:/Users/Administrator/Desktop/%E8%9D%89%E5%A3%B30%E5%9F%BA%E7%A1%80%E5%89%8D%E7%AB%AF%E8%AF%BE%E7%A8%8B/1-1.html?ueser=1&password=abc&sex=boy&like=meinv&city=bj

當然這樣你提交的內容,伺服器還是沒辦法接收到,那怎麼辦了?在<form action="">中action=""是一個提交動作,填寫你提交的地址,比方說http://www.dhnblog.com/,註意了這裡需要用到method="",我們的請求分為GET和POST,只需要修改form表單開始標簽

<form action="" method="GET">GET請求<form action="" method="POST">POST請求,它們的區別是GET請求內容展示在導航欄網址中,POST請求在控制台裡面,如下圖所示:
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 什麼是 JavaScript 語言 Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE JavaScript 是一種輕量級的腳本語言。所謂“腳本語言”,指的是它不具備開發操作系統的能力,而是只用來編寫控制其他大型應用程式(比如瀏覽器)的“腳 ...
  • 如果介紹HTML網頁基本標簽的嵌套規則,首先要說的就是元素的分類。元素可以劃分為塊級元素和行級元素,塊級元素是什麼?它可以獨占一行,可以設置寬高度,預設是100%;行級元素與之相反,它的內容決定它的寬高度,至於特殊字元就當成是文字來看!嵌套規則總結如下幾點:1.塊元素可以嵌套行元素2.行元素可以嵌套... ...
  • 什麼是網頁的佈局?網頁佈局就是我們在拿到設計稿後進行切片處理(所謂切圖),然後我們通過DIV+CSS佈局,書寫靜態頁面按照設計稿還原排列,把我們想要實現的功能與內容進行填充!早期的frameset佈局主要書寫管理後臺控制菜單的切換實現局部的刷新,至於頁面的嵌套則是通過iframe ...
  • Electron 和 Vue 都是幹啥的,就不做過多介紹了,可以去官網瞅瞅。下麵總結 Electron+Vue 創建項目,Electron + Vue 創建項目實際上相當於:創建Vue項目 + Electron封裝。 一、創建Vue項目 + Electron封裝 1、創建Vue項目 通過 Vue腳手 ...
  • <script language=javascript> window.onload=function(){ //刷新父頁面 window.opener.location.reload(); } </script> 相關連接 JS 彈出小視窗 ...
  • 面向對象: 對代碼的一種抽象,對外統一提供調用介面的編程思想 對象的屬性:事物自身擁有的東西 對象的方法:事物的功能 對象:事物的一個實例 對象的原型:.prototype -> 記憶體地址 -> 存儲了一個對象 function fn(){ return 1; } alert(fn.prototyp ...
  • 用JS實現簡易計算器 首先創建結構和樣式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 ...
  • 1. Ajax是什麼? 全稱是 asynchronous javascript and xml,是已有技術的組合,主要用來實現客戶端與伺服器端的非同步通信效果(無需重新載入整個網頁的情況下),實現頁面的局部刷新。 通過在後臺與伺服器進行少量數據交換,AJAX 可以使網頁實現非同步更新,用於創建快速動態網 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...