ileUpload 對象

在 HTML 文檔中 <input type="file"> 標簽每出現一次，一個 FileUpload 對象就會被創建。

該元素包含一個文本輸入字段，用來輸入文件名，還有一個按鈕，用來打開文件選擇對話框以便圖形化選擇文件。

該元素的 value 屬性保存了用戶指定的文件的名稱，但是當包含一個 file-upload 元素的表單被提交的時候，

瀏覽器會向服務器發送選中的文件的內容而不僅僅是發送文件名。

為安全起見，file-upload 元素不允許 HTML 作者或 JavaScript 程序員指定一個默認的文件名。

HTML value 屬性被忽略，并且對于此類元素來說，value 屬性是只讀的，這意味著只有用戶可以輸入一個文件名。

當用戶選擇或編輯一個文件名，file-upload 元素觸發 onchange 事件句柄。

您可以通過遍歷表單的 elements[] 數組，或者通過使用 document.getElementById()來訪問 FileUpload 對象。

FileUpload 對象的屬性

accept 設置或返回指示文件傳輸的 MIME 類型的列表（逗號分隔）。

accessKey 設置或返回訪問 FileUpload 對象的快捷鍵。

alt 設置或返回不支持 <input type="file"> 時顯示的替代文字。

defaultValue 設置或返回 FileUpload 對象的初始值。

disabled 設置或返回是否禁用 FileUpload 對象。

form 返回對包含 FileUpload 對象的表單的引用。

id 設置或返回 FileUpload 對象的 id。

name 設置或返回 FileUpload 對象的名稱。

tabIndex 設置或返回定義 FileUpload 對象的 tab 鍵控制次序的索引號。

type 返回表單元素的類型。對于 FileUpload ，則是 "file" 。

value 返回由用戶輸入設置的文本后，FileUpload 對象的文件名。

標準屬性

className 設置或返回元素的 class 屬性。

dir 設置或返回文本的方向。

lang 設置或返回元素的語言代碼。

title 設置或返回元素的 title 屬性。

FileUpload 對象的方法

blur() 從 FileUpload 對象上移開焦點。

focus() 為 FileUpload 對象賦予焦點。

select() 選取 FileUpload 對象。

TML 中使用 <input> 元素表示單行輸入框和 <textarea> 元素表示多行文本框。

HTML中使用的 <input> 元素在 JavaScript 中對應的是 HTMLInputElement 類型。HTMLInputElement 繼承自 HTMLElement 接口：

interface HTMLInputElement extends HTMLElement {
    ...
}

HTMLInputElement 類型有一些獨有的屬性和方法：

• name：表示 <input> 元素的名稱。
• disabled：表示 <input> 元素是否禁止使用。在表單提交時不會包含被禁止的 <input> 元素。
• autofocus：表示頁面加載時，該元素是否會自動獲得焦點。
• required：表示表單提交時，該 <input>元素是否為必填。
• value：表示該 <input> 元素的值。
• validity：返回一個 ValidityState 對象，表示 <input> 元素的校驗狀態。是只讀屬性。
• validationMessage：表示 <input> 元素校驗失敗時，用戶看到的報錯信息。如果該元素不需要校驗，或者通過校驗，該屬性為空字符串。是只讀屬性。
• willValidate：表示表單提交時，<input> 元素是否會被校驗。是只讀屬性。
• select()：選中 <input> 元素內部的所有文本。
• click()：模擬鼠標點擊當前的 <input> 元素。

而在上述介紹 HTMLInputElement 類型中的屬性時，type 屬性要特別關注一下，因為根據 type 屬性的改變，可以改變<input>的屬性。

省略 type 屬性與 type="text"效果一樣， <input> 元素顯示為文本框。

當 type 的值為text/password/number/時，會有以下屬性對 <input> 元素有效。

下面創建一個 type="text" ，一次顯示 25 個字符，但最多允許顯示 50 個字符的文本框：

<input type="text" size="25" maxlength="50" value="initial value">

HTML 使用的 <textarea> 元素在 JavaScript 中對應的是 HTMLTextAreaElement 類型。HTMLTextAreaElement類型繼承自 HTMLElement 接口：

interface HTMLTextAreaElement extends HTMLElement {
    ...
}

HTMLTextAreaElement 類型有一些獨有的屬性和方法：

• form：只讀屬性，返回對父表單元素的引用。如果此元素未包含在表單元素中，則它可以是同一文檔中 id 屬性同 form 值的 <form> 元素，如果沒有，該值為 null。
• type：只讀屬性，返回字符串textarea。
• value：string類型，返回/設置控件中包含的原始值。
• textLength：只讀屬性，long類型，返回<textarea>元素的value值的長度。與 value.length 相同。
• defaultValue：string類型，返回/設置textarea元素的默認值。
• placeholder：string類型，返回/設置 textarea 元素的占位符，作為對輸入內容的提示。
• rows：unsigned long類型，返回/設置textarea元素的可見文本行數。
• cols：unsigned long類型，返回/設置 textarea 元素的可見寬度。
• autofocus：boolean類型，返回/設置textarea元素在頁面加載時自動獲取焦點。
• name：返回/設置 textarea 元素的名稱。
• disabled：boolean類型，返回/設置 textarea 元素是否應當被禁用。
• HTMLTextAreaElement.labels：NodeList類型，返回與此select元素關聯的標簽元素列表。
• maxLength：long類型，返回/設置元素可以輸入的最大字符數。僅在值更改時才評估此約束。
• minLength：long類型，返回/設置元素可以輸入的最小字符數。僅在值更改時才評估此約束。
• accessKey：boolean類型，返回/設置訪問 textarea 的鍵盤快捷鍵。
• readOnly：boolean類型，返回/設置 textarea 元素是否為只讀。
• required：boolean 類型，返回/設置 textarea 元素是否為必填項。
• tabIndex：long類型，返回/設置 textarea 元素的 tab 鍵導航順序中元素的位置。

下面創建一個高度為 25，寬度為 5 的 <textarea> 多行文本框。它與 <input> 不同的是，初始值顯示在 <textarea>...</textarea> 之間：

<textarea rows="25" cols="5">initial value</textarea>

注意：處理文本框值的時候最好不要使用 DOM 方法，而應該使用 value 屬性。

選擇文本

<input> 與 <textarea> 都支持 select() 方法，該方法用于選中文本框中的所有內容。該方法的語法為：

select(): void

下面看一個示例：

let textbox=document.forms[0].elements["input-box"];
textbox.select();

也可以在文本框獲得焦點時，選中文本框的內容：

textbox.addEventListener("focus", (event)=> {
    event.target.select();
});

select 事件

當選中文本框中的文本或使用 select() 方法時，會觸發 select 事件。

let textbox=document.forms[0].elements["textbox1"];
textbox.addEventListener("select", (event)=> {
    console.log(`Text selected: ${textbox.value}`);
});

取得選中的文本

HTML5 對 select 事件進行了擴展，通過 selectionStart 和 selectionEnd 屬性獲取文本選區的起點偏移量和終點偏移量。如下所示：

function getSelectedText(textbox){
    return textbox.value.substring(textbox.selectionStart,
textbox.selectionEnd);
}

注意：在 IE8 及更早版本不支持這兩個屬性。

選中部分文本

HTML5 提供了 setSelectionRange() 方法用于選中部分文本：

setSelectionRange(start, end, direction): void;

• start：被選中的第一個字符的位置索引，從 0 開始。如果這個值比元素的 value 長度還大，則會被看做 value 最后一個位置的索引。
• end：被選中的最后一個字符的下一個位置索引。如果這個值比元素的 value 長度還大，則會被看做 value 最后一個位置的索引。
• direction：該參數是可選的字符串類型，表示選擇方向，可以傳入 “forward”/“backward”/“none” 三個值。

下面看一個例子：

<input type="text" id="text-sample" size="20" value="Hello World!">
<button onclick="selectText()">選中部分文本</button>
<script>
    function selectText() {
        let input=document.getElementById("text-sample");
        input.focus();
        input.setSelectionRange(4, 8);    // o Wo
    }
</script>

如果想要看到選中效果，必須讓文本框獲得焦點。

輸入過濾

不同文本框經常需要保證輸入特定類型或格式的數據，或許數據需要包含特定字符或必須匹配某個特定模式。而文本框并未提供驗證功能，因此要配合 JavaScript 腳本實現輸入過濾功能。

屏蔽字符

有些輸入框需要出現或不出現特定字符。如果想要將輸入框變成只讀的，只需要使用 preventDefault()方法將按鍵都屏蔽：

input.addEventListener("keypress", (event)=> {
    event.preventDefault();
});

而要屏蔽特定字符，就需要檢查事件的 charCode 屬性。如下所示，使用正則表達式實現只允許輸入數字的輸入框：

input.addEventListener("keypress", (event)=> {
    if (!/\d/.test(event.key)) {
        event.preventDefault();
    }
});

還有一個問題需要處理：復制、粘貼及涉及Ctrl 鍵的其他功能。在除IE 外的所有瀏覽器中，前面代碼會屏蔽快捷鍵Ctrl+C、Ctrl+V 及其他使用Ctrl 的組合鍵。因此，最后一項檢測是確保沒有按下Ctrl鍵，如下面的例子所示：

textbox.addEventListener("keypress", (event)=> {
if (!/\d/.test(String.fromCharCode(event.charCode)) &&
event.charCode > 9 &&
!event.ctrlKey){
event.preventDefault();
}
});

最后這個改動可以確保所有默認的文本框行為不受影響。這個技術可以用來自定義是否允許在文本框中輸入某些字符。

處理剪貼板

IE 是第一個實現了剪切板相關的事件以及通過JavaScript訪問剪切板數據的瀏覽器，其它瀏覽器在后來也都支持了相同的事件和剪切板的訪問，后來 HTML5 將其納入了規范。以下是與剪切板相關的 6 個事件：

• beforecopy：發生復制操作前觸發。
• copy：發生復制操作時觸發。
• beforecut：發生剪切操作前觸發。
• cut：發生剪切操作時觸發。
• beforepaste：發生粘貼操作前觸發。
• paste：發生粘貼操作時觸發。

剪切板事件的行為及相關對象會因瀏覽器而異。在 Safari、Chrome 和 Firefox 中，beforecopy、beforecut 和 beforepaste 事件只會在顯示文本框的上下文菜單時觸發，但 IE 不僅在這種情況下觸發，也會在 copy、cut 和 paste 事件在所有瀏覽器中都會按預期觸發。

在實際的事件發生之前，通過beforecopy、beforecut 和 beforepaste 事件可以在向剪貼板發送或從中檢索數據前修改數據。不過，取消這些事件并不會取消剪貼板操作。要阻止實際的剪貼板操作，必須取消 copy、cut和 paste 事件。

剪貼板的數據通過 clipboardData 對象來獲取，且clipboardData 對象提供 3 個操作數據的方法：

• getData(format)：從剪貼板獲取指定格式的數據，接收的參數為指定獲取的數據格式，如果沒有指定數據格式或指定數據格式不存在，則此方法返回一個空字符串。
• setData(format, data)：給剪貼板賦予指定格式的數據，第一個參數指定數據格式，第二個參數為第一個參數賦予數據。如果指定數據格式不存在，則將其添加到數據存儲的末尾；如果指定數據格式存在，則將數據替換在指定數據格式的位置。
• clearData(format)：刪除指定格式的數據，接收的參數為指定要刪除的數據格式，如果指定格式不存在，則此方法不執行任何操作；如果此參數為空字符串或未提供，則將刪除所有格式的數據。

而 clipboardData 對象在 IE 中使用 window 獲取，在 Firefox、Safari 和 Chrome 中使用 event 獲取。為防止未經授權訪問剪貼板，只能在剪貼板事件期間訪問 clipboardData 對象；IE 會在任何時候都暴露 clipboardData 對象。因此，要兼容兩者，最好在剪貼板事件期間使用該對象。

function getClipboardText(event){
    var clipboardData=(event.clipboardData || window.clipboardData);
    return clipboardData.getData("text");
}
function setClipboardText (event, value){
    if (event.clipboardData){
        return event.clipboardData.setData("text/plain", value);
    } else if (window.clipboardData){
        return window.clipboardData.setData("text", value);
    }
}

如果文本框只有數字，那剪貼時，就需要使用paste事件檢查剪貼板上的文本是否無效。如果無效，可以取消默認行為：

input.addEventListener("paste", (event)=> {
    let text=getClipboardText(event);
    if (!/^\d*$/.test(text)){
        event.preventDefault();
    }
});

注意：Firefox、Safari和Chrome只允許在onpaste事件中訪問getData()方法。

自動切換

在 JavaScript 中，可以用在當前字段完成時自動切換到下一個字段的方式來增強表單字段的易用性。比如，常用手機號分為國家好加手機號。因此，我們設置 2 個文本框：

<form>
    <input type="text" name="phone1" id="phone-id-1" maxlength="4">
    <input type="text" name="phone2" id="phone-id-2" maxlength="11">
</form>

當文本框輸入到最大允許字符數后，就把焦點移到下一個文本框，這樣可以增加表單的易用性并加速數據輸入。如下所示：

<script>
    function tabForward(event){
        let target=event.target;
        if (target.value.length==target.maxLength){
            let form=target.form;
            for (let i=0, len=form.elements.length; i < len; i++) {
                if (form.elements[i]==target) {
                    if (form.elements[i+1]) {
                        form.elements[i+1].focus();
                    }
                    return;
                }
            }
        }
    }
    let inputIds=["phone-id-1", "phone-id-2"];
    for (let id of inputIds) {
        let textbox=document.getElementById(id);
        textbox.addEventListener("keyup", tabForward);
    }
</script>

這里，tabForward() 函數通過比較用戶輸入文本的長度與 maxLength 屬性的值來檢測輸入是否達到了最大長度。如果兩者相等，就通過循環表中的元素集合找到當前文本框，并把焦點設置到下一個元素。

注意：上面的代碼只適用于之前既定的標記，沒有考慮可能存在的隱藏字段。

HTML5

HTML5 新增了一些表單提交前，瀏覽器會基于指定的規則進行驗證，并在出錯時顯示適當的錯誤信息。而驗證會基于某些條件應用到表單字段中。

必填字段

表單字段中添加 required 屬性，用于標注該字段是必填項，不填則無法提交。該屬性適用于<input>、<textarea>和<select>。如下所示：

<input type="text" name="account" required>

也可以通過 JavaScript 檢測對應元素的 required 屬性來判斷表單字段是否為必填項：

let isRequired=document.forms[0].elements["account"].required;

也可以檢測瀏覽器是否支持 required 屬性：

let isRequiredSupported="required" in document.createElement("input");

注意：不同瀏覽器處理必填字段的機制不同。Firefox、Chrome、IE 和Opera 會阻止表單提交并在相應字段下面顯示有幫助信息的彈框，而Safari 什么也不做，也不會阻止提交表單。

更多輸入類型

HTML5 為 <input> 元素增加了幾個新的 type 值。如下所示：

這些輸入表名字段應該輸入的數據類型，并且提供了默認驗證。如下所示：

<input type="email" name="email">
<input type="url" name="homepage">

要檢測瀏覽器是否支持新類型，可以在 JavaScript 中創建 <input> 并設置 type 屬性，之后讀取它即可。老版本中會將我只類型設置為 text，而支持的會返回正確的值。如下所示：

let input=document.createElement("input");
input.type="email";
let isEmailSupported=(input.type=="email");

數值范圍

而上面介紹的幾個如 number/range/datetime/datetime-local/date/month/week/time 幾個填寫數字的類型，都可以指定 min/max/step 等幾個與數值有關的屬性。step 屬性用于規定合法數字間隔，如 step="2"，則合法數字應該為 0、2、4、6，依次類推。如下所示：

<input type="number" min="0" max="100" step="5" name="count">

上面的例子是<input>中只能輸入從 0 到 100 中 5 的倍數。

也可以使用 stepUp() 和 stepDown() 方法對 <input> 元素中的值進行加減，它倆會接收一個可選參數，用于表示加減的數值。如下所示：

input.stepUp(); // 加1
input.stepUp(5); // 加5
input.stepDown(); // 減1
input.stepDown(10); // 減10

輸入模式

HTML5 還為文本添加了 pattern 屬性，用于指定一個正則表達式。這樣就可以自己設置 <input> 元素的輸入模式了。如下所示：

<input type="text" pattern="\d+" name="count">

注意模式的開頭和末尾分別假設有^和$。這意味著輸入內容必須從頭到尾都嚴格與模式匹配。

與新增的輸入類型一樣，指定 pattern 屬性也不會阻止用戶輸入無效內容。模式會應用到值，然后瀏覽器會知道值是否有效。通過訪問 pattern 屬性可以讀取模式：

let pattern=document.forms[0].elements["count"].pattern;

使用如下代碼可以檢測瀏覽器是否支持pattern 屬性：

let isPatternSupported="pattern" in document.createElement("input");

檢測有效性

HTML5 新增了 checkValidity() 方法，用來檢測表單中任意給定字段是否有效。而判斷的條件是約束條件，因此必填字段如果沒有值會被視為無效，字段值不匹配 pattern 屬性也會被視為無效。如下所示：

if (document.forms[0].elements[0].checkValidity()){
    // 字段有效，繼續
} else {
    // 字段無效
}

要檢查整個表單是否有效，可以直接在表單上調用checkValidity()方法。這個方法會在所有字段都有效時返回true，有一個字段無效就會返回false：

if(document.forms[0].checkValidity()){
    // 表單有效，繼續
} else {
    // 表單無效
}

validity 屬性會返回一個ValidityState 對象，表示 <input> 元素的校驗狀態。返回的對象包含一些列的布爾值的屬性：

• customError：如果設置了 setCustomValidity() 就返回 true，否則返回false。
• patternMismatch：如果字段值不匹配指定的 pattern 屬性則返回true。
• rangeOverflow：如果字段值大于 max 的值則返回true。
• rangeUnderflow：如果字段值小于 min 的值則返回true。
• stepMisMatch：如果字段值與 min、max 和 step 的值不相符則返回true。
• tooLong：如果字段值的長度超過了 maxlength 屬性指定的值則返回true。
• typeMismatch：如果字段值不是 "email" 或"url" 要求的格式則返回true。
• valid：如果其他所有屬性的值都為false 則返回true。與checkValidity()的條件一致。
• valueMissing：如果字段是必填的但沒有值則返回true。

因此，通過 validity 屬性可以檢查表單字段的有效性，從而獲取更具體的信息，如下所示：

if (input.validity && !input.validity.valid){
    if (input.validity.valueMissing){
        console.log("請指定值.")
    } else if (input.validity.typeMismatch){
        console.log("請指定電子郵件地址.");
    } else {
        console.log("值無效.");
    }
}

禁用驗證

通過指定 novalidate 屬性可以禁止對表單進行任何驗證：

<form method="post" action="/signup" novalidate>
    <!-- 表單元素 -->
</form>

也可以在 JavaScript 通過 noValidate 屬性設置，為 true 表示屬性存在，為 false 表示屬性不存在：

document.forms[0].noValidate=true; // 關閉驗證

如果一個表單中有多個提交按鈕，那么可以給特定的提交按鈕添加formnovalidate 屬性，指定通過該按鈕無需驗證即可提交表單：

<form method="post" action="/foo">
    <!-- 表單元素 -->
    <input type="submit" value="注冊提交">
    <input type="submit" formnovalidate name="btnNoValidate"
value="沒有驗證的提交按鈕">
</form>

也可以使用 JavaScript 設置 formNoValidate 屬性：

// 關閉驗證
document.forms[0].elements["btnNoValidate"].formNoValidate=true;

總結

以上總結了 <input> 和 <textarea> 兩個元素的一些功能，主要是 <input> 元素可以通過設置 type 屬性獲取不同類型的輸入框，可以通過監聽鍵盤事件并檢測要插入的字符來控制文本框的內容。

還有一些與剪貼板相關的事件，并對剪貼的內容進行檢測。還介紹了一些 HTML5 新增的屬性和方法和新增的更多的 <input> 元素的類型，和一些與驗證相關的屬性和方法。

站開發入門指南：表單相關標簽們。

接下來我們來學習一下表單以及相關的元素。

·表單其實英文是叫做fo.rm，在我們平時使用的這種互聯網產品中包括網站也好、app也好，經常會看到這種需要你去填一些資料、填一些文字、填一些數據的這樣一種頁面。像這種頁面其實都是通過表單以及表單的元素去構成、去實現的。

也就是說表單其實是用來收集用戶數據的，它是給用戶去輸入一些數據的。而且輸入完之后，一般它是要跟服務器去發生一些交互的。就是比如說把數據發送到服務器或者在本地處理過后，再給到服務器去進一步的處理或者去保存。所以其實表單這些元素，如果真正要去用起來的話，真正要讓它功能跑起來的話，其實很多時候是要跟js打交道的。所以目前來說只要簡單的去了解一下表單的元素的基本使用就可以了。

·然后后面學了CSS之后，你也知道怎么去給這些表單做它的樣式就OK了。那我們看一下表單以及相關的元素有哪些？表單主要是有一個這樣一個表單本身的標簽，另外這些就是跟它相關的一些標簽元素了。這些元素一般都是放在這個for.m元素里面的嵌套在它里面的。

但是表單的元素，它跟我們之前學過的ul li-olli一定要進行嵌套使用的，這種元素還不太一樣。表單中的元素，像這個和這個是經常可以單獨使用的，也就是說不用嵌套在這個form表單里面也是可以用的。所以要明白這些表單內的元素，如果你有需要是完全可以去獨立的去使用它的，并不一定要跟這個for.m.搭.配起來嵌套在它里面的。

·很多時候去使用form這樣的標簽。然后把這些表單的元素嵌套在里面。它其實主要的一個目的，它是為了讓這些就是收集到的數據組成一種結構化的一種模式，結構化的一種狀態。這樣發送到服務器，服務器也可以通過這種更好的結構去讀取數據。

所以目前的學習階段來講是沒有辦法給你去展示表單的作用。但是等你學到JS之后，你在有了這些基礎知識之后，就能通過JS其實非常清晰看到它的整個數據結構。這節課主要是來講一講這個標簽，這個標簽其實會經常單獨的來進行使用。這個標簽之前也簡單的給大家去演示過，它是一個用來做這種文字輸入的標簽。

很多時候，像這種真實的產品頁面，產品里面會發現很多的輸入欄都是用這個標簽去實現。打開開發者工具之后，可以看到這里有一個這樣的小工具，選用它之后就可以去快速的定位到元素。可以看到它這邊有個input，選中之后，元素列表這里也能看到就是input這樣的元素。所以很多的頁面上的輸入框其實都是用input元素來實現的。

input非常重要的屬性叫做type，type屬性之前演示過一個叫text(的值)，一個叫Checkbox，給大家演示過。這兩個設置之后是會產生不同的效果。這種能設置的屬性的值非常多，我這里不給大家去做演示，你有興趣自己可以去嘗試去使用一下。

這里主要是介紹一個是這個之前講過的，給大家簡單也再看一下。一個是checkbox，一個是checkbox，還有一個file，其他的。

還有pasisword也給大家看一下。這里來看一下。首先看到input非常簡單，直接默認的text它這邊，這邊先把它放大一點，放五倍大，大家看起來清楚一點。這樣就可以在這里輸入這樣一個內容了，非常簡單。

然后比如這里改成password，然后這邊輸入的東西自動的就變成這種小圓點了，就相當于是一種幫你保密，就是防止別人偷看到你的密碼。然后就是checkbox(多選框)。之前簡簡單演示過了checkbox會變成這種勾選的框，它有一個屬性，如果你使用的checkbooks這樣的類型，你可以使用這個checked這樣的屬性，就讓元素默認是打勾(選中)的狀態。

像這種東西其他的前面一般都會有一個文字，告訴你這個選項是什么，然后這里把這個改一下，就叫做選擇。想學習的語言其實一定是可以多選的。這里來一個寫一個span，叫做js好html，然后自己再多復制幾個，然后這里變成CSS，變成javascript。像這種前面這種文字用span都是沒有任何問題的。

但是其實在表單元素里面有一個標簽叫做lab.el。label其實一般用來寫這種，就是告訴這個選項是什么樣的一個選項，這樣的一些文字。label有個特殊的作用，比如說把這個換成label，label之后這里有一個屬性叫做for，for可以去跟比如說input，這里設計一個id叫做html。

稍微跟寫的不一樣，這個其實寫一樣也沒有關系，但是這里寫不一樣，大家可能更容易理解一點。

把名字id名跟這個對應上之后for里面是某個元素的id值，就是input這樣的一個元素的id值，label就跟input元素綁定了。注意這里寫錯了label。

·然后看一下可以點擊文字，就相當于點擊了選項框，其他的用spam包裹的文字是沒有綁定的效果。所以label標簽的作用就是有這樣的一個文字跟相應的元素綁定起來。點擊文字相當于就點擊元素這樣的效果。

·然后可以看一下另外一種叫radio這種單選框的元素，也是用input來實現的。然后來看一下input，把它設置成radio的類型就會變成這樣一個圓點。假如還是按照這種模式，比如說這里把ID也設置一下叫做htmltag，其實跟htmltag類型的數據庫也是一樣的。如果設置checked就默認的，就相當于是選中的狀態。

·如果這里還有單選，這里還有一個，如果叫CSS，把這個先取消掉。這里其實是有兩個選項，兩個可選項，整個的結果是希望是呈現單選的狀態，選中其中另外一個，肯定要呈現一種未選中的狀態。

·現在兩個都可以同時選中，這樣肯定是不行的。所以這里可以用屬性，叫做name，就叫section。下面同時也取名字，也是name同樣的值。

這里可以把它理解成用了同一個名字的單選框，他們最終只能選中其中一個。可以試一下，比如說點CSS，點html，這個東西是單選框里面非常重要的知識點。