html5中怎么把text文本框缩短到1/3

input name="" type="text" style="width:200px; height:20px;" / 里面width是宽度。自己看着调整到你想要的宽度

创新互联专注于凤凰企业网站建设,响应式网站建设,商城网站制作。凤凰网站建设公司,为凤凰等地区提供建站服务。全流程按需求定制设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

html5中如何设置输入框仅允许输入数字

!DOCTYPE html

html

head

meta charset="utf-8" /

title正则 只能输入数字/title

meta name="Keywords" content="" /

meta name="Description" content="" /

link rel="stylesheet" href="css/.css" /

/head

body

input type="text" id="txt" /

button id="btn"确定/button

script

var txt = document.getElementById('txt')

var btn = document.getElementById('btn')

var reg = /^\d*$/

btn.onclick = function(){

var val = txt.value

if( !reg.test(val)){

alert('只能输入数字！')

}

}

/script

/body

/html

html5如何实现文本框下拉选项功能

可以使用HTML5 list 属性。list 属性需要应用到 input 框上，然后内容写一个自定义的 id

然后在任意位置放一对 datalist 标签，并给 datalist 框一个 id，和 list 属性指向的 id 一致即可。

在 datalist 标签下放列表项，每个列表项用 option 元标签来表示，option 标签里用 value 属性填写内容，label 属性来做提示。

下面是示例代码：

form action=""

input type="text" list="url_list" name="text" /

input type="submit" /

/form

datalist id="url_list"

option label="HZ赫兹工作室" value="" /

option label="提示1" value="列表项1" /

option label="提示2" value="列表项2" /

option label="" value="列表项3" /

/datalist

HTML5之前一般使用select标签或者div+js实现

HTML5 文本框中的文本如何储存

如果单单HTML5操作的话，第一次输入文本框的内容通过文本框节点的value拿到结果，然后在文本框上面建立个DIV，把拿到的value值放到DIV节点的innerHTML里面就可以了，但是这是一次性的，第二次就打开网页DIV里面就没值了。

如果要做成论坛发帖形式，那就要重复上面的一些操作，先拿到testarea里面的value，然后通过get或者post到后端php，由php拿到值后放入数据库中。最后每次加载网页时，DIV里面的值就可以通过后端PHP到数据库里面去取。

html5中将文本框内容在表格中显示

可以用html5中的属性 input ="text" placeholder="你想输入的内容"

也可以用js做到 加css样式

代码如下:

style type="text/css"

.in_search {

border:1 none;

color:#999999;

float:left;

font-size:14px;

height:18px;

line-height:18px;

margin:3px 2px;

width:253px;

}

/style

input name="q" class="in_search" onfocus="if(this.value=='请输入你想要输入的内容'){this.value='';}" onblur="if(this.value==''){this.value='请输入你想要输入的内容';}" type="text" value="请输入你想要输入的内容"/

html5的文本框样式有哪些

输入框景背景透明：

input style="background:transparent;border:1px solid #ffffff"

鼠标划过输入框，输入框背景色变色：

INPUT value="Type here" NAME="user_pass" TYPE="text" SIZE="29" onmouseover="this.style.borderColor='black';this.style.backgroundColor='plum'"

style="width: 106; height: 21"

onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black"

输入字时输入框边框闪烁(边框为小方型)：

Script Language="JavaScript"

function borderColor(){

if(self['oText'].style.borderColor=='red'){

self['oText'].style.borderColor = 'yellow';

}else{

self['oText'].style.borderColor = 'red';

}

oTime = setTimeout('borderColor()',400);

}

/Script

input type="text" id="oText" style="border:5px dotted red;color:red" onfocus="borderColor(this);" onblur="clearTimeout(oTime);"

输入字时输入框边框闪烁(边框为虚线)：

style

#oText{border:1px dotted #ff0000;ryo:expression_r(onfocus=function light (){with(document.all.oText){style.borderColor=(style.borderColor=="#ffee00"?"#ff0000":"#ffee00");timer=setTimeout(light,500);}},onblur=function(){this.style.borderColor="#ff0000";clearTimeout(timer)})};

/style

input type="text" id="oText"

自动横向廷伸的输入框：

input type="text" style="huerreson:expression_r(this.width=this.scrollWidth)" value="abcdefghijk"

自动向下廷伸的文本框：

textarea name="content" rows="6" cols="80" onpropertychange="if(this.scrollHeight80) this.style.posHeight=this.scrollHeight+5"输入几个回车试试/textarea

只有下划线的文本框：

input style="border:0;border-bottom:1 solid black;background:;"

软件序列号式的输入框：

script for="T" event="onkeyup"

if(value.length==3)document.all[event.srcElement.sourceIndex+1].select();

/script

input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T7" size="5" maxlength="3"

软件序列号式的输入框(完整版)：

script for="T" event="onkeyup"if(value.length==maxLength)document.all[event.srcElement.sourceIndex+1].focus();/script

script for="T" event="onfocus"select();/script

script for="Submit" event="onclick"

var sn=new Array();

for(i=0;iT.length;i++)

sn=T.value;

alert(sn.join("—"));

/script

input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"—input name="T" size="5" maxlength="3"

input type="submit" name="Submit"

网页标题：html5文本框,html5文本框边框
分享链接：http://kswjz.com/article/dsipcei.html