前端之 form 詳解

認識表單

  1. 在一個頁面上可以有多個form表單，但是向web服務器提交表單的時候，一次只可以提交一個表單。
  2. 要聲明一個表單，只需要使用 form 標記來標明表單的開始和結束，若需要向服務器提交數據，則在form標簽中需要設置action屬性（用來設置提交表單的位置）、method屬性（用來定義瀏覽器將表單中的信息提交給服務器端程序的處理方式）、target屬性（用來指定服務器返回結果所顯示的目標窗口或目標框架）；但是，對于客戶端腳本編程來說，并不需要這些屬性來幫助提交表單信息，form標簽存在的意義是在于方便在腳本中編程的時候進行引用。
  3. 表單的引用可以利用from標簽的name屬性或者也可以利用document的forms[]數組中調用到對應的數組。
  4. 可以利用form表單的elements[]數組來遍歷除了<input type=image >元素之外的所有元素
  5. form表單的submit()方法用于將表單提交給服務，但我們點擊submit按鈕的時候，submit按鈕會相應的調用onsubmit事件處理器從而調用Form對象的submit事件
  6. 如何在瀏覽器中使用頁面中的信息，我們稱之為“客戶端腳本編程”，而如何把信息提交給Web服務，并將數據庫保存在數據庫中，我們通常稱為“服務器端腳本編程”
  7. 在早期，所有可交互的HTML元素都應該放在HTML表單中，但是現在的定義是，需要提交到web服務器的數據，才必須要放在表單內，可是前一種理解的方式也不是完全錯誤的，因為一般可以交互的HTML元素，都是表單元素（在前期），即：瀏覽器需要處理的數據都是表單元素，因此需要將其放在HTML表單中。

認識表單元素

  1. 大部分的表單控件元素都是由<input>標記創建的，<input>標記具有一個type屬性，該屬性決定了<input>標記所創建的表單控件的類型。
  2. 所有的單控件對象都具有一個 nam e屬性，JavaScript 腳本通過 name 屬性的值來引用特定的表單控件元素，同時這也是表單提交到服務器時，每個表單控件元素的值 value 所對應的 key 值。
  3. 絕大部分對象都具有 value 屬性，該屬性返回當前表單控件的值。
  4. 所有的表單控件對象都具有一個 form 屬性，該屬性返回包含當前控件的 Form 對象。對于一個通用的表單數據檢查程序來說，用這個屬性來標明哪些控件屬于哪個表單。
  5. 所有的表單元素對象都具有focus()和blur()方法，同時所有的表單元素對象還具有onfocus和onblur事件處理器。

表單元素的分類

　　常見的表單控件有：

? ? ? ? ? ? ? 1、Text Input Elements:<input type="text"> 、<input type="password">、<textarea></textarea>

　　　　2、Tick Box Elements:<input type="checkbox"> 、<input type="radio">

　　　　3、Select Elements:<select size=1><option></option></select>、<select size=5 multiple><option></option></select>（下拉大框、多選）

　　　　4、Button:<input type="button">、<input type="submit">、<input type="reset">

表單form屬性

屬性描述
accept-charset規定在被提交表單中使用的字符集（默認：頁面字符集）。
action規定向何處提交表單的地址（URL）（提交頁面）。
autocomplete規定瀏覽器應該自動完成表單（默認：開啟）。
enctype規定被提交數據的編碼（默認：url-encoded）。
method規定在提交表單時所用的 HTTP 方法（默認：GET）。
name規定識別表單的名稱（對于 DOM 使用：document.forms.name）。
novalidate規定瀏覽器不驗證表單。
target規定 action 屬性中地址的目標（默認：_self）。

input

<input type=""> 元素會根據不同的?type?屬性，變化為多種形態。

type屬性值表現形式對應代碼
text單行輸入文本<input type=text" />
password密碼輸入框<input type="password"? />
date日期輸入框<input type="date" />
checkbox復選框

我喜歡自行車：<input type="checkbox" name="Bike">
我喜歡汽車：<input type="checkbox" name="Car">

備注：name 可以不同

radio單選框

男性：<input type="radio" checked="checked" name="Sex" value="male" />
女性：<input type="radio" name="Sex" value="female" />

備注：name 必須一樣

submit提交按鈕<input type="submit" value="提交" />
reset重置按鈕<input type="reset" value="重置"? />
button普通按鈕<input type="button" value="普通按鈕"? />
hidden隱藏輸入框<input type="hidden"? />
file文本選擇框<input type="file" method='post' enctype='multipart/form-data'? />

屬性說明

  • name：表單提交時的“鍵”，注意和id的區別
  • value：表單提交時對應項的值
    • type 是 "button", "reset", "submit"時，為按鈕上顯示的文本內容
    • type 是 "text","password","hidden"時，為輸入框的初始值
    • type 是 "checkbox", "radio", "file"，為輸入相關聯的值
  • checked：radio和checkbox默認被選中的項
  • readonly：text和password設置只讀
  • disabled：所有input均適用

select標簽

<form action="" method="post"><select name="city" id="city" multiple=true><option value="1">北京</option><option selected="selected" value="2">上海</option><option value="3">廣州</option><option value="4">深圳</option></select>
</form>

屬性說明

  • multiple：布爾屬性，設置后為多選，否則默認單選
  • disabled：禁用
  • selected：默認選中該項
  • value：定義提交時的選項值

label標簽

定義：

<label> 標簽為 input 元素定義標注（標記）。

說明：

  1. label 元素不會向用戶呈現任何特殊效果。
  2. <label> 標簽的 for 屬性值應當與相關元素的 id 屬性值相同。
<form action=""><label for="username">用戶名</label><input type="text" id="username" name="username">
</form>// 也可以寫成這樣
<form><input type='text' id='username' name='username'>
</form>

textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">默認內容</textarea>

屬性說明

  • name：名稱
  • rows：行數
  • cols：列數
  • disabled：禁用

jQuery 操作 from

input 的文本框

// 獲取值
$("#txt").attr("value")；
$("#txt").val()// 設置值
$("#txt").attr("value",'');//清空內容
$("#txt").attr("value",'11');//填充內容

input 的多選框?checkbox

// 獲取值
$("#chk1").attr("value")；// 設置值，所有的jquery版本都可以這樣賦值
$("#chk1").attr("checked",'');        //不打勾
$('#chk1').attr("checked", false);    //不打勾
$("#chk2").attr("checked",true);      //打勾
$("#chk2").attr("checked","checked"); //打勾// 設置值，jquery1.6+:prop的4種賦值，強推下列的賦值方法，prop()函數的結果:匹配到的是屬性；attr()函數的結果:匹配到的是屬性值；
$("#cb1″).prop("checked",true); 
$("#cb1″).prop("checked",false); 
$("#cb1″).prop({checked:true});
$("#cb1″).prop({checked:false});  // 判斷是否已經打勾
if ($("#chk1").attr('checked')==undefined){}  //看版本1.6+返回:”checked”或”undefined” ;1.5-返回:true或false
if ($("#chk1").is(':checked')){} //所有版本:true/false//別忘記冒號哦
if ($("#chk1").get(0).checked) {}
if ($("#chk1")[0].checked) {}
if ($('#chk1').prop('checked')) {}  //16+:true/false//設置checkbox為禁用狀態(jquery<1.6用attr,jquery>=1.6建議用prop)
$("input[type='checkbox']").attr("disabled", "disabled");//or
$("input[type='checkbox']").attr("disabled", true);//or
$("input[type='checkbox']").prop("disabled", true);//or
$("input[type='checkbox']").prop("disabled", "disabled");//設置checkbox為啟用狀態(jquery<1.6用attr,jquery>=1.6建議用prop)
$("input[type='checkbox']").removeAttr("disabled");//or
$("input[type='checkbox']").attr("disabled", false);//or
$("input[type='checkbox']").prop("disabled", "");//or
$("input[type='checkbox']").prop("disabled", false);

input 的單選框?radio

//獲取radio被選中項的值
$('input:radio:checked').val()；
$("input[type='radio']:checked").val();
$("input[name='items']:checked").val();
$(“input[@name=items]：checked”).val();
$("input[@type=radio][@checked]").val();// radio單選組的第二個元素為當前選中值
$('input:radio').eq(索引值).attr('checked', 'true');索引值=0,1,2....
$('input:radio').slice(1,2).attr('checked', 'true');
$('input[@name=items]').get(1).checked = true;//設置value=2的項目為當前選中項
$("input[@type=radio]").attr("checked",'2');
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');
$("input[value=http://www.2cto.com/kf/201110/'rd2']").attr('checked','true');// 設置第一個Radio為選中值：
$('input:radio:first').attr('checked', 'checked');
$('input:radio:first').attr('checked', 'true');
$('input:radio:first').attr('checked', true);
注：attr("checked",'checked')= attr("checked", 'true')= attr("checked", true)// 刪除Value值為rd2的Radio
$("input:radio[value=http://www.2cto.com/kf/201110/'rd2']").remove();// 刪除第幾個Radio
$("input:radio").eq(索引值).remove();索引值=0,1,2....// 如刪除第3個Radio:
$("input:radio").eq(2).remove();//遍歷Radio
$('input:radio').each(function(index,domEle){//寫入代碼
});

select 標簽

// 獲取選中項
$('#sel option:selected').val();
$('select#sel').find('option:selected').val();// 獲取選中項的Text值：
$('select#seloption:selected').text();
$('select#sel').find('option:selected').text();
$("select[@name=items] option[@selected]").text();// 設置第一個option為選中值：
$('select#sel option:first').attr('selected','true')
$('select#sel')[0].selectedIndex = 0;
$("#sel").attr("value",'-sel3');//設置value=-sel3的項目為當前選中項
$("<optionvalue='1'>1111</option><optionvalue='2'>2222</option>")
.appendTo("#sel")//添加下拉框的option
$("#sel").empty()；//清空下拉框// 獲取當前選中項的索引值：
$('select#sel').get(0).selectedIndex;// 獲取當前option的最大索引值：
$('select#sel option:last').attr("index")// 獲取DropdownList的長度：
$('select#sel')[0].options.length;
$('select#sel').get(0).options.length;

?

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

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

相關文章

代碼 優化 指南 實踐

代碼 優化 指南 實踐

C代碼優化方案 華中科技大學計算機學院 姓名&#xff1a; 王全明 QQ&#xff1a; 375288012 Email&#xff1a; quanming1119163.com 目錄 目錄 C代碼優化方案 1、選擇合適的算法和數據結構 2、使用盡量小的數據類型 3、減少運算的強度 &#xff08;1&…
閱讀更多...
.12-淺析webpack源碼之NodeWatchFileSystem模塊總覽

.12-淺析webpack源碼之NodeWatchFileSystem模塊總覽

剩下一個watch模塊&#xff0c;這個模塊比較深&#xff0c;先大概過一下整體涉及內容再分部講解。 流程圖如下&#xff1a; NodeWatchFileSystem const Watchpack require("watchpack");class NodeWatchFileSystem {constructor(inputFileSystem) {this.inputFileSy…
閱讀更多...
Python 第三方模塊之 beautifulsoup（bs4）- 解析 HTML

Python 第三方模塊之 beautifulsoup（bs4）- 解析 HTML

簡單來說&#xff0c;Beautiful Soup是python的一個庫&#xff0c;最主要的功能是從網頁抓取數據。官方解釋如下&#xff1a;官網文檔 Beautiful Soup提供一些簡單的、python式的函數用來處理導航、搜索、修改分析樹等功能。 它是一個工具箱&#xff0c;通過解析文檔為用戶提供…
閱讀更多...
modal vue 關閉_Vue彈出框的優雅實踐

modal vue 關閉_Vue彈出框的優雅實踐

引言頁面引用彈出框組件是經常碰見的需求,如果強行將彈出框組件放入到頁面中,雖然功能上奏效但沒有實現組件與頁面間的解耦,非常不利于后期的維護和功能的擴展.下面舉個例子來說明一下這種做法的弊端.click"openModal()">點擊 :is_open"is_open" close…
閱讀更多...
Python 第三方模塊之 lxml - 解析 HTML 和 XML 文件

Python 第三方模塊之 lxml - 解析 HTML 和 XML 文件

lxml是python的一個解析庫&#xff0c;支持HTML和XML的解析&#xff0c;支持XPath解析方式&#xff0c;而且解析效率非常高 XPath&#xff0c;全稱XML Path Language&#xff0c;即XML路徑語言&#xff0c;它是一門在XML文檔中查找信息的語言&#xff0c;它最初是用來搜尋XML文…
閱讀更多...
(轉)Linux下PS1、PS2、PS3、PS4使用詳解

(轉)Linux下PS1、PS2、PS3、PS4使用詳解

Linux下PS1、PS2、PS3、PS4使用詳解 原文&#xff1a;http://www.linuxidc.com/Linux/2016-10/136597.htm 1、PS1——默認提示符 如下所示&#xff0c;可以通過修改Linux下的默認提示符&#xff0c;使其更加實用。在下面的例子中&#xff0c;默認的PS1的值是“\s-\v\$”,顯示出…
閱讀更多...
開放平臺大抉擇

開放平臺大抉擇

開放平臺大抉擇之新浪SAE&#xff1a;為個人應用開發帶來福音 導讀&#xff1a;繼上期淘寶網副總裁王文彬從平臺功能特色、運營狀況等多方面分享了淘寶開放平臺的歷程和挑戰之后。國內另一家云平臺服務方的典型代表——Sina App Engine(簡稱SAE)&#xff0c;作為新浪研發中心于…
閱讀更多...
ip68級防水可以泡多久_iPhone8防水級別升級至IP68：能在1.5米深水中堅持30分鐘

ip68級防水可以泡多久_iPhone8防水級別升級至IP68：能在1.5米深水中堅持30分鐘

1月15日&#xff0c;業界最新的泄密消息顯示&#xff0c;蘋果擬在今年推出的“iPhone 8”智能手機會是一款革命性的手機&#xff0c;功能和配置就不多說了。蘋果還將解決iPhone 7的一個重要缺陷&#xff0c;就是大大增強iPhone 8的防水性能&#xff0c;防水級別達IP68。《韓國先…
閱讀更多...
HTTP POST 發送數據的參數 application/x-www-form-urlencoded、multipart/form-data、text/plain

HTTP POST 發送數據的參數 application/x-www-form-urlencoded、multipart/form-data、text/plain

HTTP 簡介 HTTP/1.1 協議規定的 HTTP 請求方法有 OPTIONS、GET、HEAD、POST、PUT、DELETE、TRACE、CONNECT 這幾種。 其中 POST 一般用來向服務端提交數據&#xff0c;本文主要討論 POST 提交數據的幾種方式。 我們知道&#xff0c;HTTP 協議是以 ASCII 碼傳輸&#xff0c;建…
閱讀更多...
vue 二進制文件的下載（解決亂碼和解壓報錯）

vue 二進制文件的下載（解決亂碼和解壓報錯）

問題描述&#xff1a;項目中使用的是vue框架進行開發&#xff0c;因為文件下載存在權限問題&#xff0c;所以并不能通過 a 鏈接的 href 屬性直接賦值 URL進行下載&#xff0c; &#xff08;如果你的文件沒有下載權限&#xff0c;可以直接通過href屬性賦值URL的方法進行文件下載…
閱讀更多...
Python 第三方模塊之 psutil - 獲取系統運行的進程和系統利用率信息

Python 第三方模塊之 psutil - 獲取系統運行的進程和系統利用率信息

一、psutil模塊: 官方網址&#xff1a;http://pythonhosted.org/psutil/ 1.psutil是一個跨平臺庫(http://pythonhosted.org/psutil/)能夠輕松實現獲取系統運行的進程和系統利用率&#xff08;包括CPU、內存、磁盤、網絡等&#xff09;信息。它主要用來做系統監控&#xff0c;…
閱讀更多...
石頭機器人紅燈快閃_機器人集體“快閃”活動爆紅網絡 “我是AI”與您相約智能新時代...

石頭機器人紅燈快閃_機器人集體“快閃”活動爆紅網絡 “我是AI”與您相約智能新時代...

原標題&#xff1a;機器人集體“快閃”活動爆紅網絡 “我是AI”與您相約智能新時代3月10日下午&#xff0c;天津科學技術館內&#xff0c;悠揚美妙的歌聲《我和我的祖國》突然響起&#xff0c;隨后50個身形矯健的阿爾法機器人伴隨著歌聲翩翩起舞&#xff0c;動作整齊、科技感十…
閱讀更多...
淺談云計算與數據中心計算

淺談云計算與數據中心計算

文/林仕鼎 云計算概念發端于Google和Amazon等超大規模的互聯網公司&#xff0c;隨著這些公司業務的成功&#xff0c;作為其支撐技術的云計算也得到了業界的高度認可和廣泛傳播。時至今日&#xff0c;云計算已被普遍認為是IT產業發展的新階段&#xff0c;從而被賦予了很多產業和…
閱讀更多...
無線網絡實體圖生成工具airgraph-ng

無線網絡實體圖生成工具airgraph-ng

無線網絡實體圖生成工具airgraph-ngairgraph-ng是aircrack-ng套件提供的一個圖表生成工具。該工具可以根據airodump工具生成的CSV文件繪制PNG格式的圖。繪制的圖有兩種類型&#xff0c;分別為AP-客戶端關聯圖和通用探測圖。通過AP-客戶端關聯圖&#xff0c;可以更為直觀的了解無…
閱讀更多...
高等代數期末考試題庫及答案_數學類高等代數期末考試試題A卷（含答案）

高等代數期末考試題庫及答案_數學類高等代數期末考試試題A卷（含答案）

數學類高等代數期末考試試題A卷(含答案)課程編號MTH17063 北京理工大學2010-2011學年第一學期2009級數學類高等代數期末考試試題A卷班級 學號 姓名 成績 一、(25分)設表示域上的所有階矩陣構成的上的線性空間。取定&#xff0c;對于任意的&#xff0c;定義。(1)證明為上的一個線…
閱讀更多...
cocos2d-lua3.7組件篇(三)-http通信demo

cocos2d-lua3.7組件篇(三)-http通信demo

客戶端使用lua、服務端使用QT做為服務器。 步驟&#xff1a; 客戶端 -----------Post 用戶名和密碼 服務端接受Post請求&#xff0c;讀取數據&#xff0c;返回response一、客戶端代碼 loadingImg require"app.scenes.LoadingLayer"local LoginScene class(&qu…
閱讀更多...
數據挖掘：如何尋找相關項

數據挖掘：如何尋找相關項

導讀&#xff1a;隨著大數據時代浪潮的到來數據科學家這一新興職業也越來越受到人們的關注。本文作者Alexandru Nedelcu就將數學挖掘算法與大數據有機的結合起來&#xff0c;并無縫的應用在面臨大數據浪潮的網站之中。 數據科學家需要具備專業領域知識并研究相應的算法以分析對…
閱讀更多...
Python 第三方模塊之 selenium - 模擬操作 Chrome 瀏覽器

Python 第三方模塊之 selenium - 模擬操作 Chrome 瀏覽器

1、安裝selenium 1.1、Python 安裝 selenium 模塊 pip install selenium1.2、下載驅動 選擇和自己chrom版本相對應的驅動到本地&#xff0c;下載地址 http://npm.taobao.org/mirrors/chromedriver/2、Python 操作 from selenium import webdriver import time import json…
閱讀更多...
jupyter notebook代碼導出_Jupyter Notebook導出包含中文的pdf_親測有效

jupyter notebook代碼導出_Jupyter Notebook導出包含中文的pdf_親測有效

Jupyter Notebook是很好的數據科學創作環境&#xff0c;是非常方便的Python代碼編輯器。jupyter提供導出的格式有.py、.html、.md、.pdf等。目前用其導出包含中文的pdf會遇到很多坑&#xff0c;網上也有一些解決方案&#xff0c;大致分為兩種方式&#xff0c;一是安裝 pandoc并…
閱讀更多...
前端之使用 POST 提交數據并跳轉

前端之使用 POST 提交數據并跳轉

GET 方式 window.location.href是我們常用來在js中實現頁面跳轉的方法&#xff0c;這是使用get方式發送請求&#xff0c;示例如下 window.location.href url;優點是簡單易用&#xff0c;缺點是如果有參數的話&#xff0c;參數會暴露在url地址中&#xff0c;這降低了系統的安…
閱讀更多...
最新文章

Copyright @ 2022~2023