web前端入門到實戰：HTML5表單標籤

時間 2020-01-07

標籤 web 前端入門實戰 html5 html 表單標籤欄目 HTML 简体版

原文原文鏈接

表單簡介

Form表單主要用於用戶與Web應用程序進行數據的交互，它容許用戶將數據發給web應用程序，網頁也能夠攔截數據的發送以便本身使用。form一般由一到多個表單元素組成，這些表單元素是單行/多行文本框，下拉菜單，按鈕，複選框，單選按鈕，時間表單元素時通常要配合label標籤，用於描述其目的。其可用屬性以下。 html

action　　用於處理表單信息的應用程序的地址。
method 　　　瀏覽器用來提交表單的HTTP方法。
get 對應於Http協議的GET方法，表單數據被附加在uri上，使用"?"分隔
post 對應於Http協議的POST方法，表單數據包含在HTTP協議的請求報文的體部。
name 　　設定表單的名稱
target 　　表示瀏覽器接收到form的提交信息後在哪裏顯示迴應。
_self，_blank，_parent，_top這些值和超連接的相同前端

表單數據的內容類型

經過enctype屬性設定表單數據的內容類型web

1. application/x-www-form-urlencodedchrome

在發送前編碼全部字符（默認）使用到的編碼方式：瀏覽器

1）控件的名稱和值都被轉義，空白字符使用【+】替換，保留的字符通常都是用來實現特定的目的，例如（: / ? ; @ = & 等）。非數字和字母的字符使用%HH（這裏 HH表示兩個十六進制數字，表明該字符的ASCII碼）進行轉換，服務器

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

2. multipart/form-dataide

不對字符編碼。在使用包含【文件上傳控件】的表單時，必須使用該值。數據分紅多個部分，每一個部分表明一個結構良好的控件，做爲文檔數據流的一部分，每一個部分都按照它們在文檔數據流中出現的順序依次發送到服務器端，而且，每一部分的邊界不會出如今數據中。每一部分有一個content-desposition標題頭，它的值的格式是： Content-Disposition:form-data;name="myControl"post

3. text/plain學習

空格轉換爲 "+" 加號，但不對特殊字符編碼。

表單組件

input組件用於接受來自用戶的數據，其可用屬性以下

一、type 用於設定組件類型

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

二、name 用於設定組件類型

三、value 用於設定初始化，可選。　　　　

四、checked 單選框，複選框默認選中屬性

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

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

七、maxlength 指定能夠輸入的字符的最大值。適用於控件類型爲text,password。

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

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

二、name fieldset元素的名稱

fieldset的標題由標籤提供

web前端開發學習Q-q-u-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按鈕組件用於接受來自用戶的數據，其可用屬性以下

按鈕控件

一、input的type 指定控件類型：button，submit，reset

二、input的name 按鈕名稱。

三、input的value 按鈕所關聯的值，會與name的值一同被提交

label組件用於表示某一表單組件的標題其可用屬性以下

一、for 與爲設定標題的表單組件的ID值一致，上面的代碼實例有

select組件用於表示下拉列表或列表，其可用屬性以下

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

二、size 顯示的行數當要表示一個能夠滾動的列表時候，size表示同時展現的行數。默認值爲0。表示非列表顯示

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

四、name 用於指定該組件的名字，會與其option子元素的value值組成鍵值對隨其餘表單數據一齊被提交

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

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

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

三、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>中，其可用的屬性以下

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

二、label 表示選項組的名稱

三、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屬性，其值被包含在標籤內其可用屬性以下

一、rows 定義文本框的行數

二、cols 定義文本框的列數

三、warp 表示是否自動換行

　　• off 不自動換行

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

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

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

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

六、name 用於指定該組件的名字，會隨着其值一同被提交到後臺

新增表單組件

progress組件用於表示任務的完成狀況，經常使用於進度條其可用的屬性以下

一、max 定義進度元素所要求的任務的工做量，默認值爲1

二、value 定義已經完成的工做量，若是max值爲1，該值必須是介於0~1之間的小數。

<!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 組件用於表示用戶動做產生的結果其可用的屬性以下

一、name 定義元素的名稱

二、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元素表示規定範圍內的數量值。呈現的效果有一個相似於進度條

例如：磁盤使用量，某個候選者的投票人數佔總投票人數的比例等

一、value :在元素中特意表示出來的實際值，該值在min與max之間，若是未指定，該值默認爲1

二、min :指定規定範圍時容許使用的最小值，默認爲0

三、max :指定規定範圍時容許使用的最大值，默認爲1

四、low :規定範圍的下限值必須小於或等於high屬性的值

五、high :規定範圍的上限值（表示較高危險的意思）

六、optimum :最佳值

web前端開發學習Q-q-u-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>