HTML DOM Textarea 對象

Textarea 對象

Textarea 對象代表 HTML 表單中的一個文本域 (text-area)。

HTML 表單的每一個 <textarea> 標(biāo)簽，都能創(chuàng)建一個Textarea 對象。

您可以通過索引相應(yīng)表單的元素數(shù)組來訪問某個 Textarea 對象，或者使用 getElementById()。

Textarea 對象屬性。

W3C： W3C 標(biāo)準(zhǔn)。

屬性	描述	W3C
cols	設(shè)置或返回 textarea 的寬度。	Yes
defaultValue	設(shè)置或返回文本框中的初始內(nèi)容。	Yes
disabled	設(shè)置或返回 textarea 是否應(yīng)當(dāng)被禁用。	Yes
form	返回對包含該 textarea 的表單對象的引用。	Yes
name	設(shè)置或返回 textarea 的名稱。	Yes
readOnly	設(shè)置或返回 textarea 是否應(yīng)當(dāng)是只讀的。	Yes
rows	設(shè)置或返回 textarea 的高度。	Yes
type	返回該文本框的表單類型。	Yes
value	設(shè)置或返回在 textarea 中的文本。	Yes

Textarea 對象方法

方法	描述	W3C
select()	選擇 textarea 中的文本。	Yes

標(biāo)準(zhǔn)屬性和事件

Textarea 對象同樣支持標(biāo)準(zhǔn)的屬性和事件。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

這里是云端源想IT，幫你輕松學(xué)IT”

嗨~ 今天的你過得還好嗎？

世界微塵里

吾寧愛與憎

- 2024.03.18 -

在互聯(lián)網(wǎng)的世界中，表單是用戶與網(wǎng)站進(jìn)行互動的重要橋梁。無論是注冊新賬號、提交反饋、還是在線購物，表單都扮演著至關(guān)重要的角色。在網(wǎng)頁中，我們需要跟用戶進(jìn)行交互，收集用戶資料，此時就需要用到表單標(biāo)簽。

HTML提供了一系列的表單標(biāo)簽，使得開發(fā)者能夠輕松地創(chuàng)建出功能豐富的表單。今天我們就來深入探討這些標(biāo)簽，了解它們的作用以及如何使用它們來構(gòu)建一個有效的用戶界面。

一、表單的組成

在HTML中，一個完整的表單通常由表單域、表單控件（表單元素）和提示信息三個部分構(gòu)成。

表單域

表單域是一個包含表單元素的區(qū)域
在HTML標(biāo)簽中，<form>標(biāo)簽用于定義表單域，以實現(xiàn)用戶信息的收集和傳遞
<form>會把它范圍內(nèi)的表單元素信息提交給服務(wù)器

表單控件

這些是用戶與表單交云的各種元素，如<input>（用于創(chuàng)建不同類型的輸入字段）、<textarea>（用于多行文本輸入）、<button>（用于提交表單或執(zhí)行其他操作）、<select>和<option>（用于創(chuàng)建下拉列表）等。

提示信息

這些信息通常通過<label>標(biāo)簽提供，它為表單控件提供了描述性文本，有助于提高可訪問性。<label>標(biāo)簽通常與<input>標(biāo)簽一起使用，并且可以通過for屬性與<input>標(biāo)簽的id屬性關(guān)聯(lián)起來。

這三個部分共同構(gòu)成了一個完整的HTML表單，使得用戶可以輸入數(shù)據(jù)，并通過點擊提交按鈕將這些數(shù)據(jù)發(fā)送到Web服務(wù)器進(jìn)行處理。

二、表單元素

在表單域中可以定義各種表單元素，這些表單元素就是允許用戶在表單中輸入或者選擇的內(nèi)容控件。下面就來介紹HTML中常用的表單元素。

1、<form>標(biāo)簽：基礎(chǔ)容器

作用：定義一個表單區(qū)域，用戶可以在其中輸入數(shù)據(jù)進(jìn)行提交。

<form action="submit.php" method="post">

其中action屬性指定了數(shù)據(jù)提交到的服務(wù)器端腳本地址，method屬性定義了數(shù)據(jù)提交的方式（通常為GET或POST）。

2、<input>標(biāo)簽：數(shù)據(jù)輸入

<input>標(biāo)簽是一個單標(biāo)簽，用于收集用戶信息。允許用戶輸入文本、數(shù)字、密碼等。

<input type="text" name="username" placeholder="請輸入用戶名">

type屬性決定了輸入類型，name屬性定義了數(shù)據(jù)的鍵名，placeholder屬性提供了輸入框內(nèi)的提示文本。

<input>標(biāo)簽的屬性

下面舉個例子來說明：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<form>
用戶名：<input type="text" value="請輸入用戶名"><br>
密碼：<input type="password"><br>
性別：男<input type="radio" name="sex" checked="checked"> 女<input type="radio" name="sex"><br>
愛好：吃飯<input type="checkbox"> 睡覺<input type="checkbox"> 打豆豆<input type="checkbox"><br>
<input type="submit" value="免費注冊">
<input type="reset" value="重新填寫">
<input type="button" value="獲取短信驗證碼"><br>
上傳頭像：<input type="file">
</form>
</body>
</html>

3、<label>標(biāo)簽：關(guān)聯(lián)說明

它與輸入字段如文本框、單選按鈕、復(fù)選框等關(guān)聯(lián)起來，以改善網(wǎng)頁的可用性和可訪問性。<label>標(biāo)簽有兩種常見的用法：

1）包裹方式：

在這種用法中，<label>標(biāo)簽直接包裹住關(guān)聯(lián)的表單元素。例如：

<label>用戶名：<input type="text" name="username"></label>

這樣做的好處是用戶點擊標(biāo)簽文本時，關(guān)聯(lián)的輸入字段會自動獲取焦點，從而提供更好的用戶體驗。

2）使用for屬性關(guān)聯(lián)：

在這種用法中，<label>標(biāo)簽通過for屬性與目標(biāo)表單元素建立關(guān)聯(lián)，for屬性的值應(yīng)與目標(biāo)元素的id屬性相匹配。例如：

<label for="username">用戶名：</label><input type="text" id="username" name="username">

這樣做的優(yōu)勢是單擊標(biāo)簽時，相關(guān)的表單元素會自動選中（獲取焦點），從而提高可用性和可訪問性。

4、<select>和<option>標(biāo)簽：下拉選擇

在頁面中，如果有多個選項讓用戶選擇，并且想要節(jié)約頁面空間時，我們可以使用標(biāo)簽控件定義下拉列表。

注意點：

<select>中至少包含一對<option>
在<option>中定義selected=“selected”時，當(dāng)前項即為默認(rèn)選中項

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
籍貫：
<select>
<option>山東</option>
<option>北京</option>
<option>西安</option>
<option selected="selected">火星</option>
</select>
</form>
</body>
</html>

5、<textarea>標(biāo)簽：多行文本輸入

當(dāng)用戶輸入內(nèi)容較多的情況下，我們可以用表單元素標(biāo)簽替代文本框標(biāo)簽。

允許用戶輸入多行文本。

<textarea name="message" rows="5" cols="30">默認(rèn)文本</textarea>

rows和cols屬性分別定義了文本區(qū)域的行數(shù)和列數(shù)。

代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
今日反饋：
<textarea>請在此輸入內(nèi)容</textarea>
</form>
</body>
</html>

6、<button>標(biāo)簽：按鈕控件

創(chuàng)建一個可點擊的按鈕，通常用于提交或重置表單。它允許用戶放置文本或其他內(nèi)聯(lián)元素（如<i>、<b>、<strong>、<br>、<img>等），這使得它比普通的<input type="button">具有更豐富的內(nèi)容和更強(qiáng)的功能。

<button type="submit">提交</button>

type屬性為submit時表示這是一個提交按鈕。

7、<fieldset>和<legend>標(biāo)簽：分組和標(biāo)題

通常用于在HTML表單中對相關(guān)元素進(jìn)行分組，并提供一個標(biāo)題來描述這個組的內(nèi)容。

<fieldset>標(biāo)簽：該標(biāo)簽用于在表單中創(chuàng)建一組相關(guān)的表單控件。它可以將表單元素邏輯分組，并且通常在視覺上通過圍繞這些元素繪制一個邊框來區(qū)分不同的組。這種分組有助于提高表單的可讀性和易用性。

<legend>標(biāo)簽：它總是與<fieldset>標(biāo)簽一起使用。<legend>標(biāo)簽定義了<fieldset>元素的標(biāo)題，這個標(biāo)題通常會出現(xiàn)在瀏覽器渲染的字段集的邊框上方。<legend>標(biāo)簽使得用戶更容易理解每個分組的目的和內(nèi)容。

代碼示例：

<form>
<fieldset>
<legend>個人信息</legend>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="email">郵箱：</label>
<input type="email" id="email" name="email"><br><br>
</fieldset>
<fieldset>
<legend>興趣愛好</legend>
<input type="checkbox" id="hobby1" name="hobby1" value="music">
<label for="hobby1">音樂</label><br>
<input type="checkbox" id="hobby2" name="hobby2" value="sports">
<label for="hobby2">運動</label><br>
<input type="checkbox" id="hobby3" name="hobby3" value="reading">
<label for="hobby3">閱讀</label><br>
</fieldset>
<input type="submit" value="提交">
</form>

在這個示例中，我們使用了兩個<fieldset>元素來組織表單的不同部分。第一個<fieldset>包含姓名和郵箱字段，而第二個<fieldset>包含三個復(fù)選框，用于選擇用戶的興趣愛好。每個<fieldset>都有一個<legend>元素，用于提供標(biāo)題。這樣，用戶在填寫表單時可以更清晰地了解每個部分的內(nèi)容。

想要快速入門前端開發(fā)嗎？推薦一個前端開發(fā)基礎(chǔ)課程，這個老師講的特別好，零基礎(chǔ)學(xué)習(xí)無壓力，知識點結(jié)合代碼，邊學(xué)邊練，可以免費試看試學(xué)，還有各種輔助工具和資料，非常適合新手！點這里前往學(xué)習(xí)哦！云端源想

8、<datalist>標(biāo)簽：預(yù)定義選項列表

<datalist>標(biāo)簽是HTML5中引入的一個新元素，它允許開發(fā)者為輸入字段提供預(yù)定義的選項列表。當(dāng)用戶在輸入字段中輸入時，瀏覽器會顯示一個下拉菜單，其中包含與用戶輸入匹配的預(yù)定義選項。

使用<datalist>標(biāo)簽可以提供更好的用戶體驗，因為它可以幫助用戶選擇正確的選項，而不必手動輸入整個選項。此外，<datalist>還可以與<input>元素的list屬性結(jié)合使用，以將預(yù)定義的選項列表與特定的輸入字段關(guān)聯(lián)起來。

下面是一個使用<datalist>標(biāo)簽的代碼示例：

<form>
<label for="color">選擇你喜歡的顏色：</label>
<input type="text" id="color" name="color" list="colorOptions">
<datalist id="colorOptions">
<option value="紅色">
<option value="藍(lán)色">
<option value="綠色">
<option value="黃色">
<option value="紫色">
</datalist>
<input type="submit" value="提交">
</form>

9、<output>標(biāo)簽：計算結(jié)果輸出

<output>標(biāo)簽是HTML5中引入的一個新元素，它用于顯示計算結(jié)果或輸出。該標(biāo)簽通常與JavaScript代碼結(jié)合使用，通過將計算結(jié)果賦值給<output>元素的value屬性來顯示結(jié)果。

<output>標(biāo)簽可以用于各種類型的計算和輸出，例如數(shù)學(xué)運算、字符串處理、數(shù)組操作等。它可以與<input>元素一起使用，以實時更新計算結(jié)果。

下面是一個使用<output>標(biāo)簽的示例：

<form>
<label for="num1">數(shù)字1：</label>
<input type="number" id="num1" name="num1" oninput="calculate()"><br><br>
<label for="num2">數(shù)字2：</label>
<input type="number" id="num2" name="num2" oninput="calculate()"><br><br>
<label for="result">結(jié)果：</label>
<output id="result"></output>
</form>

<script>
function calculate() {
var num1 = parseInt(document.getElementById("num1").value);
var num2 = parseInt(document.getElementById("num2").value);
var result = num1 + num2;
document.getElementById("result").value = result;
}
</script>

10、<progress>標(biāo)簽：任務(wù)進(jìn)度展示

<progress>標(biāo)簽是HTML5中用于表示任務(wù)完成進(jìn)度的一個新元素。它通過value屬性和max屬性來表示進(jìn)度，其中value表示當(dāng)前完成的值，而max定義任務(wù)的總量或最大值。

示例：

<!DOCTYPE html>
<html>
<head>
<title>Progress Example</title>
</head>
<body>
<h1>File Download</h1>
<progress id="fileDownload" value="0" max="100"></progress>
<br>
<button onclick="startDownload()">Start Download</button>

<script>
function startDownload() {
var progress = document.getElementById("fileDownload");
for (var i = 0; i <= 100; i++) {
setTimeout(function() {
progress.value = i;
}, i * 10);
}
}
</script>
</body>
</html>

在上面的示例中，我們創(chuàng)建了一個名為"fileDownload"的<progress>元素，并設(shè)置了初始值為0，最大值為100。我們還添加了一個按鈕，當(dāng)用戶點擊該按鈕時，會觸發(fā)名為"startDownload"的JavaScript函數(shù)。這個函數(shù)模擬了一個文件下載過程，通過循環(huán)逐步增加<progress>元素的value屬性值，從而顯示下載進(jìn)度。

11、<meter>標(biāo)簽：度量衡指示器

<meter>標(biāo)簽在HTML中用于表示度量衡指示器，它定義了一個已知范圍內(nèi)的標(biāo)量測量值或分?jǐn)?shù)值，通常用于顯示磁盤使用情況、查詢結(jié)果的相關(guān)性等。例如：

<p>CPU 使用率： <meter value="0.6" min="0" max="1"></meter> 60%</p>
<p>內(nèi)存使用率： <meter value="0.4" min="0" max="1"></meter> 40%</p>

在這個示例中，我們使用了兩個<meter>標(biāo)簽來分別顯示CPU和內(nèi)存的使用率。value屬性表示當(dāng)前的測量值，min和max屬性分別定義了測量范圍的最小值和最大值。通過這些屬性，<meter>標(biāo)簽?zāi)軌蚯逦仫@示出資源的使用情況。

需要注意的是，<meter>標(biāo)簽不應(yīng)該用來表示進(jìn)度條，對于進(jìn)度條的表示，應(yīng)該使用<progress>標(biāo)簽。

12、<details>和<summary>標(biāo)簽：詳細(xì)信息展示

<details>和<summary>標(biāo)簽是HTML5中新增的兩個元素，用于創(chuàng)建可折疊的詳細(xì)信息區(qū)域。

<details>標(biāo)簽定義了一個可以展開或折疊的容器，其中包含一些額外的信息。它通常與<summary>標(biāo)簽一起使用，<summary>標(biāo)簽定義了<details>元素的標(biāo)題，當(dāng)用戶點擊該標(biāo)題時，<details>元素的內(nèi)容會展開或折疊。

示例：

<details>
<summary>點擊查看詳細(xì)信息</summary>
<p>這里是一些額外的信息，用戶可以點擊標(biāo)題來展開或折疊這些信息。</p>
</details>

在這個示例中，我們使用了<details>標(biāo)簽來創(chuàng)建一個可折疊的容器，并在其中添加了一個<summary>標(biāo)簽作為標(biāo)題。當(dāng)用戶點擊這個標(biāo)題時，容器的內(nèi)容會展開或折疊。

總結(jié)：

HTML表單標(biāo)簽是構(gòu)建動態(tài)網(wǎng)頁的基石，它們使得用戶能夠與網(wǎng)站進(jìn)行有效的交互。

通過合理地使用這些標(biāo)簽，開發(fā)者可以創(chuàng)建出既美觀又功能強(qiáng)大的表單，從而提升用戶體驗和網(wǎng)站的可用性。所以說，掌握這些標(biāo)簽的使用，對于前端開發(fā)者來說是至關(guān)重要的。

我們下期再見！

END

文案編輯|云端學(xué)長

文案配圖|云端學(xué)長

內(nèi)容由：云端源想分享

表單input：表單是用來收集信息的，由表單控件(表單元素)、提示信息、表單域構(gòu)成。

input控件的屬性及值：

除以上屬性外，input元素type屬性還有一個number屬性值，此為僅可以填數(shù)字，默認(rèn)是可以選擇或者填寫任意數(shù)字，但是當(dāng)type屬性為number屬性值時，可以使用max和min屬性來限制數(shù)字的取值范圍，input更多屬性見HTML5

 <input type="number" min="0"> <!-- min屬性限定最小值為0 -->

label標(biāo)簽：

label標(biāo)簽是為input標(biāo)簽服務(wù)的，用于綁定一個表單元素, 當(dāng)點擊label標(biāo)簽的時候, 被綁定的表單元素就會獲得輸入焦點


    <label> <!-- 1、直接使用label標(biāo)簽包裹要點擊的元素獲得焦點 -->
        姓名：<input type="text">
    </label>
    
    <label for="name">姓名：</label> <!-- 2、使用label標(biāo)簽的for屬性找input元素獲得焦點 -->
    <input id="name" type="text"/>

表單域form：

form元素用于創(chuàng)建一個表單，form中的所有內(nèi)容都會被提交給服務(wù)器;默認(rèn)form標(biāo)簽中需要有一個submit按鈕，如果form里面沒有submit按鈕，那么可以使用button中type屬性為submit的button按鈕，這個buttont按鈕可能不在form表單中，此時可以給type屬性值為submit的button添加form屬性，值為form表單的id值，如：


     <form action="" method="get" name="" id="userform"> <!-- action屬性是指定表單提交給后端的地址，method屬性設(shè)置提交方式，其屬性值有post和get,name屬性用來給表單域定義名字，用于區(qū)分表單域 -->
      姓名：<input type="text">
      年齡：<input type="number" min="0">
    </form>
    <button type="submit" form="userform">提交</button>

文本域textarea：

input元素只能顯示一行內(nèi)容，textarea元素可以顯示多行，一般做留言效果使用，常常被稱為富文本域。


     <!-- rows屬性限定行數(shù)，當(dāng)行數(shù)超過限定后會出現(xiàn)滾動條，cols屬性限定的是列數(shù)，當(dāng)超過限定后會換行。 -->
    <textarea cols="20" rows="10"></textarea>

UEditor：在實際開發(fā)中如果需要用到比較復(fù)雜的富文本域（類似word的，可以上傳視頻圖片等功能）推薦使用第三方插件，這里推薦大家一款使用的富文本插件：UEditor,使用它可以在網(wǎng)頁中實現(xiàn)類似word等編輯，如果想要了解更多及方法請查閱官方文檔：http://fex.baidu.com/ueditor/，當(dāng)然類似的富文本編輯器還有很多，如：CKeditor：https://ckeditor.com/等

富文本編輯器可以自己做，其原理是利用document的execCommand()方法，這個方法實際開發(fā)中很少用，已經(jīng)廢棄，所以一般很少有人了解，如果想要了解更多，可閱讀官方文檔：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/execCommand

下拉列表(下拉菜單)select：


    <body>
        <select name="" id="">
            <optgroup value="" label="分組1"><!-- optgroup標(biāo)簽用來分組 -->>
                <option value="">
                    測試1
                </option>
                <option value="">
                    測試2
                </option>
                <option value="">
                    測試3
                </option>
            </optgroup>
            <optgroup value="" label="分組2">
                <option value="">選項1</option> <!-- select默認(rèn)選擇第一個option，當(dāng)給option加selected屬性時，則會選中此項顯示 -->
                <option value="" selected="selected">選項2</option> <!-- selected屬性的selected屬性值可以省略，其效果不變-->
                <option value="">選項3</option>
            </optgroup>
          </select>
    </body>

塊引用標(biāo)簽：

有的時候會引用名人名言等，此時建議使用引用標(biāo)簽，引用標(biāo)簽分為長引用和短引用兩種，長引用標(biāo)簽效果是插入換行和外邊距，短引用標(biāo)簽的效果是加上虛擬的引號。


    <blockquote>海上生明月，天涯共此時。</blockquote><!-- 長引用標(biāo)簽 -->
    
    <q>引號</q><!-- 段引用會給內(nèi)容加上虛擬的引號，這個引號根本不存在。 -->

提示：本文圖片等素材來源于網(wǎng)絡(luò)，若有侵權(quán)，請發(fā)郵件至郵箱：810665436@qq.com聯(lián)系筆者刪除。

筆者：苦海123

其它問題可通過以下方式聯(lián)系本人咨詢：

QQ：810665436

微信：ConstancyMan

在線咨詢

上一篇：JavaScript中Date對象的那些事兒
下一篇：3種JavaScript 對象轉(zhuǎn)數(shù)組的方法

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML DOM Textarea 對象

一、表單的組成

二、表單元素

您的項目需求