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

2016-02-19 15:00 17 1 收藏

下面,图老师小编带您去了解一下网页设计中文本输入框一些参数说明,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - Web开发 】

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

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

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

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。

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

例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


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

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

延伸阅读
标签: Web开发
这个例子主要学习两个参数onblur和onFocus.因为这两个参数以前很少遇到,baidu一下明白了,onblur是控件在失去焦点的时候触发的事件,而onFocus就是成为输入焦点的时候触发的事件,这两个参数都可以和className结合直接调用样式表类名 !DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" "http://www.w3.org/TR/html4/loo...
标签: Web开发
div.IPDiv{background:#ffffff;width:120;font-size:9pt;text-align:center;border:2 ridge threedshadow;border-right:inset threedhighlight;border-bottom:inset threedhighlight; } input.IPInput{width:24;font-size:9pt;text-align:center;border-width:0; }
标签: 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开发
代码如下: //==========测试代码=============== 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...

经验教程

769

收藏

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