溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
Form表單主要用于用戶與Web應(yīng)用程序進(jìn)行數(shù)據(jù)的交互，它允許用戶將數(shù)據(jù)發(fā)給web應(yīng)用程序，網(wǎng)頁也可以攔截數(shù)據(jù)的發(fā)送以便自己使用。form通常由一到多個表單元素組成，這些表單元素是單行/多行文本框，下拉菜單，按鈕，復(fù)選框，單選按鈕，時間表單元素時 一般要配合label標(biāo)簽，用于描述其目的。其可用屬性如下。
action 用于處理表單信息的應(yīng)用程序的地址。
method 瀏覽器用來提交表單的HTTP方法。
get 對應(yīng)于Http協(xié)議的GET方法，表單數(shù)據(jù)被附加在uri上，使用"?"分隔
post 對應(yīng)于Http協(xié)議的POST方法，表單數(shù)據(jù)包含在HTTP協(xié)議的請求報文的體部。
name 設(shè)定表單的名稱
target 表示瀏覽器接收到form的提交信息后在哪里顯示回應(yīng)。
_self，_blank，_parent，_top這些值和超鏈接的相同
通過enctype屬性設(shè)定表單數(shù)據(jù)的內(nèi)容類型
1. application/x-www-form-urlencoded
在發(fā)送前編碼所有字符（默認(rèn)）使用到的編碼方式：
1）控件的名稱和值都被轉(zhuǎn)義，空白字符使用【+】替換，保留的字符一般都是用來實(shí)現(xiàn)特定的目的，例如（: / ? ; @ = & 等）。非數(shù)字和字母的字符使用%HH（這里 HH表示兩個十六進(jìn)制數(shù)字，代表該字符的ASCII碼）進(jìn)行轉(zhuǎn)換，
2）控件的"名稱/值"對按照它們在文檔數(shù)據(jù)流中出現(xiàn)的順序列出來。"名稱""值"使 用"="分割，兩個"名稱/值"之間使用&隔開。
2. multipart/form-data
不對字符編碼。在使用包含【文件上傳控件】的表單時，必須使用該值。數(shù)據(jù)分成多個部分，每個部分代表一個結(jié)構(gòu)良好的控件，作為文檔數(shù)據(jù)流的一部分，每一 個部分都按照它們在文檔數(shù)據(jù)流中出現(xiàn)的順序依次發(fā)送到服務(wù)器端，并且，每一部分的邊界不會出現(xiàn)在數(shù)據(jù)中。每一部分有一個content-desposition標(biāo)題頭，它的值的格式是： Content-Disposition:form-data;name="myControl"
3. text/plain
空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼。
input組件用于接受來自用戶的數(shù)據(jù)，其可用屬性如下
1、type 用于設(shè)定組件類型
text 單行文本框
password 密碼框，輸入的內(nèi)容將會被遮擋。
checkbox 復(fù)選框，必須使用value屬性來描述該組件所提交的值，使用checked屬性默認(rèn)選 中。
radio 單選按鈕，必須使用value屬性來描述該組件所提交的值，使用checked屬性默認(rèn) 選中。一個單選按鈕組中所有組件都應(yīng)該具有相同的name值，這樣，每次只能選中按鈕組中的 某一個組件
submit 提交按鈕
reset 重置按鈕
file文件按鈕，該組件用于選中文件系統(tǒng)中的某個文件
hidden 隱藏域，該組件不顯示在頁面中，但是其值會被提交。
image 圖像按鈕，必須使用src來加載圖片，使用alt來聲明替換文本。
button 普通按鈕
2、name 用于設(shè)定組件類型
3、value 用于設(shè)定初始化，可選。
4、checked 單選框，復(fù)選框默認(rèn)選中屬性
5、disabled 表示禁用組件，禁用組件的值也不能被提交
6、size 當(dāng)前控件的初始寬度，這個寬度以像素為單位。除非控件類型是text, password，這時寬度是整數(shù)值，表示字符的數(shù)目，默認(rèn)為20
7、maxlength 指定可以輸入的字符的最大值。適用于控件類型為text,password。
fieldset組件用于在一個web表單中對多個控件和標(biāo)簽進(jìn)行分組
1、disabled 禁用filedset元素，該屬性會影響的fieldset的子元素
2、name fieldset元素的名稱
fieldset的標(biāo)題由標(biāo)簽提供
web前端開發(fā)學(xué)習(xí)Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實(shí)戰(zhàn)教學(xué)視頻）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Title</legend>
<input type="radio" id="radio">
<label for="radio">click me</label>
</fieldset>
</form>
</body>
</html>input/button按鈕組件用于接受來自用戶的數(shù)據(jù)，其可用屬性如下
按鈕控件
1、input的type 指定控件類型：button，submit，reset
2、input的name 按鈕名稱。
3、input的value 按鈕所關(guān)聯(lián)的值，會與name的值一同被提交
label組件用于表示某一表單組件的標(biāo)題 其可用屬性如下
1、for 與為設(shè)定標(biāo)題的表單組件的ID值一致，上面的代碼實(shí)例有
select組件用于表示下拉列表或列表，其可用屬性如下
1、multiple 指定控件類型 布爾類型的值，表示是否允許多選，如果select元素不包含屬性size和屬性 multiple時，表單類型顯示為菜單（組合框），如果使用了屬性size和屬性multiple中 的任意一個，則表單類型顯示為列表框。
2、size 顯示的行數(shù) 當(dāng)要表示一個可以滾動的列表時候，size表示同時展示的行數(shù)。默認(rèn)值為0。表 示非列表顯示
3、disabled 表示禁用組件，禁用組件的值也不能被提交
4、name 用于指定該組件的名字，會與其option子元素的value值組成鍵值對隨其他表單數(shù)據(jù)一齊被提交
option組件用于表示選項，常包含<select>、<optgroup>中，其可用的屬性如下
1、disabled 表示禁用組件，禁用組件的值也不能被提交
2、value 定義控件的初始值。提交表單時，初始值會被提交給服務(wù)器。
3、selected 表示該選項默認(rèn)被選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<select name="address" id="">
<option value="北京" disabled>北京</option>
<option value="上海" selected>上海</option>
<option value="廣州">廣州</option>
</select>
</form>
</body>
</html>optgroup組件用于表示option的選項組，常包含在<select>中，其可用的屬性如下
1、disabled 表示禁用組件，禁用組件的值也不能被提交
2、label 表示選項組的名稱
3、selected 表示該選項默認(rèn)被選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<select name="address" id="">
<optgroup label="廣東省">
<option value="廣州">廣州</option>
<option value="深圳">深圳</option>
</optgroup>
<optgroup label="江蘇省">
<option value="蘇州">蘇州</option>
<option value="鹽城">鹽城</option>
</optgroup>
</select>
</form>
</body>
</html>textarea組件用于表示多行文本框，沒有value屬性，其值被包含在標(biāo)簽內(nèi) 其可用屬性如下
1、rows 定義文本框的行數(shù)
2、cols 定義文本框的列數(shù)
3、warp 表示是否自動換行
? off 不自動換行
? hard自動硬回車換行，換行元素一同被傳送到服務(wù)器中
? soft自動軟回車換行，換行元素不會傳到服務(wù)器中
4、disabled 表示禁用組件，禁用組件的值也不能被提交
5、readonly 表示該組件只讀，其值依然會被提交
6、name 用于指定該組件的名字，會隨著其值一同被提交到后臺
progress組件用于表示任務(wù)的完成情況，常用于進(jìn)度條 其可用的屬性如下
1、max 定義進(jìn)度元素所要求的任務(wù)的工作量，默認(rèn)值為1
2、value 定義已經(jīng)完成的工作量，如果max值為1，該值必須是介于0~1之間的小 數(shù)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
<progress value="70" max="100"></progress>
</form>
</body>
</html>output 組件用于表示用戶動作產(chǎn)生的結(jié)果 其可用的屬性如下
1、name 定義元素的名稱
2、for 其他元素的id列表，表明這些元素為計算提供了輸入值(或其他影響)。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" name="b" value="50">+
<input type="number" name="a" value="10">=
<output name="result"></output>
</form>
</body>
</html>meter元素表示規(guī)定范圍內(nèi)的數(shù)量值。呈現(xiàn)的效果有一個類似于進(jìn)度條
例如：磁盤使用量，某個候選者的投票人數(shù)占 總投票人數(shù)的比例等
1、value :在元素中特地表示出來的實(shí)際值，該值在min與max之間，如果未指定 ，該值默認(rèn)為1
2、min :指定規(guī)定范圍時允許使用的最小值，默認(rèn)為0
3、max :指定規(guī)定范圍時允許使用的最大值，默認(rèn)為1
4、low :規(guī)定范圍的下限值必須小于或等于high屬性的值
5、high :規(guī)定范圍的上限值（表示較高危險的意思）
6、optimum :最佳值
web前端開發(fā)學(xué)習(xí)Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié)，不停更新最新的教程和學(xué)習(xí)方法（詳細(xì)的前端項目實(shí)戰(zhàn)教學(xué)視頻）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>He got a <meter low="69" high="80" max="100" value="70">B</meter>on this exam</p>
</body>
</html>datalist組件表示其他控件可用的值，其值通過<option>作為datalist的子元素存在
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label for=""> choose a browser from this list:</label>
<input type="text" name="myBrowser" list="browsers">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Internet Explorer">
<option value="Opera">
<option value="Safari">
<option value="Microsoft Edge">
</datalist>
</body>
</html>type：在H5中，對input的type進(jìn)行了擴(kuò)展，可以有更多的取值
1、date 日期控件（年，月，日，不包含時間）
2、datetime-local 日期時間控件
3、time 時間控件
4、month 日期插件（年，月）
5、week 日期插件（年，周），注意：以上只能被chrome,opera支持
6、number 數(shù)字控件（只能輸入數(shù)字）
7、range 范圍控件（通過控制條可以調(diào)整取值）
8、search 搜索控件，
9、tel 電話控件
10、url 地址控件
11、color 顏色控件
12、email email控件
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼