前端開發HTML5——表單標簽

来源:https://www.cnblogs.com/aitiknowledge/archive/2019/09/10/11498410.html
-Advertisement-
Play Games

表單簡介 Form表單主要用於用戶與Web應用程式進行數據的交互，它允許用戶將數據發給web應用程式，網頁也可以攔截數據的發送以便自己使用。form通常由一到多個表單元素組成，這些表單元素是單行/多行文本框，下拉菜單，按鈕，覆選框，單選按鈕，時間表單元素時 一般要配合label標簽，用於描述其目的。 ...


表單簡介

　　Form表單主要用於用戶與Web應用程式進行數據的交互，它允許用戶將數據發給web應用程式，網頁也可以攔截數據的發送以便自己使用。form通常由一到多個表單元素組成，這些表單元素是單行/多行文本框，下拉菜單，按鈕，覆選框，單選按鈕，時間表單元素時 一般要配合label標簽，用於描述其目的。其可用屬性如下。 

　　　　 action　　 用於處理表單信息的應用程式的地址。

　　　　 method 　　　瀏覽器用來提交表單的HTTP方法。

　　　　　　get        對應於Http協議的GET方法，表單數據被附加在uri上，使用"?"分隔 

　　　　　　post     對應於Http協議的POST方法，表單數據包含在HTTP協議的請求報文的體部。

　　　　name 　　設定表單的名稱

　　　　target 　　表示瀏覽器接收到form的提交信息後在哪裡顯示回應。

　　　　　　 _self，_blank，_parent，_top這些值和超鏈接的相同

表單數據的內容類型

　　通過enctype屬性設定表單數據的內容類型

　　　　1. application/x-www-form-urlencoded

　　　　　　在發送前編碼所有字元（預設）使用到的編碼方式：

　　　　　　1）控制項的名稱和值都被轉義，空白字元使用【+】替換，保留的字元一般都是用來實現特定的目的，例如（: / ? ; @ = & 等）。非數字和字母的字元使用%HH（這裡 HH表示兩個十六進位數字，代表該字元的ASCII碼）進行轉換，

　　　　　　2）控制項的"名稱/值"對按照它們在文檔數據流中出現的順序列出來。"名稱""值"使 用"="分割，兩個"名稱/值"之間使用&隔開。

　　　　2. multipart/form-data

　　　　　　不對字元編碼。在使用包含【文件上傳控制項】的表單時，必須使用該值。數據分成多個部分，每個部分代表一個結構良好的控制項，作為文檔數據流的一部分，每一 個部分都按照它們在文檔數據流中出現的順序依次發送到伺服器端，並且，每一部分的邊界不會出現在數據中。每一部分有一個content-desposition標題頭，它的值的格式是： Content-Disposition:form-data;name="myControl"

　　　　3. text/plain

　　　　　　空格轉換為 "+" 加號，但不對特殊字元編碼。

表單組件

　　input組件用於接受來自用戶的數據，其可用屬性如下

　　　　1、type 用於設定組件類型

　　　　　　　　text 單行文本框

　　　　　　　　password 密碼框，輸入的內容將會被遮擋。

　　　　　　　　checkbox 覆選框，必須使用value屬性來描述該組件所提交的值，使用checked屬性預設選 中。

　　　　　　　　radio 單選按鈕，必須使用value屬性來描述該組件所提交的值，使用checked屬性預設 選中。一個單選按鈕組中所有組件都應該具有相同的name值，這樣，每次只能選中按鈕組中的 某一個組件

　　　　　　　　submit 提交按鈕

　　　　　　　　reset 重置按鈕

　　　　　　　　file文件按鈕，該組件用於選中文件系統中的某個文件

　　　　　　　　hidden 隱藏域，該組件不顯示在頁面中，但是其值會被提交。

　　　　　　　　image 圖像按鈕，必須使用src來載入圖片，使用alt來聲明替換文本。

　　　　　　　　button 普通按鈕

　　　　2、name 用於設定組件類型

　　　　3、value 用於設定初始化，可選。 　　　　

　　　　4、checked 單選框，覆選框預設選中屬性

　　　　5、disabled 表示禁用組件，禁用組件的值也不能被提交

　　　　6、size 當前控制項的初始寬度，這個寬度以像素為單位。除非控制項類型是text, password，這時寬度是整數值，表示字元的數目，預設為20

　　　　7、maxlength 指定可以輸入的字元的最大值。適用於控制項類型為text,password。

　　fieldset組件用於在一個web表單中對多個控制項和標簽進行分組

　　　　1、disabled 禁用filedset元素，該屬性會影響的fieldset的子元素

　　　　2、name fieldset元素的名稱

　　　　fieldset的標題由標簽提供

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <fieldset>
            <legend>Title</legend>
            <input type="radio" id="radio">
            <label for="radio">click me</label>
        </fieldset>
    </form>
</body>
</html>

　　input/button按鈕組件用於接受來自用戶的數據，其可用屬性如下

　　　　按鈕控制項

　　　　1、input的type 指定控制項類型

　　　　　　button，submit，reset

　　　　2、input的name 按鈕名稱。

　　　　3、input的value 按鈕所關聯的值，會與name的值一同被提交

　　label組件用於表示某一表單組件的標題 其可用屬性如下

　　　　1、for 與為設定標題的表單組件的ID值一致，上面的代碼實例有

　　select組件用於表示下拉列表或列表，其可用屬性如下

　　　　1、multiple 指定控制項類型 布爾類型的值，表示是否允許多選，如果select元素不包含屬性size和屬性 multiple時，表單類型顯示為菜單（組合框），如果使用了屬性size和屬性multiple中 的任意一個，則表單類型顯示為列表框。

　　　　2、size 顯示的行數 當要表示一個可以滾動的列表時候，size表示同時展示的行數。預設值為0。表 示非列表顯示

　　　　3、disabled 表示禁用組件，禁用組件的值也不能被提交

　　　　4、name 用於指定該組件的名字，會與其option子元素的value值組成鍵值對隨其他表單數據一齊被提交

　　option組件用於表示選項，常包含<select>、<optgroup>中，其可用的屬性如下

　　　　1、disabled 表示禁用組件，禁用組件的值也不能被提交

　　　　2、value 定義控制項的初始值。提交表單時，初始值會被提交給伺服器。

　　　　3、selected 表示該選項預設被選中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="address" id="">
            <option value="北京" disabled>北京</option>
            <option value="上海" selected>上海</option>
            <option value="廣州">廣州</option>
        </select>
    </form>
</body>
</html>

 　　optgroup組件用於表示option的選項組，常包含在<select>中，其可用的屬性如下

　　　　1、disabled 表示禁用組件，禁用組件的值也不能被提交

　　　　2、label 表示選項組的名稱

　　　　3、selected 表示該選項預設被選中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <select name="address" id="">
            <optgroup label="廣東省">
                <option value="廣州">廣州</option>
                <option value="深圳">深圳</option>
            </optgroup>
            <optgroup label="江蘇省">
                <option value="蘇州">蘇州</option>
                <option value="鹽城">鹽城</option>
            </optgroup>
        </select>
    </form>
</body>
</html>

　　textarea組件用於表示多行文本框，沒有value屬性，其值被包含在標簽內 其可用屬性如下

　　　　1、rows 定義文本框的行數

　　　　2、cols 定義文本框的列數

　　　　3、warp 表示是否自動換行

　　　　　　 • off 不自動換行

　　　　　　• hard自動硬回車換行，換行元素一同被傳送到伺服器中

　　　　　　• soft自動軟回車換行，換行元素不會傳到伺服器中

　　　　4、disabled 表示禁用組件，禁用組件的值也不能被提交

　　　　5、readonly 表示該組件只讀，其值依然會被提交

　　　　6、name 用於指定該組件的名字，會隨著其值一同被提交到後臺

新增表單組件

　　progress組件用於表示任務的完成情況，常用於進度條 其可用的屬性如下

　　　　1、max 定義進度元素所要求的任務的工作量，預設值為1

　　　　2、value 定義已經完成的工作量，如果max值為1，該值必須是介於0~1之間的小 數。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="">
        <progress value="70" max="100"></progress>
    </form>
</body>
</html>

　　output 組件用於表示用戶動作產生的結果 其可用的屬性如下

　　　　1、name 定義元素的名稱

　　　　2、for 其他元素的id列表，表明這些元素為計算提供了輸入值(或其他影響)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <form action="" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
        <input type="range" name="b" value="50">+
        <input type="number" name="a" value="10">=
        <output name="result"></output>
    </form>
</body>
</html>

　　meter元素表示規定範圍內的數量值。呈現的效果有一個類似於進度條

　　　　例如：磁碟使用量，某個候選者的投票人數占 總投票人數的比例等

　　　　1、value :在元素中特地表示出來的實際值，該值在min與max之間，如果未指定 ，該值預設為1

　　　　2、min :指定規定範圍時允許使用的最小值，預設為0

　　　　3、max :指定規定範圍時允許使用的最大值，預設為1

　　　　4、low :規定範圍的下限值必須小於或等於high屬性的值

　　　　5、high :規定範圍的上限值（表示較高危險的意思）

　　　　6、optimum :最佳值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>He got a <meter low="69" high="80" max="100" value="70">B</meter>on this exam</p>
</body>
</html>

　　　　datalist組件表示其他控制項可用的值，其值通過<option>作為datalist的子元素存在

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <label for=""> choose a browser from this list:</label>
    <input type="text" name="myBrowser" list="browsers">
    <datalist id="browsers">
        <option value="Chrome">
        <option value="Firefox">
        <option value="Internet Explorer">
        <option value="Opera">
        <option value="Safari">
        <option value="Microsoft Edge">
    </datalist>
</body>
</html>

　　新增表單屬性

　　　　1、type

　　　　　　在H5中，對input的type進行了擴展，可以有更多的取值

　　　　　　　　1、date 日期控制項（年，月，日，不包含時間）

　　　　　　　　2、datetime-local 日期時間控制項

　　　　　　　　3、time 時間控制項

　　　　　　　　4、month 日期插件（年，月）

　　　　　　　　5、week 日期插件（年，周）

　　　　　　　　註意：以上只能被chrome,opera支持

　　　　　　　　6、number 數字控制項（只能輸入數字）

　　　　　　　　7、range 範圍控制項（通過控制條可以調整取值）

　　　　　　　　8、search 搜索控制項，

　　　　　　　　9、tel 電話控制項

　　　　　　　　10、url 地址控制項

　　　　　　　　11、color 顏色控制項

　　　　　　　　12、email email控制項

 


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

-Advertisement-
Play Games
更多相關文章
  • 通過原型繼承理解ES6 extends 如何實現繼承
    前言 第一次接觸到 ES6 中的 class 和 extends 時，就聽人說這兩個關鍵字不過是語法糖而已。它們的本質還是 ES3 的構造函數，原型鏈那些東西，沒有什麼新鮮的，只要理解了原型鏈等這些概念自然就明白了。這話說的沒錯，但是這些繼承的實現是否是我們想的那樣呢，今天讓我們來用原型鏈解釋下 E ...
  • 用react-service做狀態管理，適用於react、react native
    轉載自：https://blog.csdn.net/wo_shi_ma_nong/article/details/100713151 。 react-service是一個非常簡單的用來在react、react native中進行狀態維護的包。 其用法非常簡單，只有有限的幾個屬性和方法，非常好用。 官 ...
  • 小程式如何支持使用 async/await
    前言 小程式本身是不支持async/await語法的，但有些應用場景，我們使用async/await會使得代碼更簡潔，也更易於維護，用過都知道是有多爽的。既然小程式不支持，那我們可以藉助 fackbook 開源的 regenerator 來完成這一功能。 前面我也百度過一些方法，但很多方法都行不通， ...
  • Vue源碼中compiler部分邏輯梳理（內有彩蛋）
    示例代碼托管在： "http://www.github.com/dashnowords/blogs" 博客園地址： "《大史住在大前端》原創博文目錄" 華為雲社區地址： "【你要的前端打怪升級指南】" [TOC] 一. 簡述 模塊Vue框架中用於模板編譯的，它的作用就是將Vue中的組件模板轉換成 函 ...
  • input監聽回車
    1. "el input" 2. "強制監聽" ...
  • Js一些基礎概念(持續完善……)
    一、js對象是由鍵和值組成，操作是以地址進行。 當兩個對象指向同一個地址時，修改其中任意一個的值，另外一個值也會被改變。如下例： let obj = {'key' : '0' , 'value' : '1'}; //聲明1個對象 let newObj = obj; //新對象指向obj，此時兩個對象 ...
  • Webpack安裝配置及打包詳細過程
    前端經過漫長的發展，涌現出了很多實踐方法來處理複雜的工作流程，讓開發變得更加簡便，其中，模塊化可以使複雜的程式細化成為各個小的文件，而webpack並不強制你使用某種模塊化方案，而是通過相容所有模塊化方案讓你無痛接入項目，本文詳細介紹webpack安裝配置及打包的詳細過程。 ...
  • 在VUE項目中使用SCSS ，對SCSS的理解和使用
    https://blog.csdn.net/zhouzuoluo/article/details/81010331 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 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 ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類