建站
咨詢
售后
建站咨詢
新聞中心
在網(wǎng)頁設計中，常常要使用 HTML 文本框來收集一些用戶信息或是制作登錄頁，雖然只是簡單的輸入框，但是如果加入一些美化設計會使你的頁面看起來更加有吸引力，下面就給大家提供了一些 html 文本框的參考樣式和常見的 html 操作技巧，希望對你的網(wǎng)頁制作有幫助。首先我們先看看一個最簡單的文本框是如何實現(xiàn)的？
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站設計、成都網(wǎng)站建設與策劃設計,樂東黎族網(wǎng)站建設哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設10余年,網(wǎng)設計領域的專業(yè)建站公司;建站業(yè)務涵蓋:樂東黎族等地區(qū)。樂東黎族做網(wǎng)站價格咨詢:18982081108
--------------------------------------------------------------
W3Cschool文本輸入框實例：
--------------------------------------------------------------
如上實例所示，其實這個 html 文本框樣式非常簡單，用到了 css 的偽元素 focus。下面我們一起來重新做一個吧。首先我們需要在你的頁面上添加一個文本框代碼如下:
實例
W3Cschool文本輸入框實例：
嘗試一下 ?
這個是我們最常見到的按鈕了，它沒有任何的樣式?，F(xiàn)在我們來添加一些好看的樣式，代碼如下：
實例
.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;
}
當我們添加了樣式以后，我們需要在文本框中引用此樣式。修改文本框代碼如下：
實例
嘗試一下 ?
好了我們基本的文本框樣式完成了，現(xiàn)在我們需要再次添加 focus 按鈕。首先簡單的介紹一下 focus 按鈕的作用：就是當我們箭頭在文本框中的時候觸發(fā)此樣式。
添加 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;
}
嘗試一下 ?
因為我們鼠標移進去的時候，需要修改邊框的顏色和一些陰影，所以上面的代碼就夠了！希望你能從上面的例子中得到啟發(fā)。
現(xiàn)在，我們一起來看看幾個好用的 html 表單文本框是如何實現(xiàn)的。表單的文本框分為單行文本框和多行文本框，故名思義，單行文本框用于輸入一些簡短的信息，如：姓名、E_mail地址、口令等等；多行文本框用于輸入內(nèi)容較長的信息，如：用戶意見、評論、留言等。只要你理解了表單的文本框參數(shù)的含義，制作接收信息的文本框是不難的，請看下面的例子。
一、一個單行文本框的例子
本例的源代碼如下：
實例
您的姓名：
您的E_mail：
輸入口令：
嘗試一下 ?
本例中用了三個單行文本框來分別接收用戶的“姓名”、“E_mail地址”和“口令”信息，在三個文本框中都設定文本框的寬度（size）和最大輸入文本長度（maxlength），在第二個文本框中還設定了初始值（value），你可能注意到了，我把每個文本框的名稱（name）都取成了英文名，這樣對用于程序外理比較方便，因下例中要用這個例子。若是用電子郵件接收表單信息并不用程序處理，那么用中文名比較直觀。
為了使其成為一個具有實際交互功能的表單，加上了一個提交按鈕，并在
嘗試一下 ?
html文本框參考樣式
輸入框景背景透明：
實例
嘗試一下 ?
鼠標劃過輸入框，輸入框背景色變色：
實例
style="width: 106; height: 21" onmouseout="this.style.borderColor='black';this.style.backgroundColor='#ffffff'" style="border-width:1px;border-color=black"> 嘗試一下 ? 輸入字時輸入框邊框閃爍(邊框為小方型)： function borderColor(){ if(self['oText'].style.borderColor=='red'){ self['oText'].style.borderColor = 'yellow'; }else{ self['oText'].style.borderColor = 'red'; } oTime = setTimeout('borderColor()',400); } 嘗試一下 ? 嘗試一下 ? 自動橫向廷伸的輸入框： 嘗試一下 ? 自動向下廷伸的文本框： 嘗試一下 ? 只有下劃線的文本框： 嘗試一下 ? 軟件序列號式的輸入框： if(value.length==3)document.all[event.srcElement.sourceIndex+1].select(); 嘗試一下 ? 軟件序列號式的輸入框(完整版)： var sn=new Array(); for(i=0;i sn=T.value; alert(sn.join("—")); 嘗試一下 ? 1、html 文本框怎么用 css 變圓角 border-radius 屬性可以實現(xiàn)元素的圓角。如下 css 可以實現(xiàn)文本框（單行、多行）的圓角： border-radius 用法如下： border-radius: 1-4 length|% / 1-4 length|%; 按此順序設置每個 radius 的四個值。 2、HTML中如何設置文本框的大小 邊框的大小，可以使用CSS樣式控制，如： 也可以使用文本框自己的屬性，定義文本框的行和列控制大小，如： 3、在html中如何實現(xiàn)將本網(wǎng)頁中文本框中的值傳遞到另一個網(wǎng)頁的用戶名密碼框中，并實現(xiàn)登陸 在html網(wǎng)頁中，一個按鈕，兩個文本框，在
實例
輸入字時輸入框邊框閃爍(邊框為虛線)： 實例
實例
實例
實例
實例
實例
html文本框常見操作技巧
input[type=text],textarea{border-radius:3px;border:1px solid #000;}
border-radius 屬性是一個簡寫屬性，用于設置四個 border-*-radius 屬性。
該屬性允許為元素添加圓角邊框
語法：
如果省略 bottom-left，則與 top-right 相同。
如果省略 bottom-right，則與 top-left 相同。
如果省略 top-right，則與 top-left 相同。
單位一般用px和百分比較多，其他單位也可