HTML/CSS文本輸入框?qū)傩栽趺从?/h1>

這篇“HTML/CSS文本輸入框?qū)傩栽趺从谩蔽恼碌闹R點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML/CSS文本輸入框?qū)傩栽趺从谩蔽恼掳伞?/p>

創(chuàng)新互聯(lián)公司"三網(wǎng)合一"的企業(yè)建站思路。企業(yè)可建設(shè)擁有電腦版、微信版、手機版的企業(yè)網(wǎng)站。實現(xiàn)跨屏營銷，產(chǎn)品發(fā)布一步更新，電腦網(wǎng)絡(luò)+移動網(wǎng)絡(luò)一網(wǎng)打盡，滿足企業(yè)的營銷需求！創(chuàng)新互聯(lián)公司具備承接各種類型的網(wǎng)站制作、網(wǎng)站建設(shè)項目的能力。經(jīng)過十多年的努力的開拓，為不同行業(yè)的企事業(yè)單位提供了優(yōu)質(zhì)的服務(wù)，并獲得了客戶的一致好評。

文本輸入框的屬性有：1、accept，規(guī)定通過文件上傳來提交的文件的類型；2、alt，定義圖像輸入的替代文本；3、disabled，定義禁用狀態(tài)；4、formaction，規(guī)定當(dāng)表單提交時處理輸入控件的文件的URL；5、formtarget，規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞；6、cols，規(guī)定文本區(qū)域內(nèi)可見的寬度；7、readonly，等于只讀狀態(tài)。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

在HTML/CSS中，文本輸入框有兩種：

  • input：單行文本輸入框

  • textarea：多行文本輸入框

下面我們就來聊聊這兩個輸入框支持的屬性。

input輸入框的屬性

<input> 標(biāo)簽規(guī)定了用戶可以在其中輸入數(shù)據(jù)的輸入字段。

屬性值描述
acceptaudio/* video/* image/*MIME_type規(guī)定通過文件上傳來提交的文件的類型。 (只針對type="file")
alignleft right top middle bottomHTML5已廢棄，不贊成使用。規(guī)定圖像輸入的對齊方式。 (只針對type="image")
alttext定義圖像輸入的替代文本。 (只針對type="image")
autocompleteon offautocomplete 屬性規(guī)定 <input> 元素輸入字段是否應(yīng)該啟用自動完成功能。
autofocusautofocus屬性規(guī)定當(dāng)頁面加載時 <input>  元素應(yīng)該自動獲得焦點。
checkedcheckedchecked 屬性規(guī)定在頁面加載時應(yīng)該被預(yù)先選定的  <input> 元素。 (只針對 type="checkbox" 或者 type="radio")
disableddisableddisabled 屬性規(guī)定應(yīng)該禁用的 <input> 元素。
formform_idform 屬性規(guī)定 <input> 元素所屬的一個或多個表單。
formactionURL屬性規(guī)定當(dāng)表單提交時處理輸入控件的文件的 URL。(只針對 type="submit" 和 type="image")
formenctypeapplication/x-www-form-urlencoded multipart/form-data text/plain屬性規(guī)定當(dāng)表單數(shù)據(jù)提交到服務(wù)器時如何編碼(只適合 type="submit" 和 type="image")。
formmethodget post定義發(fā)送表單數(shù)據(jù)到 action URL 的 HTTP 方法。 (只適合 type="submit" 和 type="image")
formnovalidateformnovalidateformnovalidate 屬性覆蓋 <form> 元素的 novalidate 屬性。
formtarget_blank _self _parent _topframename規(guī)定表示提交表單后在哪里顯示接收到響應(yīng)的名稱或關(guān)鍵詞。(只適合 type="submit" 和 type="image")
heightpixels規(guī)定  <input>元素的高度。(只針對type="image")
listdatalist_id屬性引用  <datalist> 元素，其中包含 <input> 元素的預(yù)定義選項。
maxnumber date屬性規(guī)定 <input> 元素的最大值。
maxlengthnumber屬性規(guī)定 <input> 元素中允許的最大字符數(shù)。
minnumber date屬性規(guī)定 <input>元素的最小值。
multiplemultiple屬性規(guī)定允許用戶輸入到 <input> 元素的多個值。
nametextname 屬性規(guī)定 <input> 元素的名稱。
patternregexppattern 屬性規(guī)定用于驗證 <input> 元素的值的正則表達式。
placeholdertextplaceholder 屬性規(guī)定可描述輸入 <input> 字段預(yù)期值的簡短的提示信息 。
readonlyreadonlyreadonly 屬性規(guī)定輸入字段是只讀的。
requiredrequired屬性規(guī)定必需在提交表單之前填寫輸入字段。
sizenumbersize 屬性規(guī)定以字符數(shù)計的  <input> 元素的可見寬度。
srcURLsrc 屬性規(guī)定顯示為提交按鈕的圖像的 URL。 (只針對 type="image")
stepnumberstep 屬性規(guī)定 <input> 元素的合法數(shù)字間隔。
typebutton
checkbox
color
date
datetime
datetime-local
email
file
hidden
image
month
number
password
radio
range
reset
search
submit
tel
text
time
url
week		type 屬性規(guī)定要顯示的  <input> 元素的類型。
valuetext指定 <input> 元素 value 的值。
widthpixelswidth 屬性規(guī)定  <input> 元素的寬度。  (只針對type="image")

type 屬性規(guī)定要顯示的 <input> 元素的類型，默認類型是：text。

HTML5中新增的type屬性值示例

  • color

HTML/CSS文本輸入框?qū)傩栽趺从?></p><p>點擊時彈出顏色選擇器，可以選擇任意顏色</p><ul><li><p>number</p></li></ul><p><img src=屬性值描述autofocusautofocus規(guī)定當(dāng)頁面加載時，文本區(qū)域自動獲得焦點。colsnumber規(guī)定文本區(qū)域內(nèi)可見的寬度。disableddisabled規(guī)定禁用文本區(qū)域。formform_id定義文本區(qū)域所屬的一個或多個表單。maxlengthnumber規(guī)定文本區(qū)域允許的最大字符數(shù)。nametext規(guī)定文本區(qū)域的名稱。placeholdertext規(guī)定一個簡短的提示，描述文本區(qū)域期望的輸入值。readonlyreadonly規(guī)定文本區(qū)域為只讀。requiredrequired規(guī)定文本區(qū)域是必需的/必填的。rowsnumber規(guī)定文本區(qū)域內(nèi)可見的行數(shù)。wraphard
soft規(guī)定當(dāng)提交表單時，文本區(qū)域中的文本應(yīng)該怎樣換行。

textarea文本區(qū)域中可容納無限數(shù)量的文本，其中的文本的默認字體是等寬字體（通常是 Courier）。

可以通過 cols 和 rows 屬性來規(guī)定 textarea 的尺寸大小，不過更好的辦法是使用 CSS 的 height 和 width 屬性。

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
</head>
<body>

<textarea rows="10" cols="30">
我是一個文本框。
</textarea>

</body>
</html>

HTML/CSS文本輸入框?qū)傩栽趺从?></p><p>以上就是關(guān)于“HTML/CSS文本輸入框?qū)傩栽趺从谩边@篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。</p> <p> 當(dāng)前標(biāo)題：<a href=HTML/CSS文本輸入框?qū)傩栽趺从?/a>
分享地址：http://muchs.cn/article44/ijdjhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、靜態(tài)網(wǎng)站、網(wǎng)站內(nèi)鏈、網(wǎng)站策劃、移動網(wǎng)站建設(shè)、做網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站