HTML에서 textarea 태그의 속성은 무엇입니까?-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

HTML에서 textarea 태그의 속성은 무엇입니까?

coldplay.xixi

Jan 28, 2021 pm 05:30 PM

html textarea

HTML의 텍스트 영역 태그 속성은 다음과 같습니다. 1. cols는 세로 열입니다. 2. 이름, 텍스트 상자의 이름입니다. 4. 행 가로 열 5. 클래스는 일반적으로 외부 CSS에서 설정을 호출하는 데 사용됩니다.

이 기사의 운영 환경: Acer S40-51, HBuilder, cols, 수직 열. 스타일 시트를 설정하지 않고 한 줄에 들어갈 수 있는 바이트 수를 나타냅니다. 예를 들어 cols=60은 한 줄에 최대 60바이트(한자 30자)를 포함할 수 있음을 의미합니다. 또 한 가지 주목할 점은 이를 통해 텍스트 상자의 너비가 조정된다는 점입니다. cols의 값을 입력한 후 입력 텍스트 글꼴의 크기를 정의(정의하지 않은 경우 기본값이 사용됨)한 다음 너비를 조정합니다. 텍스트 상자가 결정됩니다.

2. 행, 가로 열. 표시할 수 있는 행 수를 나타냅니다. 예를 들어, 행=10은 10개의 행을 표시할 수 있음을 의미합니다. 줄이 10개 이상인 경우 스크롤 막대를 끌어서 찾아보아야 합니다. (위와 동일하게 텍스트 상자의 높이를 조절합니다.) 3. name, 텍스트 상자의 이름은 텍스트를 저장할 때 반드시 사용해야 하기 때문에 꼭 필요합니다.

4. warp, warp="off"는 텍스트 영역이 자동으로 줄 바꿈되지 않음을 의미합니다. 물론, 쓰지 않으면 기본적으로 자동으로 줄 바꿈됩니다. 이 매개변수는 일반적으로 덜 자주 사용됩니다. 5. style, 텍스트 상자의 배경색, 스크롤 막대의 색상 및 형태, 테두리 색상, 크기 및 색상을 설정하는 데 사용할 수 있는 매우 실용적인 매개변수입니다. 입력 글꼴 등

6. class는 일반적으로 외부 CSS에서 설정을 호출하는 데 사용됩니다. cols，垂直列。在没有做样式表设置的情况下，它表示一行中可容纳下的字节数。例如cols=60，表示一行中最多可容纳60个字节，也就是30个汉字。另外要注意的是，文本框的宽度就是通过这个来调整，输入好cols的数值，然后再定义输入文字字体的大小（不定义的话，会采用默认值），那么文本框的宽度就确定了。

2、rows，水平列。表示可显示的行数，例如rows=10，表示可显示10行。超过10行，则需要拖动滚动条来浏览了。（同上，文本框的高度就是通过这个来控制的。）

3、name，文本框的名称，这项必不可省，因为存储文本的时候必须用到。

4、warp，当warp="off"表示该文本区域中不自动换行，当然不写默认是自动换行的。这个参数一般用得比较少。

5、style，这是个非常实用的参数，可以用来设置文本框的背景色，滚动条颜色及形式，边框色，输入字体的大小颜色等等。

6、class

예제 1: 텍스트 상자의 행 수를 40으로, 열 수를 10으로 설정합니다. 이름은 텍스트입니다. 표현식

<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: 또한 텍스트 상자의 스크롤 막대 색상, 테두리 색상, 글꼴 크기, 색상, 줄 간격 등을 스타일에서 직접 설정할 수 있습니다. 그러나 이는 일반적으로 CSS에 설정되며 직접 호출할 수 있습니다.

다음은 CSS 설정 코드입니다. 텍스트 상자에 설정되는 것은 텍스트 상자의 배경색, 상하좌우 테두리의 색상 및 두께, 그리고 입력 글꼴의 크기 등

<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>

로그인 후 복사