028、HTML 標簽3表單標簽插入組件

来源:https://www.cnblogs.com/-nbloser/archive/2018/11/10/9937784.html
-Advertisement-
Play Games

內容:表單標簽插入組件(經常使用)############################################################## 如果這些值需要提交到服務端的,每個組件的屬性都需要name######################################### ...


內容:表單標簽插入組件(經常使用)
##############################################################

form表單標簽和input組件
<form>
    用戶名稱:<input type="text" name="username" value="hehe" /><br/>
    輸入密碼:<input type="password" name="psw" /><br/>
    選擇性別:<input type="radio" name="sex" value="nan" /><input type="radio" name="sex" value="nv" checked="checked"/><br/>
    選擇技術:<input type="checkbox" name="tech" value="java" />JAVA
            <input type="checkbox" name="tech" value="html" />HTML
            <input type="checkbox" name="tech" value="css" />CSS<br/>
    一個按鈕:<input type="button" value="有個按鈕" onclick="alert('有個按鈕,我彈!')"/><br/>
    隱藏組件:<input type="hidden" name="zhangsan" value="20"/><br/>        
    選擇文件:<input type="file" name="file" /><br/>
    圖片組件:<input type="image" src="1.jpg" /><br/>
    
    選擇國家:
    <select name="country">
        <option value='none'>--選擇國家--</option>
        <option value="cn" selected="selected">中國</option>
        <option value="usa">美國</option>
        <option vaue='en'>英國</option>
    </select>
    <br/>
    個人介紹:<textarea rows="4" cols="20"></textarea>
    <input type="submit" value="提交"/><input type="reset" value="恢復預設"/>

</form>


如果這些值需要提交到服務端的,每個組件的屬性都需要name




####################################################################################
瀏覽器兩種提交方式
以下get和post提交數據來自代碼
<!--
    form標簽中的action用於明確目的地。 method屬性用於明確提交的方式。
    方式有兩種 get post。
    
    get提交的數據:
    地址欄:http://192.168.1.223:9090/?user=abc&psw=12&repsw=12&sex=nan&tech=java&country=cn
    
    GET /?user=abc&psw=12&repsw=12&sex=nan&tech=java&country=cn HTTP/1.1
    Accept: application/x-shockwave-flash, image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/x-ms-xbap, application/x-ms-application, */*
    Accept-Language: zh-cn
    Accept-Encoding: gzip, deflate
    User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET4.0C; .NET4.0E)
    Host: 192.168.1.223:9090
    Connection: Keep-Alive
    
    
    
    post提交:
    地址欄:http://192.168.1.223:9090/
    
    POST / HTTP/1.1
    Accept: application/x-shockwave-flash, image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/vnd.ms-excel, application/vnd.ms-powerpoint, application/msword, application/xaml+xml, application/x-ms-xbap, application/x-ms-application, */*
    Accept-Language: zh-cn
    Content-Type: application/x-www-form-urlencoded
    Accept-Encoding: gzip, deflate
    User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET4.0C; .NET4.0E)
    Host: 192.168.1.223:9090
    Content-Length: 56
    Connection: Keep-Alive
    Cache-Control: no-cache
    
    user=abcd&psw=123&repsw=123&sex=nv&tech=html&country=usa
    
    
    GET和POST的區別:
    區別1:地址欄是否顯示信息。
        GET提交,將提交的數據顯示在地址欄。
        POST提交,提交數據不顯示在地址欄。
        
    區別2:敏感信息是否安全。
        GET提交,提交敏感信息不安全。
        POST提交,提交敏感信息安全。
        
    區別3:數據的體積。
        GET提交,信息存儲到地址欄,存儲的信息體積有限。
        POST提交,可以提交大體積數據信息。
    
    區別4:提交信息的http封裝形式不同。
        GET提交,將提交信息封裝到了請求行。
        POST提交,將提交信息封裝到了請求體。
        
        
    綜上所述:表單提交,建議使用POST.
    
    
    
    問題1:如果表單加入了增強型的校驗(只有所有選項都符合規則的情況下,才可以提交)
        這時,服務端收到數據後,還需要校驗嗎?
        需要,因為客戶端有可能避開校驗,提交錯誤的數據到服務端,所以為了安全性,服務端必須做校驗。
        
        
    和服務端交互有三種方式:
    1,地址欄輸入。get
    2,超鏈接。get
    3,表單。get post
    
    問題2:服務端如果進行校驗,頁面還需要做校驗嗎?
        需要,為了減輕服務端的壓力,同時為了增強用戶的體驗效果。
    
     -->



#############################################
加入表格標簽,好看,下麵實現簡單提交

<body>
<form action="127.0.0.1:8080" method="get">
    <table border="1" bordercolor="blue" width="700px" cellspacing="0" cellpadding="10">
        <tr>
            <th colspan="2">用戶註冊</th>
        </tr>
        <tr>
            <th>用戶名稱:</th>
            <td><input type="text" name="usename"></td>
        </tr>
        <tr>
            <th>輸入密碼:</th>
            <td><input type="password" name="pwd"></td>
        </tr>
        <tr>
            <td>選擇性別:</td>
            <td><input type="radio" name="sex" value="male"/><input type="radio" name="sex" value="female"></td>
        </tr>
        <tr>
            <td>選擇技術:</td>
            <td><input type="checkbox" name="tech" value="java">java
                <input type="checkbox" name="tech" value="HTML">HTML
                </td>
        </tr>
        <tr>
            <td>一個按鈕</td>
            <td><input type="button" value="按鈕" onclick="alert('love')"></td>
        </tr>
        <tr>
            <th colspan="2"><input type="submit" value="提交"></th>
        </tr>
    </table>

</form>
</body>

 

##簡單伺服器用於執行上面的提交:

public static void main(String[] args) throws IOException
{
    ServerSocket ss = new ServerSocket(8080);
    Socket s = ss.accept();
    InputStream is = s.getInputStream();
    byte[] buf = new byte[1024];
    int len = is.read(buf);
    String str = new String(buf,0,len);
    System.out.println(str);
    
    PrintWriter out = new PrintWriter(s.getOutputStream(),true);
    out.println("<font color='blue' size='7'>註冊成功</font>");
    
    s.close();
    ss.close();
}

 

 

############################################################################
其他標簽

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<body>
<b>演示</b><i>一下</i><u>其他</u><strong>標簽</strong>。語義化
X<sub>2</sub>  X<sup>2</sup>
<marquee behavior="slide" direction="down">哇,我會飛啦!</marquee>
<pre>
class Demo
{
    public static void main(String[] args)
    {
        System.out.println("hello");
    }
}
</pre>
</body>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • mysql資料庫連接異常問題(總結) 1.1 前言 最近項目由1個數據源增加至了3個數據源(連接池使用C3P0),結果各種奇葩的資料庫連接問題接踵而至,為防止將來再次遇到同樣的問題不犯同樣錯誤,現總結如下。 1.2 An attempt by a client to checkout a Conne ...
  • 什麼是事務 事務是現代資料庫的核心概念之一,它表示資料庫一系列操作的集合。這些操作必須在一個事務當中,要麼全部執行成功,要麼全部不執行。 ACID原則 原子性(Atomicity) 原子性是指事務包含的所有操作要麼全部成功,要麼全部失敗回滾,因此事務的操作如果成功就必須要完全應用到資料庫,如果操作失 ...
  • 歡迎大家前往 "騰訊雲+社區" ,獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "騰訊雲資料庫 TencentDB" 發表於 "雲+社區專欄" 今天我分享的主題內容大概是兩部分,最主要的還是小游戲和小程式,第一部分就是跟大家分享下我們在現網運營中服務小游戲以及爆款小游戲積累的經驗。在現網運維中我們做了一 ...
  • 作者:天山老妖S 鏈接:http://blog.51cto.com/9291927 一、事務簡介 1、事務簡介 事務(Transaction)是指作為單個邏輯工作單元執行的一系列操作。 2、事物的特效 A、原則性(Atomicity) 表示組成一個事物的多個資料庫操作是一個不可分隔的原子單元,只有所 ...
  • 分散式事務創建註意事項 指定一個由 Transact-SQL 分散式事務處理協調器 (MS DTC) 管理的 Microsoft 分散式事務的起點。 執行 BEGIN DISTRIBUTED TRANSACTION 語句的 SQL Server 資料庫引擎的實例是事務創建者,並控制事務的完成。 當為 ...
  • 歡迎大家前往 "騰訊雲+社區" ,獲取更多騰訊海量技術實踐乾貨哦~ 本文由 "goo" 發表於 "雲+社區專欄" 與生活緊密相連的音視頻,為何有那麼多格式?直播、點播以及即時視頻其中又有怎樣的機制支撐?面對紛繁複雜的音視頻知識,應該如何學起?快速探索,音視頻技術不再神秘。 前言 面對一門技術,我們熟 ...
  • Error:Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.> java.lang.RuntimeException: java.lang.RuntimeException: ...
  • 譯文開始 函數式編程是一種編程風格,這種編程風格就是試圖將傳遞函數作為參數(即將作為回調函數)和返回一個函數,但沒有函數副作用(函數副作用即會改變程式的狀態)。 有很多語言採用這種編程風格,其中包括JavaScript、Haskell、Clojure、Erlang和Scala等一些很流行的編程語言。 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...