1. 程式人生 > >HTML Form表單詳解

HTML Form表單詳解

表單屬性
  屬性                          值                                           描述
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" 密碼輸入框(輸入的文字用*表示)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>測試8</title>
</head>

<body>
<form action="8.1.php" method="post"  enctype="multipart/form-data" target="_blank">
<table width="400" border="1" cellpadding="1" cellspacing="1" bgcolor="#999999" bordercolor="#FFFFFF">
 <tr bgcolor="#FFCC33">
  <td width="103" height="25" align="right">姓名</td>
  <!--文字框-->
  <td height="25" align="left"><input type="text" name="txtBox" value="textVal"></td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">密碼</td>
  <!--密碼框-->
  <td height="25" align="left"><input type="password" name="pswBox" value="psw"></td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">文字域</td>
  <!--文字域-->
  <td height="25" align="left">
   <fieldset>
     <legend>簡介</legend>    
     <textarea name="txtAreaA" cols="25" rows="5" wrap="off">我是一個兵,來自老百姓</textarea>   
   </fieldset>
  </td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">性別</td>
  <td height="25" align="left">
   <!--單選按鈕-->
   <label><input type="radio" name="radioSex" value="male">男人</input></label>
   <input type="radio" name="radioSex" value="female">女人</input>
  </td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">愛好</td>
  <td headers="25" align="left">
   <!--複選框-->
   <input type="checkbox" name="chkSport[]">籃球</input>
   <input type="checkbox" name="chkSport[]">足球</input>
  </td>
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">照片</td>
  <!--上傳-->
  <td height="25" align="left"><input type="file" name="fileUpload" align="right" size="25"></td>     
 </tr>
 <tr  bgcolor="#FFCC33">
  <td width="103" height="25" align="right">學歷</td>
  <td height="25" align="left">
   <!--下拉列表-->
   <select name="selList" id="selList">
    <option value="0" selected="selected">專科</option>
    <option value="1">本科</option>
    <option value="2">研究生</option>
   </select>
  </td>     
 </tr>
 <tr align="center"  bgcolor="#FFCC33">
  <td height="25" colspan="3">
   <!--重置按鈕-->
   <input type="reset" name="resetBtn" value="重置">
   <!--提交按鈕-->
   <input type="submit" name="submitBtn" value="提交">
  </td>     
 </tr>
</table>

<!--隱藏域在瀏覽器中並不顯示,僅僅為儲存一些不太重要的資料而存在-->
<input type="hidden" name="hiddenVal" value="不會顯示的值"><br/>
<!--按鈕-->
<input type="button" name="btn" value="確認"></input>

</form>


<?php
    echo nl2br($_POST[txtAreaA]);   
?>

</body>
</html>