HTML/CSS文字輸入框有哪些屬性

文字輸入框的屬性有：1、accept，規定透過檔案上傳來提交的檔案的類型；2、alt，定義圖片輸入的替代文字；3、disabled，定義停用狀態；4、formaction ，規定當表單提交時處理輸入控制項的文件的URL；5、formtarget，規定表示提交表單後在哪裡顯示接收到回應的名稱或關鍵字；6、cols，規定文字區域內可見的寬度；7、readonly ，等於唯讀狀態。

本教學操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。

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

• input：單行文字輸入方塊

• textarea ：多行文字輸入框

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

input輸入框的屬性

<input> 標籤規定了使用者可以在其中輸入資料的輸入欄位。

屬性	值	描述
#accept	audio/* video/* image/*MIME_type	規定透過檔案上傳來提交的檔案的類型。 (只針對type="file")
align	left right top middle bottom	HTML5已被廢棄，不贊成使用。規定影像輸入的對齊方式。 (只針對type="image")
alt	#text	定義影像輸入的替代文本。 (只針對type="image")
autocomplete	#on off	autocomplete 屬性規定 <input> 元素輸入欄位是否應該啟用自動完成功能。
autofocus	autofocus	#屬性規定當頁面載入時 <input>  元素應該會自動取得焦點。
checked	checked	checked 屬性規定在頁面載入時應該被預先選定的  <input> 元素。 (只針對type="checkbox" 或type="radio")
disabled	disabled	disabled 屬性規定應該停用的<input>
form	form_id	#form 屬性規定 <input> 元素所屬的一個或多個表單。
formaction	URL	#屬性規定當表單提交時處理輸入控制項的檔案的 URL。 (只針對 type="submit" 和 type="image")
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	屬性規定表單資料提交到伺服器時如何編碼(只適合 type="submit" 和 type="image")。
formmethod	get post	定義傳送表單資料到 action URL 的 HTTP 方法。 (只適合type="submit" 和type="image")
formnovalidate	formnovalidate	formnovalidate 屬性覆寫 元素的novalidate 屬性。
formtarget	_blank _self _parent _topframename	規定表示提交表單後在哪裡顯示接收到回應的名稱或關鍵字。 (只適合type="submit" 和type="image")
height	pixels	規定 元素的高度。 (只針對type="image")
list	datalist_id	屬性引用
max	number date	屬性規定 <input> 元素的最大值。
maxlength	number	#屬性規定 <input> 元素中允許的最大字元數。
min	number date	屬性規定 <input>元素的最小值。
multiple	multiple	#屬性規定允許使用者輸入到 <input> 元素的多個值。
name	text	#name 屬性規定 <input> 元素的名稱。
pattern	regexp	#pattern 屬性規定用於驗證 <input> 元素的值的正規表示式。
placeholder	text	#placeholder 屬性規定可描述輸入 <input> 欄位預期值的簡短的提示訊息 。
readonly	readonly	readonly 屬性規定輸入欄位是唯讀的。
required	required	屬性規定必須在提交表單之前填入輸入欄位。
size	number	size 屬性規定以字元數計的  <input> 元素的可見寬度。
src	URL	#src 屬性規定顯示為提交按鈕的圖片的 URL。 (只針對 type="image")
step	number	step 屬性規定<input> 元素的合法數字間隔。
type	button checkbox color date datetime datetime-local email file hidden image month number password radio range reset search submit tel text time url week	type 屬性規定要顯示的 < ;input> 元素的類型。
value	text	#指定 <input> 元素 value 的值。
width	pixels	width 屬性規定  <input> 元素的寬度。 (只針對type="image")

type 屬性規定要顯示的 <input> 元素的類型，預設類型是：text。

HTML5中新增的type屬性值範例

• #color

點擊時彈出顏色選擇器，可以選擇任意顏色

• number

輸入範圍內的數字，可以手動輸入超出範圍的數字，但不能提交

• tel
  輸入電話號碼，只有safari支援

• email
  自帶偵測功能，提交時會偵測是否包含@符，@符前後是否有字元

• range
  

• url
  輸入的網址必須是http://開頭，且後面必須有字符，否則不能提交

• #search

  定義用於輸入搜尋字串的文字欄位
  

• #日期控制項- date

<input>

• 時間控制項- time

<input>
<input>

• 日期時間控制項- datetime-local

#

<input>

• 月控制項- month

<input>

• 週控制項- week

<input>

• 日期時間控制項--datetime

#

<input>

說明：日期時間控制項也支援min和max屬性，表示可設定的最小和最大時間

<input>

textarea輸入框的屬性

##<table class="reference notranslate"> <tbody> <tr class="firstRow">屬性<th align="left" width="20%"></th>值<th align="left" width="20%"></th>描述<th align="left" width="60%"></th> </tr> <tr>autofocus<td style="word-break: break-all;"></td>autofocus <td style="word-break: break-all;"></td>規定當頁面載入時，文字區域自動獲得焦點。 <td></td> </tr> <tr>cols<td></td> <td>number<em></em> </td>#規定文字區域內可見的寬度。 <td></td> </tr> <tr>disabled<td></td>disabled<td></td>規定停用文字區域。 <td></td> </tr> <tr>form<td style="word-break: break-all;"></td> <td>form_id<em></em> </td>#定義文字區域所屬的一個或多個表單。 <td></td> </tr> <tr>maxlength<td style="word-break: break-all;"></td> <td>number<em></em> </td>#規定文字區域允許的最大字元數。 <td></td> </tr> <tr>name<td></td> <td>text<em></em> </td>#規定文字區域的名稱。 <td></td> </tr> <tr>placeholder<td style="word-break: break-all;"></td> <td>text<em></em> </td>#規定一個簡短的提示，描述文字區域期望的輸入值。 <td></td> </tr> <tr>readonly<td></td>readonly<td></td>規定文字區域為唯讀。 <td></td> </tr> <tr>required<td style="word-break: break-all;"></td>required<td></td>規定文字區域是必要的/必填的。 <td></td> </tr> <tr>rows<td></td> <td>number<em></em> </td>#規定文字區域內可見的行數。 <td></td> </tr> <tr>wrap<td style="word-break: break-all;"></td>hard<td># soft<br> </td>規定當提交表單時，文字區域中的文字應該如何換行。 <td></td> </tr> </tbody> <p>textarea文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。</p> <p>可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，不过更好的办法是使用 CSS 的 height 和 width 属性。</p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <textarea rows="10" cols="30"> 我是一个文本框。 </textarea> </body> </html></pre><div class="contentsignin">登入後複製</div></div><p><img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/image/757/742/732/166391495611950HTML/CSS文字輸入框有哪些屬性" class="lazy" title="166391495611950HTML/CSS文字輸入框有哪些屬性" alt="HTML/CSS文字輸入框有哪些屬性"></p> <p>（学习视频分享：<a href="https://www.php.cn/course/list/1.html" target="_blank" textvalue="web前端">web前端</a>）</p> </table>

以上是HTML/CSS文字輸入框有哪些屬性的詳細內容。更多資訊請關注PHP中文網其他相關文章！