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
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...