2. 程式人生 > >form表單詳解

form表單詳解

阿新 • • 發佈：2017-12-03
fff lsp splay 單選按鈕 類型 checkbox ocl 描述 ntc

表單屬性 屬性 值 描述 accept MIME_type 規定通過文件上傳來提交的文件的類型 accept-charset charset 服務器處理表單數據所接受的字符集 enctype MIME_type 規定表單數據在發送到服務器之前應該如何編碼 method get/post 規定表單數據發送的方式，get方法和post方法 name name 規定表單的名稱

target _blank/_parent/_self/_top 規定在何處打開action URL

1、action指定該表單發送時接受操作的地址 2、method指定表單數據發送的方法。可選值:get、post。get發送則表單內的數據將附加到url後發送。post則是在HTTP請求中發送。 3、enctype指定表單數據在發送的服務器之前如何編碼，特別註意的是，當含有上傳域時要設置編碼方式為enctype="multipart/form-data"，否則後臺無法獲取到瀏覽器發送的文件數據。是設置表單的MIME編碼。默認情況，這個編碼格式是application/x-www-form-urlencoded，不能用於文件上傳；只有使用了multipart/form-data，form裏面的input的值以2進制的方式傳過去。才能完整的傳遞文件數據。FTP上傳大文件的時候，也有個選項是以二進制方式上傳。

enctype的三個選項

值 描述 application/x-www-form-urlencoded 在發送前編碼所有字符（默認） multipart/form-data 不對字符編碼。以二進制的方式發送數據，當表單含有上傳域時，必須使用後臺才能獲取上傳的文件。 text/plain 空格轉換為 "+" 加號，但不對特殊字符編碼。

屬性值描述DTD
accept mime_type 規定通過文件上傳來提交的文件的類型。 STF
align
  • left
  • right
  • top
  • middle
  • bottom
 不贊成使用。規定圖像輸入的對齊方式。 TF
alt text 定義圖像輸入的替代文本。 STF
checked checked 規定此 input 元素首次加載時應當被選中。 STF
disabled disabled 當 input 元素加載時禁用此元素。 STF
maxlength number 規定輸入字段中的字符的最大長度。 STF
name field_name 定義 input 元素的名稱。 STF
readonly readonly 規定輸入字段為只讀。 STF
size number_of_char 定義輸入字段的寬度。 STF
src URL 定義以提交按鈕形式顯示的圖像的 URL。 STF
type
  • button
  • checkbox
  • file
  • hidden
  • image
  • password
  • radio
  • reset
  • submit
  • text
 規定 input 元素的類型。 STF
value value 規定 input 元素的值。 STF

技術分享圖片

HTML表單(Form)常用控件

表單控件(Form Contros) 說明
input type="text" 單行文本輸入框
input type="submit" 將表單(Form)裏的信息提交給表單裏action所指向的文件
input type="checkbox" 復選框
input type="radio" 單選框
select 下拉框
textArea 多行文本輸入框
input type="password" 密碼輸入框(輸入的文字用*表示)

[php] view plain copy print?
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>測試8</title>
  6. </head>
  8. <body>
  9. <form action="8.1.php" method="post" enctype="multipart/form-data" target="_blank">
  10. <table width="400" border="1" cellpadding="1" cellspacing="1" bgcolor="#999999" bordercolor="#FFFFFF">
  11. <tr bgcolor="#FFCC33">
  12. <td width="103" height="25" align="right">姓名</td>
  13. <!--文本框-->
  14. <td height="25" align="left"><input type="text" name="txtBox" value="textVal"></td>
  15. </tr>
  16. <tr bgcolor="#FFCC33">
  17. <td width="103" height="25" align="right">密碼</td>
  18. <!--密碼框-->
  19. <td height="25" align="left"><input type="password" name="pswBox" value="psw"></td>
  20. </tr>
  21. <tr bgcolor="#FFCC33">
  22. <td width="103" height="25" align="right">文本域</td>
  23. <!--文本域-->
  24. <td height="25" align="left">
  25. <fieldset>
  26. <legend>簡介</legend>
  27. <textarea name="txtAreaA" cols="25" rows="5" wrap="off">我是一個兵，來自老百姓</textarea>
  28. </fieldset>
  29. </td>
  30. </tr>
  31. <tr bgcolor="#FFCC33">
  32. <td width="103" height="25" align="right">性別</td>
  33. <td height="25" align="left">
  34. <!--單選按鈕-->
  35. <label><input type="radio" name="radioSex" value="male">男人</input></label>
  36. <input type="radio" name="radioSex" value="female">女人</input>
  37. </td>
  38. </tr>
  39. <tr bgcolor="#FFCC33">
  40. <td width="103" height="25" align="right">愛好</td>
  41. <td headers="25" align="left">
  42. <!--復選框-->
  43. <input type="checkbox" name="chkSport[]">籃球</input>
  44. <input type="checkbox" name="chkSport[]">足球</input>
  45. </td>
  46. </tr>
  47. <tr bgcolor="#FFCC33">
  48. <td width="103" height="25" align="right">照片</td>
  49. <!--上傳-->
  50. <td height="25" align="left"><input type="file" name="fileUpload" align="right" size="25"></td>
  51. </tr>
  52. <tr bgcolor="#FFCC33">
  53. <td width="103" height="25" align="right">學歷</td>
  54. <td height="25" align="left">
  55. <!--下拉列表-->
  56. <select name="selList" id="selList">
  57. <option value="0" selected="selected">專科</option>
  58. <option value="1">本科</option>
  59. <option value="2">研究生</option>
  60. </select>
  61. </td>
  62. </tr>
  63. <tr align="center" bgcolor="#FFCC33">
  64. <td height="25" colspan="3">
  65. <!--重置按鈕-->
  66. <input type="reset" name="resetBtn" value="重置">
  67. <!--提交按鈕-->
  68. <input type="submit" name="submitBtn" value="提交">
  69. </td>
  70. </tr>
  71. </table>
  73. <!--隱藏域在瀏覽器中並不顯示，僅僅為保存一些不太重要的資料而存在-->
  74. <input type="hidden" name="hiddenVal" value="不會顯示的值"><br/>
  75. <!--按鈕-->
  76. <input type="button" name="btn" value="確認"></input>
  78. </form>
  81. <?php
  82. echo nl2br($_POST[txtAreaA]);
  83. ?>
  85. </body>
  86. </html>

技術分享圖片

form表單詳解

相關推薦

form表單詳解

fff lsp splay 單選按鈕 類型 checkbox ocl 描述 ntc 表單屬性 屬性 值 描述 accept

Django之form表單詳解

構建一個表單 假設你想在你的網站上建立一個簡單的表單，以獲得使用者的名字。你需要類似這樣的模板： <form action="/your-name/" method="post"> <label for="your_name">Your name: </labe

HTML Form表單詳解

表單屬性   屬性                          值                                           描述 accept                 MIME_type               規定通過檔案上傳

html5表單詳解

1.新增表單特點 表單是HTML中非常重要的一部分，是連線前端與後臺的橋樑，它擔負大量的使用者和網頁後臺資料更新互動的任務。 因此在HTML5中表單也發生了一些變化，它在保持簡便易用的特性的同時，增加了許多內建的控制元件或者控制元件屬性來滿足使用者的需求，並且同時減少

微信小程序 PHP後端form表單提交實例詳解

toolbar 什麽 例子 control .info class odi 根據 綁定 微信小程序php後端form表單 https://www.cnblogs.com/tdalcn/p/7092716.html 1.小程序相對於之前的WEB+PHP建站來說，個人理解為只是

Multipart/form-data POST檔案上傳詳解 理論 簡單的HTTP POST 大家通過HTTP向伺服器傳送POST請求提交資料，都是通過form表單提交的，程式碼如下：

Multipart/form-data POST檔案上傳詳解 理論 簡單的HTTP POST 大家通過HTTP向伺服器傳送POST請求提交資料，都是通過form表單提交的，程式碼如下： <form method="post"action="http://w.soh

微信小程式中form 表單提交和取值例項詳解

我們知道，如果我們直接給 input 新增 bindinput，比如：<input bindinput="onUsernameInput" />，那麼可以在 onUsernameInput 中直接使用 e.detail.value，即： onUsernameInput : function(e)

element-ui之form表單校驗的使用詳解

先吐槽一下，個人感覺element-ui提供的文件寫的太少，用的時候會踩很多坑。 如：表單驗證方法 傳入的value沒有值  等。 下面，是我對element-ui  form表單驗證使用的總結，應該能解決大部分問題，或者，也可以直接拿過去修改使用。 （本文程式碼使用的

springmvc帶檔案上傳的form表單提交，用 jquery的ajaxfileupload或使用dropzone上傳圖文詳解

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@ page session="false"%> <%@page pageEncoding="utf-8" contentType="text/ht

form表單action提交問題詳解

https://yq.aliyun.com/ziliao/64915form 提交action中引數無效頁面通過表單（form）想伺服器提交資料的時候有兩種形式，一個是POST,另一個是GET。兩種的一個區別是GET會直接把資料附加在url的後面，而POST傳送的資料放置在h

form表單提交三種方式，demo例項詳解

第一種：使用type=submit 可以直接提交<html> <head> <title>submit直接提交</title> </head> <body> <!-- 表單的提交方

MySQL單表查詢詳解

一、between……and……操作符 1、查詢薪水為1600到3000的員工（第一種方式：採用>= 、<=）  例如：select empno,ename,sal from emp where sal >= 1600 and sal <= 3000; 

單表查詢——詳解

一 語法 select distinct 查詢欄位1，查詢欄位2，。。。 from 表名 where 分組之前的過濾條件 group by 分組依據 having 分組之後的過濾條件 order by 排序欄位 limit 顯示的條數;

element-ui Form表單驗證規則全解

element的form表單非常好用,自帶了驗證規則,用起來很方便,官網給的案例對於一些普通場景完全沒問題,不過一些複雜場景的驗證還得自己多看文件摸索,自己經過數次爬坑 之後,總結了幾種form表單的驗證規則,為了便於閱讀,驗證規則是拆分的,完整的程式碼放在文末  

使用ajax提交form表單，包括ajax文件上傳 轉http://www.cnblogs.com/zhuxiaojie/p/4783939.html

ima option img jquery選擇器 open request resp logs ges 使用ajax提交form表單，包括ajax文件上傳 前言 使用ajax請求數據，很多人都會，比如說： $.post(path,{data:data},function

按下回車默認提交form表單問題

data method 新頁面 div 開發 multipart 一個 spl form表單 最近開發中碰到一個問題，項目中有幾個列表展示頁面，允許用戶通過查詢條件模糊查詢數據。用戶錄入關鍵字後點擊回車會調用查詢方法根據關鍵字查詢，原先功能沒有問題，但是最近發現在查詢輸入框

關於form表單中button按鈕自動提交問題

courier tex w3c line 自動提交 get style href span 坑:點擊確認按鈕,form表單提交2次,發送後臺2次請求 　　 //錯誤代碼: <Button id="btnSubmit" name="btnSubmit" cla

原生js實現form表單序列化

defined json cnblogs 一個 break value 元素 default [0 大家都知道在jquery中有相應的表單序列化的方法： 1.serialize()方法 　　格式：var data = $("form").serialize(); 　　功能：

跟KingDZ學HTML5之十一 HTML5 Form 表單新元素

rmi 出現 第一個 blog inpu tput form itl scrip 新的課程又開始，哈哈，最近的文章更新比較快，希望大家跟上俺的步伐啊，呵呵，但是每當看到閱讀量，哎，還真不多，可是俺還要堅持寫下去，不知道，大家是不是都沒有在研究HTML5呢？ 這節課程，講的是

serialize可以獲取form表單裏面的數值

col user ext pan har nbsp utf-8 div meta serialize屬性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta