[HTML]表單標簽(form表單域、input輸入表單、label標簽、select下拉表單、textarea文本域)

来源:https://www.cnblogs.com/detailNew/archive/2023/03/28/17265440.html
-Advertisement-
Play Games

本博文介紹HTML中的表單標簽,包含form表單域、input輸入表單、label標簽、select下拉表單和textarea文本域。 ...


本博文介紹HTML中的表單標簽。

表單 = 表單域 + 表單控制項 + 提示信息,下麵說說表單域和表單控制項。

1 表單域標簽:<form></form>

        基本格式:

        <form action="url" method="提交方式" name="表單功能變數名稱稱">

                各種表單元素控制項

        </form>

        參數說明:

參數 說明
action 用於指定接收並處理表單數據的伺服器程式的URL
method 用於設置表單數據的提交方式,其取值為get或者post
name 指定表單的名稱

2 表單控制項(表單元素)

  • input輸入表單元素

        基本格式:<input type="表單類型" name="表單名稱" value="表單的值">

        input的常用屬性:

屬性名 說明
type 決定輸入類型,可選值及說明在下表
name 定義input元素的名稱
id 標簽的唯一標識
value 規定input元素的值
checked 規定此input元素首次載入時被選中,用法:checked="checked"
maxlength 規定表單中輸入字元串的最大長度

        屬性type的可選值:

可選值 說明
button 可點擊按鈕(結合js搭配使用)
file 定義輸入欄位和“瀏覽”按鈕,供文件上傳
checkbox 覆選框(表單屬性name需要相同)
password 密碼欄位,欄位中字元被掩碼
hidden 隱藏的輸入欄位
radio 單選按鈕(表單屬性name需要相同)
reset 重置按鈕,清除表單數據
text 單行輸入欄位,預設寬度為20字元
submit 提交按鈕,可將表單數據發送到伺服器
  • label標簽

        用處:綁定一個表單元素,當點擊label標簽內文本時,瀏覽器自動將游標轉到(或選擇)對應的表單元素。註意label的for屬性值要和input的id屬性值一致。

        基本格式:<label for="input的id值">標簽內文本</label>

        舉例:

        <label for="字元串">男</label>

        <input type="radio" name = "sex" id="字元串">

        此時用戶點擊“男”,則會選中單選按鈕。

  • select下拉表單元素

        基本格式:

        <select>

                <option>選項1</option>

                <option>選項2</option>

        </select>

        註意:<option>中添加selected = "selected",則表示預設選中。

  • textarea文本域元素

        基本格式:

        <textarea rows="行數" cols="列數">

                文本內容

        </textarea>

        參數說明:

參數 說明
rows 文本域的行數
cols 文本域的列數

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

-Advertisement-
Play Games
更多相關文章
  • 事先申明:所有android 類型的學習記錄全部基於《第一行代碼 Android》第三版,在此感謝郭霖老師的書籍幫助。 1.手動創建Activity 在Project類型目錄中尋找到 項目/app/src/main/java/com.example.activitytest 在 com.exampl ...
  • 自動化測試有2種形式,介面自動化和UI自動化。而UI自動化經常會被登錄節點堵塞,例如驗證碼、圖形、滑塊等,儘管有些方式可以識別圖形和定位滑塊位置,但成功率都不高,無法真正意義上實現自動化執行;而http介面的自動化測試前置如果依賴cookie,也無法實現自動化執行。 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 背景 項目當中如果做新增/修改/刪除等等操作通常情況下都需要刷新數據或者刷新當前頁面. 思路 (1)如果頁面簡單,調用介面刷新數據即可. (2)如果頁面複雜,需要調用多個介面或者通知多個子組件做刷新,可以採用刷新當前頁面的方式 下麵整理了 ...
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ...
  • Admin.NET 是一套基於Furion/.NET 6實現的通用管理平臺,模塊插件式開發,框架包含了常規的許可權管理、字典等管理模塊,以及一些Vue3的Demo案例,框架前後端分離。後端基於基於Furion/.NET 6實現,底層集成SqlSugar;前端則是採用Vue-Next-Admin的前端框... ...
  • Element UI 是一套基於 Vue.js 的組件庫,它提供了一系列常用的 UI 組件,包括表單、彈窗、佈局、導航等等。Element UI 的設計風格簡潔、易用、美觀,且易於定製。 Element UI 的主要特點包括: 基於 Vue.js 開發,組件易於使用和定製。 提供了豐富的 UI 組件 ...
  • 配置開發環境 腳手架工具create-react-app 儲備知識:終端或命令行、代碼編輯器 React官方中文文檔 create-react-app 其是基於Node的快速搭建React項目的腳手架工具。 npx create-react-app testdemo cd testdemo npm ...
  • 其他章節請看: webgl 系列 著色器語言 本篇開始學習著色器語言 —— GLSL全稱是 Graphics Library Shader Language (圖形庫著色器語言) GLSL 是一門獨立的語言,和其他語言一樣有自己的變數、運算符、函數、迴圈(for)、控制語句(if)、函數、數組等等。 ...
一周排行
    -Advertisement-
    Play Games
  • .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊,後續可能不再更新Garne ...
  • C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了,幾乎是無縫銜接,很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高,我只要會調用方法就行。這個系統交付之後不會有太多問題,更多應該是做小需求,有大的開發任務應該也是第二期的事,嗯?怎麼感覺我變成運維了?而 ...
  • 我在隨筆《EAV模型(實體-屬性-值)的設計和低代碼的處理方案(1)》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼(或者說無代碼)的一些實現思路,在本篇隨筆中,我們來分析一下這種針對通用業務,且只需定義就能構建業務模塊存儲和界面的解決方案,其中的數據查詢處理的操作。 ...
  • 對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1,這將啟用NTP伺服器功 ...
  • title: Django信號與擴展:深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分:Django信號基礎 Djan ...
  • 使用xadmin2遇到的問題&解決 環境配置: 使用的模塊版本: 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 今天我打算整點兒不一樣的內容,通過之前學習的TransformerMap和LazyMap鏈,想搞點不一樣的,所以我關註了另外一條鏈DefaultedMap鏈,主要調用鏈為: 調用鏈詳細描述: ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 後端應用級開發者該如何擁抱 AI GC?就是在這樣的一個大的浪潮下,我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型,跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好,或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • @Autowired是Spring框架提供的註解,@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配,而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean,而@Resourc... ...