CSS設(shè)計符合Web標(biāo)準(zhǔn)的網(wǎng)頁表單的幾個技巧
互聯(lián)網(wǎng) 發(fā)布時間:2008-10-17 19:28:06 作者:佚名
我要評論

本文總結(jié)了用div css進行網(wǎng)頁表單布局的五個小技巧可以幫助你更靈活的控制表單,使頁面更加滿意。
1、表單文本輸入的移動選擇:
在文本輸入欄中,如果加入了提示,來訪者往往要用鼠標(biāo)選取后刪除,再輸入有用的信息。其實只要加入onMouseOver="this.focus
本文總結(jié)了用div css進行網(wǎng)頁表單布局的五個小技巧可以幫助你更靈活的控制表單,使頁面更加滿意。
1、表單文本輸入的移動選擇:
在文本輸入欄中,如果加入了提示,來訪者往往要用鼠標(biāo)選取后刪除,再輸入有用的信息。其實只要加入onMouseOver="this.focus()" onFocus="this.select()" 代碼到 <textarea> 中,一切就會變得簡單多了,如:
<textarea name=textarea wrap=virtual rows=2 cols=22 onMouseOver="this.focus()" onFocus="this.select()">Input English..</textarea>
類似的,可以加入代碼到<input>。
2、表單輸入單元點擊刪除:
本列同上則作用類似,只是使用鼠標(biāo)上略有變化,需要點擊而不像上則的只要鼠標(biāo)覆蓋。如:
<input type=text name="address" size=19 value="Enter,e-mail..."onFocus="this.value=''">
點擊輸入單元后,提示信息會刪除,是不是很方便。
3、表單輸入單元的邊框設(shè)置:
更改傳統(tǒng)的表單單元邊框,會讓你的主頁生色不少。如:
<input type=radio name=action value=subscribe checked style="BORDER-BOTTOM: dashed 1px; BORDER-LEFT: dashed 1px; BORDER-RIGHT: dashed 1px; BORDER-TOP: dashed 1px;background-color: #FEF5C8">
其中"style=***"為左右上下和背景色設(shè)置,適用于其它單元,請讀者親自試試。
4、表單輸入單元的文字設(shè)置:
表單中單元的字體是可以修改的,如:
<input type=text name="address" size=19 value="Enter,e-mail..." style=font-family:"verdana";font-size:10px >
其中"style=***"為字體和字大小設(shè)置。
5、修改表單屬性為彈出窗口:
大多數(shù)表單激活后,會在當(dāng)前頁面中打開,影響正常瀏覽。不如修改一下,如:
<form method=POST action=url target=_blank>
其中"target=_blank"為控制在彈出窗口打開。
相關(guān)文章
AudioContext 實現(xiàn)音頻可視化(web技術(shù)分享)
這篇文章主要分享的是web技術(shù)的 AudioContext 實現(xiàn)音頻可視化,要實現(xiàn)音頻可視化得先實現(xiàn)一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext,下面詳細內(nèi)容2022-02-23- 這篇文章主要給大家介紹了web技術(shù)中的WebRTC記錄音視頻流,文章內(nèi)容圍繞主題展相關(guān)資料,需要的小伙伴可以參考一下,希望對你有所幫助2022-02-23
- 這是我通過網(wǎng)上查閱資料總結(jié)的一些編碼規(guī)范,用于鞏固對html,css頁面重構(gòu)時的基礎(chǔ),需要的朋友可以參考下2020-12-19
前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范
這篇文章主要介紹了前端編碼規(guī)范(4)—— CSS 和 Sass (SCSS) 開發(fā)規(guī)范,需要的朋友可以參考下2017-01-21Web前端開發(fā)規(guī)范2017(HTML/JavaScript/CSS)
這是一份旨在增強團隊的開發(fā)協(xié)作,提高代碼質(zhì)量和打造開發(fā)基石的編碼風(fēng)格規(guī)范,其中包含了 HTML, JavaScript 和 CSS/SCSS 這幾個部分。我們知道,當(dāng)一個團隊開始指定并實行2017-01-21- 這篇文章主要為大家介紹了前端開發(fā)團隊遵循和約定的代碼書寫規(guī)范,意在提高代碼的規(guī)范性和可維護性,需要的朋友可以參考下2017-01-21
響應(yīng)式Web之流式網(wǎng)格系統(tǒng)
這篇文章主要為大家詳細介紹了響應(yīng)式Web之流式網(wǎng)格系統(tǒng)的相關(guān)資料,感興趣的小伙伴們可以參考一下2016-07-04在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法
下面小編就為大家分享一篇在網(wǎng)頁標(biāo)題欄上和收藏夾顯示網(wǎng)站logo的實現(xiàn)方法。希望對大家有所幫助。一起跟隨小編過來看看吧,祝大家游戲愉快哦2016-03-16Visual Foxpro 6.0 中文版安裝向?qū)?圖解)
基于很多用戶都在下載Visual Foxpro 6.0,但是有安裝vtp6.0經(jīng)驗的朋友確很少,在安裝過程中總會出現(xiàn)這樣那樣的問題,基于這些問題,下面小編抽個時間把Visual Foxpro 6.02015-09-09網(wǎng)站日志200 0 64狀態(tài)碼的分析(協(xié)議子狀態(tài))
網(wǎng)站日志200 0 64狀態(tài)碼的分析介紹2012-10-29