35开始学网站开发,公司简介模板免费ppt,网站建设运行维护合同,东莞网站没计在使用表单时#xff0c;例如姓名、年龄字段我们可以使用单行文本框#xff0c;但是当涉及到描述信息#xff0c;内容比较多时#xff0c;单行文本框很有可能放不下所有的内容#xff0c;这时就需要用到多行文本框。
在 HTML 中#xff0c;使用 textarea 标签来…在使用表单时例如姓名、年龄字段我们可以使用单行文本框但是当涉及到描述信息内容比较多时单行文本框很有可能放不下所有的内容这时就需要用到多行文本框。
在 HTML 中使用 textarea 标签来表示多行文本框又叫做文本域。与其它 input 标签不同textarea 标签是单闭合标签它包含起始标签和结束标签文本内容需要写在两个标签中间。具体语法格式如下
textarea文本内容/textarea接下来我们通过一段简单的代码来看一下 纯文本复制
form action methodpost描述信息textarea namedescription此处是描述信息/textarea
/form运行效果如图所示 通过运行结果可以发现文本域的右下角有一个收缩按钮拖拽按钮可以手动改变文本域的宽高。这个按钮默认显示也可以隐藏我们来看一下怎么隐藏它呢
form action methodpost描述信息textarea namedescription styleresize:none;此处是描述信息/textarea
/form注意此处用到的是 CSS 样式中的内容读者只需了解即可。当收缩按钮隐藏后不能手动调节文本域的宽高。 同所有表单元素相同文本域要想正确提交也必须设置 name 属性。除了 name 属性以外文本域还有其它属性接下来我们看一下
文本域其它属性
cols ----用来指定每行显示的字符数。rows---- 用来指定正常情况下没有滚动条显示的文本行数。id---- 用来定义文本域的唯一 id 属性。
1、 cols属性
cols 属性用来指定每行可以显示的字符数也就是文本域的可见宽度。一般情况下如果内容超出文本域宽度会自动换行显示但是如果文本内容较长而且在大于文本域宽度时还没有空格可以进行换行就会出现横向滚动条。
我们来看一个示例
form action methodpost许三观对儿子们说textarea namedescription cols40我知道你们心里最想的是什么。就是吃你们想吃米饭想吃用油炒出来的菜想吃鱼啊肉啊的。今天我过生日你们都跟着享福了连糖都吃到了可我知道你们心里还想吃还想吃什么。/textarea
/form通过运行结果可以发现当文本内容超出了文本域的宽度时会自动换行显示。这时出现了纵向的滚动条是因为高度不够。下面我们就来学习一下如何设置文本域的高度。
2. rows属性
在文本域中rows 属性用来设置文本域的可见行数也就是文本域的高度。当文本内容超出设置高度时会出现纵向滚动条。用户拖动滚动条可以查看全部内容。
示例如下
form action methodpost许三观对儿子们说textarea namedescription cols40 rows6我知道你们心里最想的是什么。就是吃你们想吃米饭想吃用油炒出来的菜想吃鱼啊肉啊的。今天我过生日你们都跟着享福了连糖都吃到了可我知道你们心里还想吃还想吃什么。/textarea
/form运行结果如图所示 通过运行结果可以看出当文本高度小于文本域高度时不会出现纵向滚动条。 注意除了使用 rows、cols 属性设置文本域的宽高css 也可以实现 3. id属性
id 属性用来定义文本域的唯一 id 值。为文本域添加 id 属性主要有以下 2 个方面
在 css 中可以使用 id 获取元素为其添加 css 样式在 JavaScript 中可以根据设置好的 id 属性获取文本域然后对它进行一系列操作例如操作文本域的内容。
