web前端入門到實戰(zhàn)：HTML5表單標簽

表單簡介

Form表單主要用于用戶與Web應用程序進行數(shù)據(jù)的交互，它允許用戶將數(shù)據(jù)發(fā)給web應用程序，網(wǎng)頁也可以攔截數(shù)據(jù)的發(fā)送以便自己使用。form通常由一到多個表單元素組成，這些表單元素是單行/多行文本框，下拉菜單，按鈕，復選框，單選按鈕，時間表單元素時一般要配合label標簽，用于描述其目的。其可用屬性如下。

創(chuàng)新互聯(lián)堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的民豐網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設(shè)合作伙伴！

action　　用于處理表單信息的應用程序的地址。
method 　　　瀏覽器用來提交表單的HTTP方法。
get 對應于Http協(xié)議的GET方法，表單數(shù)據(jù)被附加在uri上，使用"?"分隔
post 對應于Http協(xié)議的POST方法，表單數(shù)據(jù)包含在HTTP協(xié)議的請求報文的體部。
name 　　設(shè)定表單的名稱
target 　　表示瀏覽器接收到form的提交信息后在哪里顯示回應。
_self，_blank，_parent，_top這些值和超鏈接的相同

表單數(shù)據(jù)的內(nèi)容類型

通過enctype屬性設(shè)定表單數(shù)據(jù)的內(nèi)容類型

1. application/x-www-form-urlencoded

在發(fā)送前編碼所有字符（默認）使用到的編碼方式：

1）控件的名稱和值都被轉(zhuǎn)義，空白字符使用【+】替換，保留的字符一般都是用來實現(xiàn)特定的目的，例如（: / ? ; @ = & 等）。非數(shù)字和字母的字符使用%HH（這里 HH表示兩個十六進制數(shù)字，代表該字符的ASCII碼）進行轉(zhuǎn)換，

2）控件的"名稱/值"對按照它們在文檔數(shù)據(jù)流中出現(xiàn)的順序列出來。"名稱""值"使用"="分割，兩個"名稱/值"之間使用&隔開。

2. multipart/form-data

不對字符編碼。在使用包含【文件上傳控件】的表單時，必須使用該值。數(shù)據(jù)分成多個部分，每個部分代表一個結(jié)構(gòu)良好的控件，作為文檔數(shù)據(jù)流的一部分，每一個部分都按照它們在文檔數(shù)據(jù)流中出現(xiàn)的順序依次發(fā)送到服務器端，并且，每一部分的邊界不會出現(xiàn)在數(shù)據(jù)中。每一部分有一個content-desposition標題頭，它的值的格式是： Content-Disposition:form-data;name="myControl"

3. text/plain

空格轉(zhuǎn)換為 "+" 加號，但不對特殊字符編碼。

表單組件

input組件用于接受來自用戶的數(shù)據(jù)，其可用屬性如下

1、type 用于設(shè)定組件類型

text 單行文本框
password 密碼框，輸入的內(nèi)容將會被遮擋。
checkbox 復選框，必須使用value屬性來描述該組件所提交的值，使用checked屬性默認選中。
radio 單選按鈕，必須使用value屬性來描述該組件所提交的值，使用checked屬性默認選中。一個單選按鈕組中所有組件都應該具有相同的name值，這樣，每次只能選中按鈕組中的某一個組件
submit 提交按鈕
reset 重置按鈕
file文件按鈕，該組件用于選中文件系統(tǒng)中的某個文件
hidden 隱藏域，該組件不顯示在頁面中，但是其值會被提交。
image 圖像按鈕，必須使用src來加載圖片，使用alt來聲明替換文本。
button 普通按鈕

2、name 用于設(shè)定組件類型

3、value 用于設(shè)定初始化，可選。　　

4、checked 單選框，復選框默認選中屬性

5、disabled 表示禁用組件，禁用組件的值也不能被提交

6、size 當前控件的初始寬度，這個寬度以像素為單位。除非控件類型是text, password，這時寬度是整數(shù)值，表示字符的數(shù)目，默認為20

7、maxlength 指定可以輸入的字符的最大值。適用于控件類型為text,password。

fieldset組件用于在一個web表單中對多個控件和標簽進行分組

1、disabled 禁用filedset元素，該屬性會影響的fieldset的子元素

2、name fieldset元素的名稱

fieldset的標題由標簽提供

web前端開發(fā)學習Q-q-u-n：⑦⑧④-⑦⑧③-零①②，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法（詳細的前端項目實戰(zhàn)教學視頻）
<!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組件用于表示某一表單組件的標題其可用屬性如下

1、for 與為設(shè)定標題的表單組件的ID值一致，上面的代碼實例有

select組件用于表示下拉列表或列表，其可用屬性如下

1、multiple 指定控件類型布爾類型的值，表示是否允許多選，如果select元素不包含屬性size和屬性 multiple時，表單類型顯示為菜單（組合框），如果使用了屬性size和屬性multiple中的任意一個，則表單類型顯示為列表框。

2、size 顯示的行數(shù) 當要表示一個可以滾動的列表時候，size表示同時展示的行數(shù)。默認值為0。表示非列表顯示

3、disabled 表示禁用組件，禁用組件的值也不能被提交

4、name 用于指定該組件的名字，會與其option子元素的value值組成鍵值對隨其他表單數(shù)據(jù)一齊被提交

option組件用于表示選項，常包含<select>、<optgroup>中，其可用的屬性如下

1、disabled 表示禁用組件，禁用組件的值也不能被提交

2、value 定義控件的初始值。提交表單時，初始值會被提交給服務器。

3、selected 表示該選項默認被選中

<!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 表示該選項默認被選中

<!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屬性，其值被包含在標簽內(nèi) 其可用屬性如下

1、rows 定義文本框的行數(shù)

2、cols 定義文本框的列數(shù)

3、warp 表示是否自動換行

? off 不自動換行

? hard自動硬回車換行，換行元素一同被傳送到服務器中

? soft自動軟回車換行，換行元素不會傳到服務器中

4、disabled 表示禁用組件，禁用組件的值也不能被提交

5、readonly 表示該組件只讀，其值依然會被提交

6、name 用于指定該組件的名字，會隨著其值一同被提交到后臺

新增表單組件

progress組件用于表示任務的完成情況，常用于進度條其可用的屬性如下

1、max 定義進度元素所要求的任務的工作量，默認值為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)的效果有一個類似于進度條

例如：磁盤使用量，某個候選者的投票人數(shù)占總投票人數(shù)的比例等

1、value :在元素中特地表示出來的實際值，該值在min與max之間，如果未指定，該值默認為1

2、min :指定規(guī)定范圍時允許使用的最小值，默認為0

3、max :指定規(guī)定范圍時允許使用的最大值，默認為1

4、low :規(guī)定范圍的下限值必須小于或等于high屬性的值

5、high :規(guī)定范圍的上限值（表示較高危險的意思）

6、optimum :最佳值

web前端開發(fā)學習Q-q-u-n： ⑦⑧④-⑦⑧③-零①②，分享學習的方法和需要注意的小細節(jié)，不停更新最新的教程和學習方法（詳細的前端項目實戰(zhàn)教學視頻）
<!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進行了擴展，可以有更多的取值

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控件

分享文章：web前端入門到實戰(zhàn)：HTML5表單標簽
本文路徑：http://muchs.cn/article36/ghcpsg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、面包屑導航、移動網(wǎng)站建設(shè)、標簽優(yōu)化、網(wǎng)站改版、

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容