form(1)

form表單有什么作用?有哪些常用的input 標簽,分別有什么作用?

1.HTML <form> 元素 表示了文檔中的一個區(qū)域,這個區(qū)域包含有交互控制元件,用來向web服務器提交信息,擁有以下屬性。

  1. action 一個處理這個form信息的程序所在的URL。
  1. autocomplete 用于指示 input 元素是否能夠擁有一個默認值,這個默認值是由瀏覽器自動補全的。
  2. enctype 當 method 屬性值為 post 時, enctype 是提交form給服務器的內容的 MIME 類型,可能的取值有三個,application/x-www-form-urlencoded: 如果屬性未指定時的默認值。multipart/form-data: 這個值用于一個 type 屬性設置為 "file" 的 <input> 元素。text/plain (HTML5)。
  3. method 瀏覽器使用這種 HTTP 方式來提交 form。 可能的值有get和post。
  4. target 一個名字或者說關鍵字,用來指示在提交表單之后,在哪里顯示收到的回復.

2.常見的Input標簽主要由type屬性控制。
type: 控件類型的顯示。如果這個屬性沒有指定,默認的類型是 text。
type可用的值包括:

  • button:無缺省行為按鈕。
  • checkbox: 復選框。必須使用 value 屬性定義此控件被提交時的值。使用 checked 屬性指示控件是否被選擇。也可以使用 indeterminate 指示復選框在一種不確定狀態(tài)(大多數平臺上,顯示為一條穿過復選框的水平線)。
  • file:此控件可以讓用戶選擇文件。使用 accept 屬性可以定義控件可以選擇的文件類型。
  • hidden:不顯示在頁面上的控件,但它的值會被提交到服務器。
  • image:圖片提交按鈕。必須使用 src 屬性定義圖片的來源及使用 alt 定義替代文本。還可以使用 height 和 width 屬性以像素為單位定義圖片的大小。
  • password:一個值被遮蓋的單行文本字段。使用 maxlength 指定可以輸入的值的最大長度 。
  • radio:單選按鈕。必須使用 value 屬性定義此控件被提交時的值。使用checked 必須指示控件是否缺省被選擇。在同一個”單選按鈕組“中,所有單選按鈕的 name 屬性使用同一個值; 一個單選按鈕組中是,同一時間只有一個單選按鈕可以被選擇。
  • range:HTML5 用于輸入不精確值控件。
  • reset:用于將表單所內容設置為缺省值的按鈕。
  • search:HTML5用于輸入搜索字符串的單行文本字段。換行會被從輸入的值中自動移除。
  • submit:用于提交表單的按鈕。
  • color:HTML5 用于指定顏色的控件。
  • date:HTML5 用于輸入日期的控件(年,月,日,不包括時間)。
  • datetime:HTML5 基于 UTC 時區(qū)的日期時間輸入控件(時,分,秒及幾分之一秒)。
  • datetime-local:HTML5 用于輸入日期時間控件,不包含時區(qū)。
  • email:HTML5 用于編輯 e-mail 的字段。 合適的時候可以使用 :valid 和 :invalid CSS 偽類。
  • month:HTML5 用于輸入年月的控件,不帶時區(qū)。
  • number: HTML5 用于輸入浮點數的控件。
  • tel:HTML5 用于輸入電話號碼的控件;換行會被自動從輸入的值中移除A,,but no other syntax is enforced??梢允褂脤傩?,比如 pattern 和 maxlength 來約束控件輸入的值。恰當的時候,可以應用 :valid 和 :invalid CSS 偽類。
  • text:單行字段;換行會將自動從輸入的值中移除。
  • time:HTML5 用于輸入不含時區(qū)的時間控件。
  • url:HTML5 用于編輯URL的字段。 The user may enter a blank or invalid address. 換行會被自動從輸入值中移隊??梢允褂萌纾簆attern 和 maxlength 樣的屬性來約束輸入的值。 恰當的時候使可以應用 :valid 和 :invalid CSS 偽類。
  • week:HTML5 用于輸入一個由星期-年組成的日期,日期不包括時區(qū)。

在input里,name 有什么作用?

由于表單提交的數據一般都是以key:value的方式提交,所以input中的name屬性主要用來標識提交的數據的key值,好讓服務器處理程序分辨。
例如:

<input name=name value=adam>
<input name=age value=18>

則服務器在后臺收到的數據格式可能是這樣的:

{
name:adam,
age:18
}

placeholder 屬性有什么作用?

placeholder屬性一般會在輸入框有一個提示,該提示會在輸入字段為空時顯示,并會在字段獲得焦點時消失。

注意:

  • placeholder 屬性適用于以下的 <input> 類型:text, search, url, telephone, email 以及 password。
  • placeholder為HTML5的新屬性
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,058評論 25 709
  • form簡介 是HTML中的一個元素,它表示文檔中的一個區(qū)域,這個區(qū)域包含了交互控件,用于向web服務器提交信息。...
    七里之境閱讀 1,503評論 0 1
  • 文/愛吃香蕉的林默 01 我叫王清華,一個高三學子。 還有一個月我就解脫了。 今早和往常一樣,我來到班級自習,睡眼...
    尤林默閱讀 629評論 14 6
  • 無事常逛公眾號詩同仁 去年光棍節(jié)微信加了主編仲詩文 今日購詩選才說話應允了題詞簽名 詩同仁公眾號:zkshige ...
    微風LG閱讀 431評論 0 3
  • 一 伍月在十九歲那年的冬天隨歌舞團來到東北慰問演出。從小在南方長大的她人生第一次領略了零下二十度的刺骨之寒,也人生...
    獨居女神京閱讀 601評論 0 4

友情鏈接更多精彩內容