HTML表單

来源:https://www.cnblogs.com/wyh518/archive/2022/11/06/16862795.html
-Advertisement-
Play Games

1、表單語法 method: 規定如何發送表單數據常用值:get post 在實際網頁開發中通常採用post方式提交表單數據 action: 表示向何處發送表單數據 <form method="post" action="result.html"> <p>名字:<input name="name" ...


1、表單語法

method: 規定如何發送表單數據常用值:get post
在實際網頁開發中通常採用post方式提交表單數據
action: 表示向何處發送表單數據
<form method="post" action="result.html">
    <p>名字:<input name="name" type="text" > </p>
    <p>密碼:<input name="pass" type="password" > </p>
    <p>
        <input type="submit" name="Button" value="提交"/>
        <input type="reset" name="Reset" value="重填"/>
    </p>
</form>

2、13個表單元素

1、文本框

<!--type="text"
name:文本框名稱(必填)
value:文本框初始值
size:文本框長度
maxlength:文本框可輸入最多字元
-->
<input type="text" name="userName" value="用戶名" size="30" maxlength="20"/>

2、密碼框

向密碼框中輸入字元時,顯示的效果,密碼字元以黑色實心的圓點來顯示。

<!--type="password"
name:密碼框名稱(必填)
size:密碼框長度
-->
<input type="password" name="pass" size="20"/>

3、單選按鈕

同一組單選按鈕,name屬性值必須相同,才能在選中單選按鈕時達到互斥

<!--type="radio"
name:單選框名稱(必填),一組的名稱需要相同
checked:單選按鈕選中狀態
value:單選框的值
-->
<input name="gen" type="radio" value="男" checked />男
<input name="gen" type="radio" value="女" />女

4、覆選框

同一組覆選框,根據需要可設置name屬性值相同

<!--type="checkbox"
name:覆選框名稱(必填),一組的名稱需要相同
checked:覆選按鈕選中狀態
value:覆選框的值
-->
<input type="checkbox" name="interest" value="sports"/>運動
<input type="checkbox" name="interest" value="talk" checked />聊天
<input type="checkbox" name="interest" value="play"/>玩游戲

 5、下拉列表框

希望在頁面載入時有預設選中的選中項,則必須使用selected屬性,如果沒有預設選中項則第一個選項 預設被選中

<!--select:下拉列表框-->
<!--option:選項-->
<select name="列表名稱" size="行數">
<option value="選項的值" selected="selected">…</option >
<option value="選項的值">…</option >
</select>

6、按鈕

<!--重置按鈕-->
<input type="reset" name="butReset" value="reset按鈕">
<!--提交按鈕-->
<input type="submit" name="butSubmit" value="submit按鈕">
<!--普通按鈕-->
<input type="button" name="butButton" value="button按鈕"/>
<!--圖片按鈕-->
<input type="image" src="images/login.gif" />

7、多行文本域

textarea:多行文本域
cols:顯示的列數
rows:顯示的行數
<textarea name="showText" cols="x" rows="y">文本內容 </textarea>

8、文件域

在表單中使用文件域時,必須設置表單的“enctype”編碼屬性為“multipart/form-data”,表示將表單數據 分為多部分提交。

enctype:表單編碼屬性
<form action="" method="post" enctype="multipart/form-data">
<p>
<!--type="file" 文件域-->
<input type="file" name="files" />
<input type="submit" name="upload" value="上傳" />
</p>
</form>

9、郵箱

會自動驗證Email地址格式是否正確

郵箱:<input type="email" name="email"/>

10、網址

會自動驗證Email地址格式是否正確

請輸入你的網址:<input type="url" name="userUrl"/>

11、數字

min:最小值
max:最大值
step:步長
請輸入數字:<input type="number" name="num" min="0" max="100" step="10"/>

12、滑塊

type值為range即為滑塊。

請輸入數字:<input type="range" name="range1" min="0" max="10" step="2"/>

13、搜索框

type值為search即為搜索框。

請輸入搜索的關鍵詞:<input type="search" name="sousuo"/>

3、表單的高級應用

在某些註冊頁面或本圖片中訂單信息頁面,必須同意一些條款按鈕才能使用等等

  • 隱藏域

     在瀏覽器中看不到隱藏域,但是在提交表單時可以看到隱藏域的內容被提交至伺服器

<input type="hidden" value="666" name="userid">
  • 只讀、禁用

     W3C HTML5標準中,規定對於布爾類型的屬性,屬性值可以省略

只讀和禁用不能單寫readonly或disabled,必須寫readonly=”readonly”和disabled=“disabled”
<input name="name" type="text" value="張三" readonly>
<input type="submit" disabled value="保存" >
  • 表單元素的標註 

     增強滑鼠的可用性

     自動將焦點轉移到與該標註相關的表單元素上

<!--它的for屬性對應的id與表單元素id一致-->
<label for="id">標註的文本</label>
<input type="radio" name="gender" id="male"/>

4、表單的初級驗證

 

如果用戶填寫的表單內容不進行驗證就發給伺服器,那麼伺服器發現填寫的不合法,或是沒有填寫,就 會返迴響應給用戶,用戶重新填寫再提交,如此多次持續直到用戶輸入正確。它們之間的通信是通過網 絡進行的,如果網路很差,那麼註冊一個賬號就得花很長時間,對用戶來說是非常煩的,對伺服器來說 也增加了其工作壓力。

要是有惡意的用戶向伺服器發送病毒或是有害於伺服器安全的程式就更危險了。

表單驗證的好處:

  1. 減輕伺服器的壓力。
  2. 保證數據的可行性和安全性。

在客戶端就對錶單進行驗證是非常有必要的

表單初級驗證的方法

  • placeholder

     提示語預設顯示,當文本框中輸入內容時提示語消失

<input type="search" name="sousuo" placeholder="請輸入要搜索的關鍵字"/>
  • required

     規定文本框填寫內容不能為空,否則不允許用戶提交表單

<input type="text" name="username" required/>
  • pattern

     用戶輸入的內容必須符合正則表達式所指的規則,否則就不能提交表單

<input type="text" name="tel" required pattern="^1[358]\d{9}" />

5、小結

 

本文來自博客園,作者:腹白,轉載請註明原文鏈接:https://www.cnblogs.com/wyh518/


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

-Advertisement-
Play Games
更多相關文章
  • 好家伙,JS基礎接著學, 本篇內容為《JS高級程式設計》第三章學習筆記 1.變數 ECMAScript 變數是鬆散類型的,意思是變數可以用於保存任何類型的數據。 (確實鬆散,不像C或C++那樣,分int,float,char等等...,一個變數可以用來保存任何類型的數據) 每個變數只不過是一個用於保 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 先上效果 簡易map 在圖一的地圖中可以看到 a點 連接 到 b點, 基本信息 以及 基本的控制項(放大、縮小、回到某個指定的點),接下來我們分開逐步講解。 所需配置 需要先在manifest.json中的 app模塊中配置地圖,並添加相關 ...
  • 函數 基本概念 在JS中,函數實際上是對象,是Function類型的實例。 函數名是指向函數對象的指針。 function sum(num1, num2){ return num1 + num2; } // 檢查sum是否是Function類型的實例 console.log(sum instance ...
  • 1、什麼是CSS Cascading Style Sheet 級聯樣式表。 表現HTML或XHTML文件樣式的電腦語言。 包括對字體、顏色、邊距、高度、寬度、背景圖片、網頁定位等設定。 2、CSS的發展史 CSS1.0 讀者可以從其他地方去使用自己喜歡的設計樣式去繼承性地使用樣式; CSS2.0 ...
  • 虛擬DOM就是用JS來模擬DOM結構的,它並不是真正的DOM。 為什麼使用虛擬DOM? 用傳統的方式去操作DOM的時候,瀏覽器會從構建DOM樹開始,從頭到尾執行一遍流程。簡單來說,就是會觸發重排與重繪。 比如說,在一次操作中,需要更新10個DOM節點。 理想是一次性構建完成DOM樹,但是瀏覽器並不會 ...
  • 一、事件委派 1.理解DOM事件流 事件流描述的是從頁面中接收事件的順序。事件發生時會在元素節點之間按照特定的順序傳播,這個傳播過程即DOM事件流。 DOM事件流分為三個階段: 捕獲階段:從上往下 當前目標階段 冒泡階段:從下往上 事件流如下圖所示: 註意事項: JavaScript代碼中只能執行捕 ...
  • 一.商品列表 1.1 獲取數據 首先能夠進入商品列表的途徑 傳的數據有 瞭解了這個之後就可以開始了,先創建分支 創建編譯模式,並分配初試數據 這個時候就可以獲取數據了 需要的數據 所以在發起請求之前需要整理一下數據,先定義數據 整理數據發起請求 1.2 渲染頁面 ==註意我們可以去定義一個預設的圖片 ...
  • 本文主要記錄 Vue.js 中的 router 管理,涉及如何使用路由實現單頁面應用(SPA)的組件切換,以及路由的一些 API 操作。 ...
一周排行
    -Advertisement-
    Play Games
  • 隨著Aspire發佈preview5的發佈,Microsoft.Extensions.ServiceDiscovery隨之更新, 服務註冊發現這個屬於老掉牙的話題解決什麼問題就不贅述了,這裡主要講講Microsoft.Extensions.ServiceDiscovery(preview5)以及如何 ...
  • 概述:通過使用`SemaphoreSlim`,可以簡單而有效地限制非同步HTTP請求的併發量,確保在任何給定時間內不超過20個網頁同時下載。`ParallelOptions`不適用於非同步操作,但可考慮使用`Parallel.ForEach`,儘管在非同步場景中謹慎使用。 對於併發非同步 I/O 操作的數量 ...
  • 1.Linux上安裝Docken 伺服器系統版本以及內核版本:cat /etc/redhat-release 查看伺服器內核版本:uname -r 安裝依賴包:yum install -y yum-utils device-mapper-persistent-data lvm2 設置阿裡雲鏡像源:y ...
  • 概述:WPF界面綁定和渲染大量數據可能導致性能問題。通過啟用UI虛擬化、非同步載入和數據分頁,可以有效提高界面響應性能。以下是簡單示例演示這些優化方法。 在WPF中,當你嘗試綁定和渲染大量的數據項時,性能問題可能出現。以下是一些可能導致性能慢的原因以及優化方法: UI 虛擬化: WPF提供了虛擬化技術 ...
  • 引言 上一章節介紹了 TDD 的三大法則,今天我們講一下在單元測試中模擬對象的使用。 Fake Fake - Fake 是一個通用術語,可用於描述 stub或 mock 對象。 它是 stub 還是 mock 取決於使用它的上下文。 也就是說,Fake 可以是 stub 或 mock Mock - ...
  • 為.net6在CentOS7上面做準備,先在vmware虛擬機安裝CentOS 7.9 新建CentOS764位的系統 因為CentOS8不更新了,所以安裝7;簡單就一筆帶過了 選擇下載好的操作系統的iso文件,下載地址https://mirrors.aliyun.com/centos/7.9.20 ...
  • 經過前面幾篇的學習,我們瞭解到指令的大概分類,如:參數載入指令,該載入指令以 Ld 開頭,將參數載入到棧中,以便於後續執行操作命令。參數存儲指令,其指令以 St 開頭,將棧中的數據,存儲到指定的變數中,以方便後續使用。創建實例指令,其指令以 New 開頭,用於在運行時動態生成並初始化對象。方法調用指... ...
  • LiteDB 是一個輕量級的嵌入式 NoSQL 資料庫,其設計理念與 MongoDB 類似,但它是完全使用 C# 開發的,因此與 C# 應用程式的集成非常順暢。與 SQLite 相比,LiteDB 提供了 NoSQL(即鍵值對)的數據存儲方式,並且是一個開源且免費的項目。它適用於桌面、移動以及 We ...
  • 1 開源解析和拆分文檔 第三方的工具去對文件解析拆分,去將我們的文件內容給提取出來,並將我們的文檔內容去拆分成一個小的chunk。常見的PDF word mark down, JSON、HTML。都可以有很好的一些模塊去把這些文件去進行一個東西去提取。 優勢 支持豐富的文檔類型 每種文檔多樣化選擇 ...
  • OOM是什麼?英文全稱為 OutOfMemoryError(記憶體溢出錯誤)。當程式發生OOM時,如何去定位導致異常的代碼還是挺麻煩的。 要檢查OOM發生的原因,首先需要瞭解各種OOM情況下會報的異常信息。這樣能縮小排查範圍,再結合異常堆棧、heapDump文件、JVM分析工具和業務代碼來判斷具體是哪 ...