首頁 web前端 html教學 HTML中的標籤textarea的屬性有哪些

HTML中的標籤textarea的屬性有哪些

Jan 28, 2021 pm 05:30 PM
html textarea

HTML中的標籤textarea的屬性有:1、cols為垂直列;2、name,文字方塊的名稱;3、warp,當【warp="off"】表示該文字區域中不自動換行;4、rows水平列;5、class一般用來呼叫外部css裡邊的設定。

本文操作環境:巨集基底S40-51、HBuilderX.3.0.5&&HTML5版本、Windows10家庭中文版

相關學習推薦:html影片教學

HTML中的標籤textarea的屬性有:

1、cols,垂直列。在沒有做樣式表設定的情況下,它表示一行中可容納下的位元組數。例如cols=60,表示一行中最多可容納60個字節,也就是30個漢字。另外要注意的是,文字方塊的寬度就是透過這個來調整,輸入好cols的數值,然後再定義輸入文字字體的大小(不定義的話,會採用預設值),那麼文字方塊的寬度就確定了。

2、rows,水平列。表示可顯示的行數,例如rows=10,表示可顯示10行。超過10行,則需要拖曳捲軸來瀏覽了。 (同上,文字方塊的高度就是透過這個來控制的。)

3、name,文字方塊的名稱,這項必不可省,因為儲存文字的時候必須用到。

4、warp,當warp="off"表示該文字區域中不自動換行,當然不寫預設是自動換行的。這個參數一般用得比較少。

5、style,這是一個非常實用的參數,可以用來設定文字方塊的背景色,捲動條顏色及形式,邊框色,輸入字體的大小顏色等等。

6、class,一般用來呼叫外部css裡邊的設定。

範例1:設定文字方塊的行數為40,列數為10。名稱為text。表達形式

<textarea cols=40 rows=10 name=text></textarea>

例2:取消文字方塊右邊的捲軸。表達形式

<textarea cols=40 rows=10 name=text style="overflow:auto"></textarea>。style="overflow:auto"

的意思是當輸入的文字超出設定的行數時才自動顯示捲軸。

範例3:設定文字方塊的背景色。

<textarea cols=40 rows=10 name=text style="background-color:BFCEDC"></textarea>

例4:另外設定文字方塊的捲軸顏色,邊框色,以及字體大小,顏色,行距等,都可以直接在style裡設定。不過這些一般都習慣在CSS裡設置,直接呼叫就好了。

下面是一段CSS設定程式碼:應該比較容易看懂,textbox裡邊依序設定的是文字方塊的背景色,上下左右邊框色和厚度,以及輸入字體的大小等。

<style>
.textbox { BACKGROUND: #BFCEDC; BORDER-TOP: #7F9DB9 1px solid; BORDER-LEFT: #7F9DB9 1px solid; BORDER-RIGHT: #7F9DB9 1px solid; BORDER-BOTTOM: #7F9DB9 1px solid; FONT-FAMILY: "宋体", "Verdana", "Arial", "Helvetica"; FONT-SIZE: 12px; TEXT-ALIGN: LIFT;}
</style>

把上面一段程式碼插到頁面的與

之間。呼叫方式:

<textarea cols=40 rows=10 name=text class="textbox"></textarea>

 class=""中的名字對應css裡邊要用到的設定的名字。熟悉了這些參數,修改和美化文字輸入框就很方便了。

範例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网</title>
<script>
function displayResult()
{
    alert(document.getElementById("myTextarea").value);
}
</script>
</head>
<body>
<textarea id="myTextarea" cols="20">
在php中文网,你可以学多很多编程的基础知识,包括 HTML, XML, SQL, 和 PHP 等各种前端内容。
</textarea>
<br>
<button type="button" onclick="displayResult()">弹出 textarea 元素的文本</button>
</body>
</html>

想了解更多程式設計學習,請關注php培訓欄位!

#

以上是HTML中的標籤textarea的屬性有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Laravel 教程
1604
29
PHP教程
1510
276
如何在HTML中嵌入PDF文檔? 如何在HTML中嵌入PDF文檔? Aug 01, 2025 am 06:52 AM

使用標籤是最簡單且推薦的方法,語法為,適用於現代瀏覽器直接嵌入PDF;2.使用標籤可提供更好的控制和備用內容支持,語法為,並在標籤內提供下載鏈接作為不支持時的備用方案;3.可選通過GoogleDocsViewer嵌入,但因隱私和性能問題不建議廣泛使用;4.為提升用戶體驗,應設置合適的高度、使用響應式尺寸(如height:80vh)並提供PDF下載鏈接,以便用戶自行下載查看。

HTML中鏈接標籤中rel屬性的目的是什麼? HTML中鏈接標籤中rel屬性的目的是什麼? Aug 03, 2025 pm 04:50 PM

rel =“ stylesheet” linkscssfilesfilesforstylingthepage; 2.rel =“ pRELOAD” hintstopreloadcritical ricationResourcesourcesorforperformance; 3.rel =“ icon” setSthewebsite’sfavicon; 4.Rel =“ 4.REL =“ necter” selfertAltate's supportAlternate'sporlateRateSlikerSsorsSorsorSorprint; 5.ReL; 5.REL; 5.REL = REL =&QU&QU&QU&QU

如何以HTML表單創建搜索輸入字段 如何以HTML表單創建搜索輸入字段 Aug 02, 2025 pm 04:44 PM

Usetheelementwithinatagtocreateasemanticsearchfield.2.Includeaforaccessibility,settheform'sactionandmethod="get"attributestosenddatatoasearchendpointwithashareableURL.3.Addname="q"todefinethequeryparameter,useplaceholdertoguideuse

HTML中錨標籤的目標屬性的目的是什麼? HTML中錨標籤的目標屬性的目的是什麼? Aug 02, 2025 pm 02:23 PM

ThetargetattributeinanHTMLanchortagspecifieswheretoopenthelinkeddocument.1._selfopensthelinkinthesametab(default).2._blankopensthelinkinanewtaborwindow.3._parentopensthelinkintheparentframe.4._topopensthelinkinthefullwindowbody,removingframes.Forexte

如何使用標籤突出顯示文本? 如何使用標籤突出顯示文本? Aug 04, 2025 pm 04:29 PM

使用標籤可語義化地高亮文本,常用於標識搜索結果或重要內容;2.可通過CSS自定義樣式,如背景色、文字色和邊框;3.應在具有實際意義的上下文中使用,而非僅作視覺裝飾,以提升可訪問性和SEO效果。

如何創建一個在HTML中發送表單數據的提交按鈕 如何創建一個在HTML中發送表單數據的提交按鈕 Aug 02, 2025 pm 04:46 PM

使用元素並設置action和method屬性指定數據提交地址和方式;2.添加帶name屬性的輸入字段以確保數據可被服務器識別;3.使用或創建提交按鈕,點擊後瀏覽器會將表單數據發送至指定URL,由後端處理,完成數據提交。

HTML圖像的longDESC屬性仍然有用嗎 HTML圖像的longDESC屬性仍然有用嗎 Aug 03, 2025 pm 02:15 PM

thelongdescattributeisobsobsobsobsoboorbrowserbrowserandscreenReaderSupport,通常會以usernawareofaveArabledTailedDescriptions.2.2.modernalternationallestlikeinlinatikelikeinlediscriptions,aria-descredions,aria-descorped,semantichIchtMlellelementsSuchatMlelellementsSuchasuchasfigaptereandfigaptiion和ExpandEctentendecontenteconten和ExpantEctEnten

如何使用HTML創建一個在新標籤中打開的鏈接 如何使用HTML創建一個在新標籤中打開的鏈接 Aug 05, 2025 am 04:29 AM

要安全地在新標籤頁中打開鏈接,需使用target="_blank"並始終配合rel="noopener",可選rel="noreferrer"以增強隱私保護,具體步驟為:1.使用href設置目標URL;2.添加target="_blank"使鏈接在新標籤頁打開;3.加上rel="noopener"防止新頁面操控原頁面並提升性能;4.可選rel="noreferrer"以阻止發送

See all articles