html中怎么写输⼊框,HTML⽂本框参考样式及常见操作技巧⼤
全
在⽹页设计中，常常要使⽤ html ⽂本框来收集⼀些⽤户信息或是制作登录页，虽然只是简单的输⼊框，但是如果加⼊⼀些美化设计会使你的页⾯看起来更加有吸引⼒，下⾯就给⼤家提供了⼀些 html ⽂本框的参考样式和常见的 html 操作技巧，希望对你的⽹页制作有帮助。⾸先我们先看看⼀个最简单的⽂本框是如何实现的？
--------------------------------------------------------------
W3Cschool⽂本输⼊框实例：
--------------------------------------------------------------
如上实例所⽰，其实这个 html ⽂本框样式⾮常简单，⽤到了 css 的伪元素 focus。下⾯我们⼀起来重新做⼀个吧。⾸先我们需要在你的页⾯上添加⼀个⽂本框代码如下:
实例
W3Cschool⽂本输⼊框实例：
尝试⼀下 »
这个是我们最常见到的按钮了，它没有任何的样式。现在我们来添加⼀些好看的样式，代码如下：
实例
.mytxt {
color:#333;
line-height:normal;
font-family:"Microsoft YaHei",Tahoma,Verdana,SimSun;
font-style:normal;
font-variant:normal;
font-size-adjust:none;
font-stretch:normal;
font-weight:normal;
margin-top:0px;
margin-bottom:0px;
margin-left:0px;
padding-top:4px;
padding-right:4px;
padding-bottom:4px;
padding-left:4px;
font-size:15px;
outline-width:medium;
outline-style:none;
outline-color:invert;
border-top-left-radius:3px;
border-top-right-radius:3px;
border-bottom-left-radius:3px;
border-bottom-right-radius:3px;
text-shadow:0px 1px 2px #fff;
background-attachment:scroll;
background-repeat:repeat-x;
background-position-x:left;
background-position-y:top;
background-size:auto;
background-origin:padding-box;
background-clip:border-box;
background-color:rgb(255,255,255);
margin-right:8px;
border-top-color:#ccc;
border-right-color:#ccc;
border-bottom-color:#ccc;
border-left-color:#ccc;
border-top-width:1px;
border-right-width:1px;
border-bottom-width:1px;
border-left-width:1px;
border-top-style:solid;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:solid;
}
当我们添加了样式以后，我们需要在⽂本框中引⽤此样式。修改⽂本框代码如下：
实例
尝试⼀下 »
好了我们基本的⽂本框样式完成了，现在我们需要再次添加 focus 按钮。⾸先简单的介绍⼀下 focus 按钮的作⽤：就是当我们箭头在⽂本框中的时候触发此样式。
添加 css 样式如下：
实例
.mytxt:focus {
border: 1px solid #fafafa;
-webkit-box-shadow: 0px 0px 6px #007eff;
-moz-box-shadow: 0px 0px 5px #007eff;
box-shadow: 0px 0px 5px #007eff;
}
尝试⼀下 »
因为我们⿏标移进去的时候，需要修改边框的颜⾊和⼀些阴影，所以上⾯的代码就够了！希望你能从上⾯的例⼦中得到启发。
现在，我们⼀起来看看⼏个好⽤的 html 表单⽂本框是如何实现的。表单的⽂本框分为单⾏⽂本框和多⾏⽂本框，故名思义，单⾏⽂本框⽤于输⼊⼀些简短的信息，如：姓名、E_mail地址、⼝令等等；多
⾏⽂本框⽤于输⼊内容较长的信息，如：⽤户意见、评论、留⾔等。只要你理解了表单的⽂本框参数的含义，制作接收信息的⽂本框是不难的，请看下⾯的例⼦。
⼀、⼀个单⾏⽂本框的例⼦
本例的源代码如下：
实例
您的姓名：
您的E_mail：
网页设计html代码大全怎么改颜输⼊⼝令：
尝试⼀下 »
本例中⽤了三个单⾏⽂本框来分别接收⽤户的“姓名”、“E_mail地址”和“⼝令”信息，在三个⽂本框中都
设定⽂本框的宽度(size)和最⼤输⼊⽂本长度(maxlength)，在第⼆个⽂本框中还设定了初始值(value)，你可能注意到了，我把每个⽂本框的名称(name)都取成了英⽂名，这样对⽤于程序外理⽐较⽅便，因下例中要⽤这个例⼦。若是⽤电⼦邮件接收表单信息并不⽤程序处理，那么⽤中⽂名⽐较直观。
为了使其成为⼀个具有实际交互功能的表单，加上了⼀个提交按钮，并在
标记中设定了action参数为：action="mailto:3400982550@qq" ，同时把 method 参数设置为：method="post"，这样，⼀旦按下“提交”按钮将会把信息通过电⼦邮件发到“3400982550@qq”信箱。看来制作并不难！是吗？不过要注意：size
的值⼩于 maxlength 的值时，当内容超过输⼊窗⼝的长度时会⾃动滚动；反之，size的值⼤于maxlength的值，超过maxlength长度的内容⽆法输⼊。
⼆、检验⽤户输⼊的信息在上例中，若是⽤户什么信息也不写就按提交按钮，那不是⽩收⼀份邮件吗？要避免这种情况出现，就要对⽤户的输⼊信息进⾏检验，这就要⽤到标记的 onclick 参数，我们在“提交”按钮的标记中把onclick 设置为：οnclick="test(form1)"，
⽽“test(form)”则是⼀个 Javascript ⼦程序，⽤来检验⽂本框的输⼊内容的，它的源代码如下：
实例
把这段程序复制在
与之间，那么⼀旦⽤户按下提交按钮，就会调⽤这段程序对⽤户输⼊的信息进⾏检验，如果信息不正确就会给出提⽰，提醒⽤户输⼊正确的信息。注：在 标记中设置 οnsubmit="test(form1)"也能达到同样的效果。
三、制作⼀个留⾔簿
这个留⾔簿虽简单，但已包含了留⾔簿的基本功能，它是通过邮件的⽅式接收⽤户的信息，⽆需 CGI ⽀持。它的制作也⽐较简单，它采⽤表格产⽣⽴体效果，在表单中先插⼊⼀个表格，并设置好表格的有关参数，在表单⽅⾯，只是⽐例⼀多了⼀个多⾏⽂本框。在标记中设置type="textarea"，不能得到⼀个多⾏⽂本框。我们⽤HTML的另⼀个标记来设置⼀个多⾏⽂本框，若是默认的⽂本框⼤⼩不合适，可通过设定cols和rows参数来调整窗⼝的⼤⼩。其它标记参数的设置同例⼀。本例完成后的源代码如下：
实例
留 ⾔ 簿
姓名：  E_mail:
留 ⾔
尝试⼀下 »
html⽂本框参考样式
输⼊框景背景透明：
实例
尝试⼀下 »
⿏标划过输⼊框，输⼊框背景⾊变⾊：
实例
οnmοuseοut="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" >
尝试⼀下 »
输⼊字时输⼊框边框闪烁(边框为⼩⽅型)：
实例
function borderColor(){
if(self['oText'].style.borderColor=='red'){
self['oText'].style.borderColor = 'yellow';
}else{
self['oText'].style.borderColor = 'red';
}
oTime = setTimeout('borderColor()',400);
}
尝试⼀下 »
输⼊字时输⼊框边框闪烁(边框为虚线)：
实例
#oText{border:1px dotted #ff0000;ryo:expression_r(οnfοcus=function light (){with(document.all.oText)
{style.borderColor= (style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},οnblur=function()
{this.style.borderColor="#ff0000";clearTimeout(timer)})};
尝试⼀下 »
⾃动横向廷伸的输⼊框：
实例
尝试⼀下 »
⾃动向下廷伸的⽂本框：
实例
输⼊⼏个回车试试
尝试⼀下 »
只有下划线的⽂本框：
实例
尝试⼀下 »
软件序列号式的输⼊框：
实例
if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();
—————
尝试⼀下 »
软件序列号式的输⼊框(完整版)：
实例
var sn=new Array();
for(i=0;i
sn=T.value;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。