任務5

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

  • form表單用于接收不同類型的用戶輸入,用戶提交表單時向服務器傳輸數據,從而實現用戶與Web服務器的交互。

常用input標簽有:

  • text定義用于文本輸入的單行輸入字段(默認寬度為20個字符);
  • password定義密碼字段;
  • submit定義用于向表單處理程序提交表單的按鈕;
  • number用于應該包含數字值的輸入字段;
  • button定義可點擊按鈕;
  • radio定義單選按鈕,允許用戶在有限數量的選項中選擇一個;
  • checkbox復選框;
  • hidden定義隱藏字段;

post 和 get 方式的區別?

  • 本質。Get是向服務器索取數據的一種請求,而Post是向服務器提交數據的一種請求。
  • 服務器端獲取值的方法不同。get方式提交的數據,服務器端使用request.QueryString獲取變量的值。post方式提交的數據,服務器端使用request.Form獲取數據
  • 安全性。get方式安全性低,post方式較安全。但是post方式執行效率要比get方式差一些。
  • 機制。get是把參數數據隊列加到提交表單的action屬性所指的URL
    中。在URl中,值和表單各個字段一一對應,并且這些對在URl中對用戶來說是可見的。post是通過HTTP post機制,將表單內各個字段與其內容放置在HTML HEADER內一起傳送到action屬性所指的URL地址,對于用戶來說,這是透明的。
  • 大小。理論上講,POST是沒有大小限制的,HTTP協議規范也沒有進行大小限制,起限制作用的是服務器的處理程序的處理能力。

在input里,name 有什么作用?

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

radio 如何分組?

  • 通過name屬性分組,name相同的為一組。

placeholder 屬性有什么作用?

  • placeholder 屬性提供可描述輸入字段預期值的提示信息。該提示會在輸入字段為空時顯示,并會在字段獲得焦點時消失。

type=hidden隱藏域有什么作用? 舉例說明

  • 隱藏域是用來收集或發送信息的不可見元素,對于網頁的訪問者來說,隱藏域是看不見的。它不在網頁中顯示出來,主要用途是為網頁交互時存儲一些不需要在網頁顯示的數據。當表單被提交時,隱藏域就會將信息用你設置時定義的名稱和值發送到服務器上,這樣安全性較高。

簡單介紹 HTML 表單的用法

  • 表單是一個包含表單元素的區域,訪問一個包含表單的頁面,輸入數據后提交表單,瀏覽器將用戶在表單中輸入的數據進行打包并發送給服務器,服務器端程序就可以處理表單傳過來的數據。
  • 表單使用<form>標簽創建,<form>標簽是成對的,以</form>結束。所有表單控件(文本框、文本域、按鈕、單選框、復選框等)都必須放在 <form></form> 標簽之間(否則用戶輸入的信息提交不到服務器上。
  • 常用屬性有method,action。語法為<form method="傳送方式"  action="服務器文件">。action是瀏覽者輸入的數據被傳送到的地方。method是數據傳送的方式,分為get和post方式,get是向服務器索取數據的一種請求,post是向服務器提交數據的一種請求。
  • 當用戶要在表單中鍵入字母、數字等內容時,就會用到文本輸入框。
    文本框也可以轉化為密碼輸入框。<input type="text/password" name="名稱" value="文本" />當type="text"時,輸入框為文本輸入框;當type="password"時, 輸入框為密碼輸入框。name:為文本框命名,以備后臺程序ASP 、PHP使用。value:為文本輸入框設置默認值(一般起到提示作用)。
  • 當用戶需要在表單中輸入大段文字時,需要用到文本輸入域。
    <textarea rows="行數" cols="列數">文本</textarea>。<textarea>標簽是成對出現的,以<textarea>開始,以</textarea>結束。cols 為多行輸入域的列數。rows 為多行輸入域的行數。在<textarea></textarea>標簽之間可以輸入默認值。
  • 在使用表單設計調查表時,為了減少用戶的操作,可以使用選擇框,html中有兩種選擇框,即單選框和復選框,兩者的區別是單選框中的選項用戶只能選擇一項,而復選框中用戶可以任意選擇多項,甚至全選。
    <input type="radio/checkbox" value="值" name="名稱" checked="checked"/>當 type="radio" 時控件為單選框,type="checkbox" 時控件為復選框。value:提交數據到服務器的值。name:為控件命名,以備后臺程序 ASP、PHP 等使用。checked:當設置checked="checked" 時,該選項被默認選中。
  • 下拉列表在網頁中也常會用到,它可以有效的節省網頁空間。既可以單選、又可以多選。比如:
      <label>愛好:</label>
      <select>
      <option value="看書">看書</option>
      <option value="旅游" selected="selected">旅游</option>
      <option value="運動">運動</option>
      <option value="購物">購物</option>
      </select>
      option value為向服務器提交的值,中間的為顯示的值。設置selected="selected"屬性,則該選項就被默認選中。下拉列表也可以進行多選操作,在<select>標簽中設置multiple="multiple"屬性<select multiple="multiple">,就可以實現多選功能,在 windows 操作系統下,進行多選時按下Ctrl鍵同時進行單擊(在Mac下使用Command +單擊),可以選擇多個選項。
  • 在表單中有兩種按鈕可以使用,分別為:提交按鈕、重置。
    當用戶需要提交表單信息到服務器時,需要用到提交按鈕。<input type="submit" value="提交">只有當type值設置為submit時,按鈕才有提交作用。當用戶需要重置表單信息到初始時的狀態時,比如用戶輸入“用戶名”后,發現書寫有誤,可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。<input type="reset" value="重置">只有當type值設置為reset時,按鈕才有重置作用。value為按鈕上顯示的文字。
  • label標簽不會向用戶呈現任何特殊效果,它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本,就會觸發此控件。就是說,當用戶單擊選中該label標簽時,瀏覽器就會自動將焦點轉到和標簽相關的表單控件上(就自動選中和該label標簽相關連的表單控件上)。<label for="控件id名稱">標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? HTML 表單用于接收不同類型的用戶輸...
    大胡子歌歌閱讀 924評論 0 1
  • 一.form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? form表單用于收集用戶輸入,將收集到...
    Sunset125閱讀 404評論 0 0
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,933評論 18 139
  • form表單的作用和常用的input標簽及其作用 fomr標簽的主要屬性:action: 規定表單提交的地址met...
    夜流光丶閱讀 448評論 0 0
  • form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? 表單在網頁中主要負責數據采集功能。一個表單...
    饑人谷_嚴琰閱讀 239評論 0 0