表單元素 開篇

今天開始講述表單這個重要模塊

可以說,JS 最早是為表單而發明的, 因此在沒有JS之前,所有操作都需要提交后端驗證,發現有誤再重定向回原頁面, 加上之前1,2KB的網速,這用戶體驗真是奇差無比.因此JS最初發明出來,就是做表單驗證的.

圍繞表單,添加了各種語義化的元素,事件,屬性.

比如說label,在某個radio外圍上它,既能說明它是什么東西,也能擴大點擊范圍

比如說fieldset,它擁有默認的框框,方便圈定某個區域,表明這里面的東西是表單(form本身默認不可見, 而CSS要在稍晚的時候才發明出來)

比如說, onchange, oninput, onsubmit等事件,提交與用戶交互的友好度

比如說, readOnly, disabled, checked, 為表單元素增加各種狀態.

我們可以給一個定義,何謂表單元素 ?就是能向后端提供數據的元素

而這些元素通過都放在form元素中,但如果將它們單個拎出來,這個不好判定,我們還可以通過其他"外觀"特征獲得,就是它們的tagName都是input, button, select, textarea.其實option元素也算是表單元素,但它的數據需要提交到select 元素 進行過濾,才能提交


function isFormElement(el){return /input|button|select|textarea/i.test(el.tagName)
}

在HTML5中,還添加類似datalist, output等元素, 但它們只是輔助設施,沒有直接給form提交數據的能力,因此不算是表單元素.

form元素作為AJAX出現前唯一的提交通道,我們在這里著重說一下

它上面擁有如下屬性

屬性  值  描述 
acceptMIME_type 規定通過文件上傳來提交的文件的類型
accept-charsetcharset服務器處理表單數據所接受的字符集
enctypeMIME_type規定表單數據在發送到服務器之前應該如何編碼
method get/post規定表單數據發送的方式,get方法和post方法
namename規定表單的名稱
target_blank/_parent/_self/_top 規定在何處打開action URL

其中三個重要屬性說明一下:

1、action指定該表單發送時接受操作的地址

2、method指定表單數據發送的方法。可選值:get、post。get發送則表單內的數據將附加到url后發送。post則是在HTTP請求中發送。

3、enctype指定表單數據在發送的服務器之前如何編碼,特別注意的是,當含有上傳域時要設置編碼方式為enctype="multipart/form-data",否則后臺無法獲取到瀏覽器發送的文件數據。是設置表單的MIME編碼。默認情況,這個編碼格式是application/x-www-form-urlencoded,不能用于文件上傳;只有使用了multipart/form-data,form里面的input的值以2進制的方式傳過去。才能完整的傳遞文件數據。FTP上傳大文件的時候,也有個選項是以二進制方式上傳。

t01174653fa1ce5705c.jpg

表單里面的元素布置有一定的要求,如form里面一定放著fieldset, fielset里面包著legend, label包著說明文字與input, textearea...., label里要指定tabindex,就是tab切換的順序。


health information height: weight:

不同的表單擁有不同的外形,它們的用法也各有不同,序列化數據也不一樣,因此我們將分開以下幾種細細討論.

輸入系, 選擇系, 下拉系, 搭車系, 圖形系

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/285860.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/285860.shtml
英文地址,請注明出處:http://en.pswp.cn/news/285860.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

目錄(文章更新中...)《實戰NFT web3 solidity(新版本0.8.+)》

注:由于是付費專欄內容,若有錯誤請及時聯系1_bit,博客鏈接:https://blog.csdn.net/A757291228 ,或在文章下留言,收到后將會對錯誤進行改正,若是版本更新導致的問題也希望大家對錯誤進行提交&…

如何畫出一張合格的技術架構圖?

阿里妹導讀:技術傳播的價值,不僅僅體現在通過商業化產品和開源項目來縮短我們構建應用的路徑,加速業務的上線速率,也體現在優秀工程師在工作效率提升、產品性能優化和用戶體驗改善等經驗方面的分享,以提高我們的專業能…

.NET 發布和支持計劃介紹

.NET 發布和支持計劃介紹Intro對于 .NET 的發布,大多數童鞋都知道現在每年發布一個版本,針對 .NET 的發布,最近有些更新,Current 版本將改為 STS 版本,所以寫一篇文章介紹一下每年 11 月都會發布新的 .NET 主要版本&am…

C語言試題七十五之請編寫函數求回文數

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 編寫函數:…

【spring boot】8.spring boot的日志框架logback使用

在繼續上一篇的Debug調試之后,把spring boot的日志框架使用情況逐步蠶食。 參考:http://tengj.top/2017/04/05/springbo 開篇之前,貼上完整application.properties日志相關配置 簡介:spring boot的默認日志框架Logback SLF4J——…

【無人機知識】吐血整理:史上最全最完整的飛機基本參數名稱詳解

飛機基本參數大全: 機翼(airfoil):產生飛行所需升力,支持飛機在空中飛行,也有穩定操縱的作用。副翼(aileron):是指安裝在機翼翼梢后緣的一小塊可動的翼面。飛行員操縱左右副翼差動偏轉所產生的滾轉力矩可以使飛機做橫滾機動。機身(fuselage):裝載機組成員、旅客、貨…

通過iscsi配置在aix上掛載存儲設備

本文中我們利用starwind虛擬存儲進行設置,以下為實驗環境說明:Windows環境:win7,ip address:10.3.5.7,iscsi initiator name :iqn.2008-08.com.starwindsoftware:joker-pc-aixAix環境:ip addres…

16進制可逆加密算法

16進制可逆操作類&#xff1a; public static class Hex16{/// <summary>/// 作用&#xff1a;將字符串內容轉化為16進制數據編碼&#xff0c;其逆過程是Decode/// 參數說明&#xff1a;/// strEncode 需要轉化的原始字符串/// 轉換的過程是直接把字符轉換成Unicode字符,…

原生js聲音播放代碼

最終測試頁頁面 測試頁面html代碼(test.html) <!doctype html> <html lang"en"><head><meta charset"UTF-8"><meta name"Generator" content"EditPlus"><meta name"Author" content"…

寫給 Kubernetes 工程師的 mTLS 指南

本文翻譯節選自 A Kubernetes engineer’s guide to mTLS[1]&#xff0c;為了便于讀者理解&#xff0c;筆者對原文做了一點修改 &#xff08;本文刪除了原文中的與主題關系不大的 Linkerd 安裝的部分&#xff0c;將 Twillio 替換成國內讀者比較熟悉的 GitHub&#xff09;。因為…

ArcGIS實驗教程——實驗三十五:ArcGIS Model Builder與空間建模原理、案例詳解

ArcGIS實驗視頻教程合集:《ArcGIS實驗教程從入門到精通》(附配套實驗數據)》 文章目錄 一、 空間建模概述1. 空間建模概述2. 空間建模步驟二、Model Builder建模1. Model Builder基礎2. Model Builder操作3. Model Builder高級進階操作一、 空間建模概述 1. 空間建模概述 …

C語言試題七十六之請編寫函實現百錢買百雞

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 編寫函數:…

二、solidity 基礎進階(2.1)—— library 庫合約《實戰NFT web3 solidity(新版本0.8.+)》

《web3 solidity0.8.版本&#xff08;持續更新新版本內容&#xff09; 基礎到實戰NFT開發》會及時更新新版本 solidity 內容&#xff0c;以及完成最終的 NFT 實戰商業項目部分。 注&#xff1a;由于是付費專欄內容&#xff0c;若有錯誤請及時聯系1_bit&#xff0c;博客鏈接&am…

paper 17 : 機器學習算法思想簡單梳理

前言&#xff1a; 本文總結的常見機器學習算法&#xff08;主要是一些常規分類器&#xff09;大概流程和主要思想。 樸素貝葉斯&#xff1a; 有以下幾個地方需要注意&#xff1a; 1. 如果給出的特征向量長度可能不同&#xff0c;這是需要歸一化為通長度的向量&#xff08;這里以…

BZOJ1179 Atm //縮點+spfa

1179: [Apio2009]Atm Description Input 第一行包含兩個整數N、M。N表示路口的個數&#xff0c;M表示道路條數。接下來M行&#xff0c;每行兩個整數&#xff0c;這兩個整數都在1到N之間&#xff0c;第i1行的兩個整數表示第i條道路的起點和終點的路口編號。接下來N行&#xff0c…

centos 新建swap區文件

一. 相當詳細且流程完整&#xff0c;&#xff08;推薦閱讀&#xff09; 在centos7上新建swap區 https://www.digitalocean.com/community/tutorials/how-to-add-swap-on-centos-7 二. centos官網 轉&#xff1a;https://www.centos.org/docs/5/html/5.2/Deployment_Guide/s2-sw…

ArcGIS實驗教程——實驗三十六:ArcGIS Python腳本的巧妙使用

ArcGIS實驗視頻教程合集:《ArcGIS實驗教程從入門到精通》(附配套實驗數據)》 文章目錄 一、ArcGIS腳本簡介二、Python腳本與ArcPy三、Python窗口四、腳本編寫(案例:矢量數據批量裁剪)五、在ModelBuilder中使用腳本工具一、ArcGIS腳本簡介 腳本與模型相似,也是把處理過程…

基于Spring Boot和Spring Cloud實現微服務架構學習

目錄 Spring 頂級框架 Spring cloud子項目 WHAT - 什么是微服務 微服務簡介 微服務的具體特征 SOA vs Microservice HOW - 怎么具體實踐微服務 客戶端如何訪問這些服務&#xff1f; 服務之間如何通信&#xff1f; 這么多服務&#xff0c;怎么找? 這么多服務&#x…

C語言試題七十七之請編寫函實現漁夫打魚曬網問題

??個人主頁:個人主頁 ??系列專欄:C語言試題200例目錄 ??推薦一款刷算法、筆試、面經、拿大公司offer神器 ?? 點擊跳轉進入網站 ?作者簡介:大家好,我是碼莎拉蒂,CSDN博客專家(全站排名Top 50),阿里云博客專家、51CTO博客專家、華為云享專家 1、題目 編寫函數:…

.NetCore實現圖片縮放與裁剪 - 基于ImageSharp

前言&#xff08;突然發現斷更有段時間了最近在做博客的時候&#xff0c;需要實現一個類似Lorempixel、LoremPicsum這樣的隨機圖片功能&#xff0c;圖片有了&#xff0c;還需要一個根據輸入的寬度高度獲取圖片的功能&#xff0c;由于之前處理圖片時使用到了ImageSharp庫&#x…