网页设计中文本输入框的一些参数说明

2016-02-19 18:52 3 1 收藏

今天图老师小编要向大家分享个网页设计中文本输入框的一些参数说明教程,过程简单易学,相信聪明的你一定能轻松get!

【 tulaoshi.com - Web开发 】

在一般的留言本,论坛等地方都要用到文本输入框,也就是html语言中的textarea,textare包含有众多的参数,学会运用这些参数,就可以随意修改文本输入框的大小和外观,达到你想要的效果,下面就来介绍这些参数,以及如何使用这些参数。 

1、cols,垂直列。在没有做样式表设置的情况下,它表示一行中可容纳下的字节数。例如cols=60,表示一行中最多可容纳60个字节,也就是30个汉字。另外要注意的是,文本框的宽度就是通过这个来调整,输入好cols的数值,然后再定义输入文字字体的大小(不定义的话,会采用默认值),那么文本框的宽度就确定了。

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

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

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

把上面一段代码插到页面的head与/head之间。调用方式:textarea cols=40 rows=10 name=text class="textbox"/textarea。 class=""中的名字对应css里边要用到的设置的名字。熟悉了这些参数,修改和美化文本输入框就很方便了。

来源:http://www.tulaoshi.com/n/20160219/1619280.html

延伸阅读
标签: Web开发
为了提高用户体验,我在午休时候想起了是不是可以用jQuery写个插件。想到不如做到,果然,我实现了这个功能。在写这个插件时我潜意识里想到这样的插件网上应该有人写过,不过我并没有去搜索,你有兴趣可以找一找。下面是插件的源代码。 源代码 代码如下: ;(function($) { $.fn.autoSizeText = function(settings) { var _defaultSetting...
标签: Web开发
YUI中有一种布局思想:栅格决定宽度,内容决定高度,今天讨论的是自适应宽度的输入框,先上代码: !DOCTYPE htmlhtmlheadmeta charset="utf-8"title宽度自适应输入框/titlelink rel="stylesheet" href="http://yui.yahooapis.com/3.0.0/build/cssreset/reset-min.css"style.col{padding:10px;width:500px;ba...
标签: Web开发
1.打开页面,输入框自动获得焦点 2.用户输入关键词,如果是第一次输入,则自动清空默认Value值 Code:关于搜索输入框 .firstInp {color:#999;} .doInp {color:#f60;}
标签: Web开发
代码如下: //==========测试代码=============== head runat="server" title下拉框测试/title script type="text/javascript" src="/js/jquery/jquery-1.3.js"/script script type="text/javascript" $(function(){ var $city= $("#ddlCity"); //填充一些数据 for(var i=1;i=10;i++){ $city.append($("option/").attr("value",i).t...
标签: 耳机 数码
频率响应 频率所对应的灵敏度数值就是频率响应,绘制成图象就是频率响应曲线,人类听觉所能达到的范围大约在20Hz-20000Hz,目前市场上主流的耳机都已达到了这种要求。 频响范围 是指耳机能够放送出的频带的宽度,优秀的耳机频响宽度可达5Hz-40000Hz,而人耳的听觉范围仅在20Hz-20000Hz。值得注意的是界定频响宽度的标准是不同的...

经验教程

888

收藏

80
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部