input 表單屬性

GraphQuery 發布于2019-08-01 15:13 / 2381人閱讀

摘要：屬性為用戶由于某些原因無法查看圖像時提供了備選的信息。可用于表單以外的輸入字段覆蓋表單的屬性。值覆蓋表單的屬性。默認在父框架中將表單提交到文檔。屬性規定輸入字段的最大長度，以字符個數計。屬性與或配合使用。提交按鈕會把表單數據發送到服務器。

今天做項目的時候頻繁用到了元素，卻發現好多屬性都不懂。找資料總結。

accept 規定通過文件上傳來提交的文件的類型。

//只能與  配合使用。
//例如只允許上傳圖片文件

align 規定圖像輸入的對齊方式。

值：left | right | top | middle | bottom 【不贊成使用。】

alt 定義圖像輸入的替代文本。

alt 屬性只能與  配合使用。
alt 屬性為用戶由于某些原因無法查看圖像時提供了備選的信息。

autocomplete 規定是否使用輸入字段的自動完成功能。

自動完成允許瀏覽器預測對字段的輸入。
當用戶在字段開始鍵入時，瀏覽器基于之前鍵入過的值，應該顯示出在字段中填寫的選項。
值： on | off
適用于 ，以及下面的  類型：text, search, url, telephone, email, password, datepickers, range 以及 color。

autofocus 規定輸入字段在頁面加載時是否獲得焦點。

【不適用于 type="hidden"】
值：autofocus

checked 規定此 input 元素首次加載時應當被選中。

與  或  配合使用
值：checked

disabled 當 input 元素加載時禁用此元素。

被禁用的 input 元素既不可用，也不可點擊。
值：disabled

form 規定輸入字段所屬的一個或多個表單。

form 屬性的值必須是其所屬表單的 id。
可用于表單以外的輸入字段
...
Last name:

formaction 覆蓋表單的 action 屬性。

（適用于 type="submit" 和 type="image"）

formenctype 覆蓋表單的 enctype 屬性。

（適用于 type="submit" 和 type="image"）
值：

application/x-www-form-urlencoded【在發送前對所有字符進行編碼（默認）。】

multipart/form-data【不對字符編碼。當使用有文件上傳控件的表單時，該值是必需的。】

text/plain【將空格轉換為 "+" 符號，但不編碼特殊字符。】

formmethod 覆蓋表單的 method 屬性。

（適用于 type="submit" 和 type="image"）
值：get | post

formnovalidate 覆蓋表單的 novalidate 屬性。

如果使用該屬性，則提交表單時不進行驗證。
適用于  以及以下類型的 ：text, search, url, telephone, email, password, date pickers, range 以及 color。
值：formnovalidate

formtarget 覆蓋表單的 target 屬性。

（適用于 type="submit" 和 type="image"）
HTML5 不支持框架和框架集。parent, top 和 framename 值大多用于 iframe。

_blank【在新窗口/選項卡中將表單提交到文檔。】

_self【在同一框架中將表單提交到文檔。（默認）】

_parent【在父框架中將表單提交到文檔。】

_top【在整個窗口中將表單提交到文檔】

framename【在指定的框架中將表單提交到文檔。】

list datalist-id 引用包含輸入字段的預定義選項的 datalist 。

網頁：

step 規定輸入字的的合法數字間隔。


//合法數字應該是 -3、0、3、6，以此類推

max 規定輸入字段的最大值。 min 規定輸入字段的最小值。

step、max 和 min 屬性適用于以下  類型：number, range, date, datetime, datetime-local, month, time 以及 week。

maxlength 規定輸入字段中的字符的最大長度。

maxlength 屬性規定輸入字段的最大長度，以字符個數計。
maxlength 屬性與  或  配合使用。

size 定義輸入字段的寬度。

對于  和 ，size 屬性定義的是可見的字符數。
而對于其他類型，size 屬性定義的是以像素為單位的輸入字段寬度。

multiple 如果使用該屬性，則允許一個以上的值。

【需要上傳多個文件時可使用該屬性】

name 定義 input 元素的名稱。

屬性用于對提交到服務器后的表單數據進行標識
或者在客戶端通過 JavaScript 引用表單數據。
只有設置了 name 屬性的表單元素才能在提交表單時傳遞它們的值。

pattern 規定輸入字段的值的模式或格式。

pattern="[0-9]" 表示輸入值必須是 0 與 9 之間的數字。
適用于以下  類型：text, search, url, telephone, email 以及 password 。

placeholder 規定幫助用戶填寫輸入字段的提示。

該提示會在輸入字段為空時顯示，并會在字段獲得焦點時消失。
適用于以下的  類型：text, search, url, telephone, email 以及 password

readonly 規定輸入字段為只讀。

可與  或  配合使用。
只讀字段是不能修改的。不過，用戶仍然可以使用 tab 鍵切換到該字段，還可以選中或拷貝其文本。

required 指示輸入字段的值是必需的。

適用于以下  類型：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。

src URL 定義以提交按鈕形式顯示的圖像的 URL。

只能與  配合使用。

type 規定 input 元素的類型。

button 定義可點擊按鈕。

checkbox 定義復選框。

file 定義輸入字段和 "瀏覽"按鈕，供文件上傳。

hidden 定義隱藏的輸入字段。

image 定義圖像形式的提交按鈕。

password 定義密碼字段。該字段中的字符被掩碼。

radio 定義單選按鈕。

reset 定義重置按鈕。重置按鈕會清除表單中的所有數據。

submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器。

text 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。

value 規定 input 元素的值。

對于不同的輸入類型，value 屬性的用法也不同：
type="button", "reset", "submit" - 定義按鈕上的顯示的文本
type="text", "password", "hidden" - 定義輸入字段的初始值
type="checkbox", "radio", "image" - 定義與輸入相關聯的值
注釋： 和  中必須設置 value 屬性。

width 定義 input 字段的寬度。 height 定義 input 字段的高度

width和height只適用于 type="image"

PS:【對input元素UI自定義】

默認的樣式是這樣的。

利用label for的屬性，可以很好的改變樣式。

上傳文件

上述例子中其實就是隱藏input。所以還可以用

style="visibility:hidden"
或者
style="display:none"

效果圖如下

云服務器 GPU云服務器 form表單提交input 表單對象屬性 Inputs input

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/49841.html

form表單那點事兒(上) 基礎篇

摘要：用于或元素時，將提交指定的表單示例代碼只能上傳圖片只能上傳視頻使用的屬性，是一個類型的值，或文件后綴名。在以前，要想改變表單元素外觀，需要通過其他標簽來模擬。以下點到名的表單元素，還是可以照常使用的。做為html中最為常見，應用最廣泛的標簽之一，form常伴隨前端左右。了解更深，用的更順。表單屬性這個表單展示了form表單常用的屬性屬性名屬性值 ...

Forest10 2019-08-01 15:24 評論0 收藏0
【Vue原理】VModel - 白話版

摘要：執行的時候，會綁定上下文對象為組件實例于是中的就能取到組件實例本身，的代碼塊頂層作用域就綁定為了組件實例于是內部變量的訪問，就會首先訪問到組件實例上。其中的獲取，就會先從組件實例上獲取，相當于。寫文章不容易，點個贊唄兄弟專注 Vue 源碼分享，文章分為白話版和源碼版，白話版助于理解工作原理，源碼版助于了解內部詳情，讓我們一起學習吧研究基于 Vue版本【2.5.17】如果你覺得...

keke 2019-08-23 18:25 評論0 收藏0
前端菜鳥筆記 Day-2 Form表單

摘要：標簽定義表單表單元素表單包含表單元素。沃爾沃馬自達雪佛蘭奧迪定義待選擇的選項，列表通常會默認選擇第一個選項，可以使用屬性來定義預定義選項。馬自達定義多行輸入字段。屬性規定輸入字段允許的最大長度。內容連接類型個人靜態博客氣泡的前端日記文章大綱來源：【Day 2】Form表單 HTML表單表單元素表單屬性 HTML5追加的表單元素 HTML表單 HTML 表單用于搜集不同類型的用...

shusen 2019-08-02 14:13 評論0 收藏0