任務5

form表單的作用

收集用戶提交的數據并提交到后臺

常用的input標簽及作用

1.type="text",用于輸入普通文本
2.type="password",用于輸入密碼
3.type="checkbox",復選框
4.type="radio",單選按鈕
5.type="textarea",可用于輸入多行文本
6.type="file",用于傳送文件
7.type="hidden",可以用于暫存數據和安全性校驗
8."button","submit","reset",依次為自定義功能按鈕,提交按鈕和重置按鈕

post和get的區別

1.提交數據時post不會改變當前url,不會暴露提交的數據,而get會在url中顯示提交的數據
2.post提交數據容量遠大于get
3.get傳輸的數據在瀏覽器記錄中可被發現

input中name的作用

可以標識每一段被提交的數據

radio如何分組

采用相同的name屬性

placeholder的作用

占位,提示用戶輸入,不會影響用戶輸入也不會影響數據提交

type="hidden"的作用

提交一些不需要或者不想被用戶看到的參數,或者存放臨時值
也可以用于防御CSRF攻擊,例如在表單中添加特定數值,在服務器中進行認證,可以避免絕大多數的CSRF攻擊

html表單的簡單用法

HTML表單是一個包含表單元素的區域, 表單使用<form> 標簽創建。表單能夠包含 <a target="_blank" title="HTML input 元素,比如文本字段、復選框、單選框、提交按鈕等等。
1.表單的屬性
action:規定當提交表單時,向何處發送表單數據
method:該屬性定義瀏覽器將表單中的數據提交給服務器處理程序的方式。關于method的取值,最常用的是get和post
target:該屬性規定在何處顯示action屬性中指定的URL所返回的結果
enctype:規定在發送到服務器之前應該如何對表單數據進行編碼
2.表單中包含的元素
除了之前提到的各種input標簽外還包括復選框select及永福劃分區域的fieldset等
3.使用演示(課程任務中的第8項)

<form>
   <div class="username">
      <label for="username">姓名</label>
      <input type="text" name="username">
   </div>
   <div class="password">
      <label for="password">密碼</label>
      <input type="password" name="password">
   </div>
   <div class="sex">
      <label>性別</label>
      <input type="radio" name="sex" value="male">男
      <input type="radio" name="sex" value="female">女  
    </div>
    <div class="sex orientation">
      <label>取向</label>
      <input type="radio" name="orientation" value="male">男
      <input type="radio" name="orientation" value="female">女  
    </div>
    <div class="hobby">
      <label>愛好</label>
      <input type="checkbox" name="hobby" value="dota">dota
      <input type="checkbox" name="hobby" value="travel">旅游
      <input type="checkbox" name="hobby" value="pets">寵物
    </div>
    <div class="discuss">
      <textarea placeholder="ddd"></textarea>
    </div>
    <div class="car">
      <label>我的car</label>
      <select name="cars">
        <option value="wanjuche">玩具車</option>
        <option value="yaokongche" selected>遙控車</option>
      </select>
    </div>
    <input type="submit">
</form>

運行結果點這

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1.form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? HTML 表單用于接收不同類型的用戶輸...
    大胡子歌歌閱讀 924評論 0 1
  • form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? form表單用于接收不同類型的用戶輸入,用...
    dongguazhon閱讀 124評論 0 0
  • 一.form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? form表單用于收集用戶輸入,將收集到...
    Sunset125閱讀 404評論 0 0
  • form表單的作用和常用的input標簽及其作用 fomr標簽的主要屬性:action: 規定表單提交的地址met...
    夜流光丶閱讀 448評論 0 0
  • form表單有什么作用?有哪些常用的input 標簽,分別有什么作用? 表單在網頁中主要負責數據采集功能。一個表單...
    饑人谷_嚴琰閱讀 239評論 0 0