HTML 簡單的&lt;textarea&gt; 標(biāo)簽

例

一個 HTML 文本區(qū)域：

我是一個文本框。

</textarea>

瀏覽器支持

所有主流瀏覽器都支持 <textarea> 標(biāo)簽。

標(biāo)簽定義及使用說明

<textarea> 標(biāo)簽定義一個多行的文本輸入控件。

文本區(qū)域中可容納無限數(shù)量的文本，其中的文本的默認(rèn)字體是等寬字體（通常是 Courier）。

可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

HTML 4.01 與 HTML5之間的差異

HTML5 增加了一些新的屬性。

屬性

New：HTML5 中的新屬性。

屬性	值	描述
autofocusNew	autofocus	規(guī)定當(dāng)頁面加載時，文本區(qū)域自動獲得焦點(diǎn)。
cols	number	規(guī)定文本區(qū)域內(nèi)可見的列數(shù)。
disabled	disabled	規(guī)定禁用文本區(qū)域。
formNew	form_id	定義文本區(qū)域所屬的一個或多個表單。
maxlengthNew	number	規(guī)定文本區(qū)域允許的最大字符數(shù)。
name	text	規(guī)定文本區(qū)域的名稱。
placeholderNew	text	規(guī)定一個簡短的提示，描述文本區(qū)域期望的輸入值。
readonly	readonly	規(guī)定文本區(qū)域為只讀。
requiredNew	required	規(guī)定文本區(qū)域是必需的/必填的。
rows	number	規(guī)定文本區(qū)域內(nèi)可見的行數(shù)。
wrapNew	hardsoft	規(guī)定當(dāng)提交表單時，文本區(qū)域中的文本應(yīng)該怎樣換行。

全局屬性

<textarea> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<textarea> 標(biāo)簽支持 HTML 的事件屬性。

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

頭條創(chuàng)作挑戰(zhàn)賽# 在Excel VBA中，HTMLTextAreaElement對象表示HTML表單中的文本區(qū)域元素。它用于處理用戶輸入的多行文本數(shù)據(jù)。以下是六個示例代碼來解釋說明HTMLTextAreaElement對象的用法：

1、獲取HTMLTextAreaElement元素的值：

Dim textarea As HTMLTextAreaElement
Set textarea = ie.document.getElementById("myTextArea")
MsgBox textarea.Value

2、設(shè)置HTMLTextAreaElement元素的值：

Dim textarea As HTMLTextAreaElement
Set textarea = ie.document.getElementById("myTextArea")
textarea.Value = "Hello, World!"

3、獲取HTMLTextAreaElement元素的行數(shù)：

Dim textarea As HTMLTextAreaElement
Set textarea = ie.document.getElementById("myTextArea")
MsgBox textarea.Rows

4、設(shè)置HTMLTextAreaElement元素的行數(shù)：

Dim textarea As HTMLTextAreaElement
Set textarea = ie.document.getElementById("myTextArea")
textarea.Rows = 5

5、獲取HTMLTextAreaElement元素的列數(shù)：

Dim textarea As HTMLTextAreaElement
Set textarea = ie.document.getElementById("myTextArea")
MsgBox textarea.Cols

6、設(shè)置HTMLTextAreaElement元素的列數(shù)：

Dim textarea As HTMLTextAreaElement
Set textarea = ie.document.getElementById("myTextArea")
textarea.Cols = 10

在這些示例代碼中，我們使用了ie.document.getElementById方法來獲取HTML頁面上具有特定id的HTMLTextAreaElement元素。然后，我們可以使用該元素的各種屬性（例如Value、Rows、Cols）來讀取或設(shè)置相關(guān)信息。這些代碼演示了如何操作HTMLTextAreaElement對象來處理文本區(qū)域元素。

在使用HTMLTextAreaElement對象時，有幾個重要的注意事項：

1、獲取元素對象：在訪問HTMLTextAreaElement對象之前，需要確保文檔已經(jīng)加載完成并且元素已經(jīng)存在?？梢酝ㄟ^ie.document.getElementById或其他獲取元素的方法來獲取HTMLTextAreaElement對象。

2、可用性檢查：在訪問HTMLTextAreaElement對象之前，最好檢查元素的可用性。可以使用If...Is Nothing語句來檢查對象是否為Nothing，以避免在元素不存在時引發(fā)錯誤。

3、屬性訪問：可以通過HTMLTextAreaElement對象的屬性來獲取和設(shè)置相關(guān)信息，如Value、Rows、Cols等。在操作這些屬性時，需要注意其數(shù)據(jù)類型和取值范圍。

4、事件處理：HTMLTextAreaElement對象可以綁定事件處理程序來響應(yīng)用戶的交互。可以使用element.on事件名稱語法或AddHandler語句來為元素添加事件處理程序。

5、樣式和布局：可以使用HTMLTextAreaElement對象的樣式屬性來控制文本區(qū)域的外觀和布局?？梢孕薷脑氐膶挾?、高度、邊框樣式等來滿足特定的需求。

6、向元素添加文本：可以使用HTMLTextAreaElement對象的Value屬性來設(shè)置文本區(qū)域元素的值。注意文本區(qū)域中可以包含多行文本，需要使用適當(dāng)?shù)膿Q行符（如vbCrLf）來分隔每一行。

在使用HTMLTextAreaElement對象時，遵循這些注意事項可以幫助你正確地操作和處理文本區(qū)域元素。

ody

常用標(biāo)簽

body分為塊級和行內(nèi)

塊級獨(dú)占整行
行內(nèi) 內(nèi)容有多少就占多少

文本格式化標(biāo)簽

br 換行

<div>qwer<br/>zxcv</div>

div和span

div 塊級標(biāo)簽樣式

<div style="background-color: green;">qwer</div>

span 行內(nèi)標(biāo)簽樣式

span style="background-color: green;">zxcv</span>

p 段落

<p>hahahahah</p> 
<p>hahahahahaaa</p>

h 標(biāo)題

h1~h6y依次變小

   <div>默認(rèn)文字字體</div>
   <h1>再再再再再粗一點(diǎn)</h1>
   <h2>再再再再粗一點(diǎn)</h2>
   <h3>再再再粗一點(diǎn)</h3>
   <h4>再再粗一點(diǎn)</h4>
   <h5>再粗一點(diǎn)</h5>
   <h6>粗一點(diǎn)</h6>

鏈接

a 超鏈接，跳轉(zhuǎn)到指定的地址

<a href="http://www.baidu.com" title="baidu">百度</a>

錨點(diǎn)，點(diǎn)擊后跳轉(zhuǎn)到指定位置

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>野雞平臺</title>
</head>
<body>
<h1>章節(jié)</h1>
<a href="#i1" title="第一章">第一章 寂寞的春天</a>
<a href="#i2" title="第二章">第二章 寂寞的夏天</a>
<a href="#i3" title="第三章">第三章 寂寞的秋天</a>
<a href="#i4" title="第四章">第四章 寂寞的冬天</a>
<h1>內(nèi)容</h1>
<div style="height: 1000px;" id="i1">
   <h3>第一章 寂寞的春天</h3>
   <p>春暖花開,萬物復(fù)蘇,又到了交配的季節(jié)。</p>
</div>
<div style="height: 1000px;" id="i2">
   <h3>第二章 寂寞的夏天</h3>
   <p>夏天夏天悄悄過去留下小咪咪</p>
</div>
<div style="height: 1000px;" id="i3">
   <h3>第三章 寂寞的秋天</h3>
   <p>今年的秋天真是寂寞呀！！！</p>
</div>
<div style="height: 1000px;" id="i4">
   <h3>第四章 寂寞的冬天</h3>
   <p>下雪</p>
</div>
</body>
</html>

ul ol dl 列表展示

ul 無序列表
ol 有序列表
dl 層級列表
li 列表項目

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>野雞平臺</title>
</head>
<body>
    <ul>
        <li>周杰倫</li>
        <li>林俊杰</li>
        <li>王力宏</li>
    </ul>
    <ol>
        <li>鐵錘</li>
        <li>鋼彈</li>
        <li>狗蛋</li>
    </ol>
    <dl>
        <dt>河北省</dt>
        <dd>邯鄲</dd>
        <dd>石家莊</dd>
        <dt>山西省</dt>
        <dd>太原</dd>
        <dd>平遙</dd>
    </dl>
</body>
</html>

table 表格

table表格標(biāo)題
thead表格標(biāo)題
tr 行標(biāo)簽
th 列名
tbody表格內(nèi)容
tr 列標(biāo)簽
td 列內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <table border="3">   <!--border 選擇表格樣式-->>
        <thead>
            <tr>
                <th>姓名</th>
                <th>年齡</th>
                <th>愛好</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>xxxx</td>
                <td>18</td>
                <td>看書</td>
            </tr>
            <tr>
                <td rowspan="3">aaaa</td>  <!--rowspan 合并單元格-->>
                <td>18</td>
                <td>吃飯</td>
            </tr>
            <tr>
                <td>33</td>>
                <td>heiheihei</td>>
            </tr>>
        </tbody>
    </table>
</body>
</html>

img 圖片

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6666</title>
</head>
<body>
    <!--顯示本地圖片，找不到圖片則顯示alt中的文字-->
    <img src="img/lover.png" alt="美女">
    <!--顯示網(wǎng)絡(luò)圖片-->
    <img src="https://images.cnblogs.com/cnblogs_com/wupeiqi/662608/t_212313579359018.png" alt="妹子">
</body>
</html>

用戶交互

按鈕標(biāo)簽

type

buttom: 普通
submit: 提交
reset: 重置

 <button type="button"> 按鈕 </button>

input

text，文本框。
password，密碼框。
radio，單選框（必須設(shè)置name屬性相同，否則無法實(shí)現(xiàn)）。
checkbox，復(fù)選框。
file，文件上傳。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>666666</title>
</head>
<body>
    <h3>文本框</h3>
    <input type="text">
    <h3>密碼框</h3>
    <input type="password">
    <h3>單選框</h3>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女
    <h3>復(fù)選框</h3>
    <input type="checkbox">籃球
    <input type="checkbox">足球
    <input type="checkbox">橄欖球
    <h3>上傳文件</h3>
    <input type="file">
</body>
</html>

select下拉框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML學(xué)習(xí)</title>
</head>
<body>
    <h3>單選</h3>
    <select>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
    <h3>多選</h3>
    <select multiple>
        <option>上海</option>
        <option>北京</option>
        <option>深圳</option>
    </select>
</body>
</html>

textarea多行文本框

<!DOCTYPE html>
臥槽，無情呀
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>HTML學(xué)習(xí)</title>
</head>
<body>
    <textarea>文本內(nèi)容寫在這里...</textarea>
</body>
</body>
</html>

form表單

用于提交數(shù)據(jù)到后臺

提交時，只會提交form標(biāo)簽內(nèi)部【用戶交互】相關(guān)的標(biāo)簽。
<input type="submit" value="提交"> 用于提交當(dāng)前所在的表單。
<input type="reset" value="重置"> 用于重置當(dāng)前標(biāo)簽中的選項。
form標(biāo)簽內(nèi)置屬性action="/xx/" ，表示表單要提交的地址。method="get"，表示表單的提交方式。enctype="multipart/form-data"，如果form內(nèi)部有文件上傳，必須加上此設(shè)置
form內(nèi)部【用戶交互】相關(guān)標(biāo)簽必須設(shè)置name，不然提交數(shù)據(jù)后后端無法獲取

// 提交表單之后，實(shí)際上會將表單中的數(shù)據(jù)構(gòu)造成一種特殊的結(jié)構(gòu)，發(fā)送給后臺，類似于：
{
    user:用戶輸入的姓名,
  pwd:用戶輸入的密碼,
    ...
}

radio、checkbox、select 除了要設(shè)置name屬性以外，還必須設(shè)置value屬性，因為這三中標(biāo)簽在form表單提交時，不會把看到的內(nèi)容提交到后臺，而是把選擇選項對應(yīng)的value值提交到后臺。

在線咨詢

上一篇：編程常用英語詞匯（比較全）
下一篇：21html模版里的if判斷語句

您的項目需求

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

整合營銷服務(wù)商

HTML 簡單的&amp;lt;textarea&amp;gt; 標(biāo)簽

ody