HTML常用標簽四

来源:https://www.cnblogs.com/SSPOFA/archive/2019/10/28/11755833.html
-Advertisement-
Play Games

表單 1. 表單的組成 一個完整的表單通常由表單域、表單控制項(也稱表單元素)和提示信息3各部分組成 2. 表單域 表單域是一個包含表單元素的區域 在HTML中, 標簽用去定義表單域,以實現用戶信息的收集和傳遞 ~~~html 各種表單元素空間 </form ~~~ | 屬性 | 屬性值 | 作用 | ...


表單

  1. 表單的組成
    • 一個完整的表單通常由表單域、表單控制項(也稱表單元素)和提示信息3各部分組成
  2. 表單域
    • 表單域是一個包含表單元素的區域
    • 在HTML中,<form> 標簽用去定義表單域,以實現用戶信息的收集和傳遞
<form action="url地址" method="提交方式" name=”表單功能變數名稱稱“>
    各種表單元素空間
</form>
屬性 屬性值 作用
action url地址 用於指定接受並處理表單數據的伺服器程式的url地址
method get\post 用於設置表單數據的提交方式,其取值為get\post
name 名稱 用於指定表單的名稱,以區分同一個頁面中的多個表單域
  1. 表單元素

    • 在表單域中可以定義各種表單元素,這些表單元素就是允許用戶在表單中輸入或者選擇的內容控制項

    • input輸入表單元素

      • input時輸入的意思,在表單元素中<input> 標簽用於收集用戶信息
      • 在<input> 標簽中,包含一個type屬性,根據不同的type屬性值,輸入欄位擁有很多種形式(可以是文本欄位、覆選框、掩碼後的文本控制項,單選按鈕、按鈕等)
      <input type="屬性值" />
      • <input /> 標簽為單標簽

      • type屬性設置不同的屬性 值用來指定不同的控制項類型

        屬性值 描述
        button 定義按鈕(多數情況下用於通過js啟動腳本)
        checkbox 覆選框
        file 輸入欄位和”瀏覽“按鈕,供上傳文件
        hidden 定義隱藏的輸入欄位
        image 定義圖像形式的提交按鈕
        password 定義密碼欄位,該欄位中的字元被掩碼
        radio 定義單選按鈕
        reset 定義重置按鈕,重置按鈕會清除表單中的所有數據
        submit 定義提交按鈕,提交按鈕會把表單數據發送到伺服器
        text 定義單行輸入欄位,用戶可在其中輸入文本,預設寬度為20個位元組
        name 定義input元素的名稱
        value 定義input的值
        checked input元素首次載入是應被選中
        maxlength 輸入欄位中的字元的最大長度
        placeholder input文本框,初始裡邊有文字提示,當點擊時,文字消失
      • name、value是每個表單元素都有的屬性值,主要給後臺人員用
      • name表單元素的名字,要求單選按鈕和覆選框要有相同的name值
      • checked屬性主要針對單選按鈕和覆選框,主要作用一打開頁面,主要可以預設選中某個表單元素

    • <label> 標簽為input元素定義註標

      • <label> 標簽用於綁定一個表單元素,當點擊<lable> 標簽內的文本時,瀏覽器就會自動將焦點(游標)轉到或者選擇對應的表單元素上,用來增加用戶體驗
      <label for="sex">男</label>
      <input type="radio" name="sex" id="sex">

      【註意】<label> 標簽的for屬性應當與相關元素的id屬性相同

    • select下拉表單元素

      <select>
          <option>選項1</option>
          <option>選項2</option>
          <option>選項3</option>
      </select>
      • <select> 中至少包含一對<option>
      • <option> 中定義select=”select“時,當前項即為預設選項
    • textarea文本域元素

      <textarea rows="3" cols="20">
          文本內容
      </textarea>

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

-Advertisement-
Play Games
更多相關文章
  • 前言: vue腳手架指的是vue-cli它是vue官方提供的一個快速構建單頁面(SPA)環境配置的工具,cli 就是(command-line-interface ) 命令行界面 。vue-cli是基於node環境利用webpack對文件進行編譯、打包、壓縮、es6轉es5等一系列操作。目前vue- ...
  • 配置手動編譯TS文件工作環境 配置webpack自動化打包編譯工作環境(後面補充) 一、TypeScript入門學習引言 進入主題之前,首先說明這個系列的博客是我剛剛接觸TypeScript的學習筆記,可能不會太深入的解讀一些原理方面的東西。但儘可能的把基礎的入門使用解析清楚,畢竟使用TypeScr ...
  • 本次預計翻譯三篇文章如下: "01.[譯]9個可以讓你在2020年成為前端專家的項目" 02.[譯]預載入響應圖像 03.[譯]您應該知道的13個有用的JavaScript數組技巧 我為什麼要創建這個git倉庫?通過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址 ...
  • JavaScript 是 Web 的編程語言。 所有現代的 HTML 頁面都使用 JavaScript。 JavaScript 非常容易學。 閱讀本教程,您需要有以下基礎: HTML 教程 CSS 教程 HTML 教程 CSS 教程 PS :JavaScript 一直在升級,請等待 01、電燈的開關 ...
  • 功能要求:設計一款簡單的電子日曆,要求實現顯示當天所在月份的全部日期,並且可以通過點擊按鈕控制項切換月份。效果圖如圖所示: 主要講解js如何實現電子日曆?(附上完整js代碼) 1.日曆上的狀態欄是當前系統時間,由new Date()獲取。 2.js主要完成的是日曆上的數字實現(使用表格實現)。 (1) ...
  • <!DOCTYPE html 案例 性別:    男 女 生日:    請選擇年 請選擇月 請選擇日 所在地區: 婚姻狀況:未婚 已婚 喜歡的類型:嫵媚的 可愛的 自我介紹:自我介紹 我同意註冊條款和會員加入標準 我是會員,立即登入 </f ...
  • 一、table數據的呈現(對應查詢) 頁面代碼: TableGrid.js的代碼: 後臺代碼 ,對應的是:'/Test/TableGridQuery' 頁面呈現效果: 二、新增一條新的記錄,並呈現到table中 給新增按鈕添加事件: 顯示效果: 三、編輯其中一條記錄,並同時更新到table中 新增一 ...
  • 1.HTML5表單新特性之——新的input type <input type=" "> HTML5之前已有的input type: text、password、radio、checkbox、file、submit、reset、button、image、hidden HTML5新增的input ty ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...