碼上快樂

相關內容    簡體    繁體

form表單詳解

本文轉載自   查看原文   2017-12-03 14:29   1014    html應用

表單屬性   屬性                          值                                           描述 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>  
  7.   
  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>  
  72.   
  73. <!--隱藏域在瀏覽器中並不顯示，僅僅為保存一些不太重要的資料而存在-->  
  74. <input type="hidden" name="hiddenVal" value="不會顯示的值"><br/>  
  75. <!--按鈕-->  
  76. <input type="button" name="btn" value="確認"></input>  
  77.   
  78. </form>  
  79.   
  80.   
  81. <?php  
  82.     echo nl2br($_POST[txtAreaA]);     
  83. ?>  
  84.   
  85. </body>  
  86. </html>  


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 form表單詳解 ProTable search form表單屬性用法詳解 Django中Form表單之字段詳解 Form 表單 ExtJs如何判斷form表單是否被修改過詳解 FastAPI（23）- 詳解 Form，發送表單數據 bootstrap3.0教程之表單(form)使用詳解 $_FILES參數詳解及簡單
表單無刷新上傳文件 el-form的model、prop屬性和表單校驗等詳解 HTML的form表單和django的form表單，
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM