html表單，css,dom

form屬性

action	定義一個 URL。當點擊提交按鈕時，向這個 URL 發送資料。	4	5
data	供自動插入資料。		5
replace	定義表單提交時所做的事情。		5
accept	處理該表單的伺服器可正確處理的內容類型列表（用逗號分隔）。	4	5
accept-charset	表單資料的可能的字元集列表（逗號分隔）。預設值是 "unknown"。	4	5
enctype	用於對錶單內容進行編碼的 MIME 類型。	4	5
method	用於向 action URL 發送資料的 HTTP 方法。預設是 get。	4	5
name	為表單定義一個唯一的名稱。不支援。用 id 代替。	4
target	在何處開啟目標 URL。_blank快顯視窗	4	5

上傳資料 enctype="multipart/form-data

常用表單：

input type="checkbox"
複選框，允許使用者選擇多個選擇項

input type="file"
檔案瀏覽框，當檔案上傳時，可用來開啟一個強制回應視窗以選擇檔案

input type="hidden"
隱藏標籤，用於在表單中以隱含方式提交變數值

input type="password"
密碼文字框，使用者在該文字框輸入字元時將被替換顯示為 * 號

input type="radio"
單選項，用於設定一組選擇項，使用者只能選擇一個

input type="reset"
清除與重設表單內容，用於清除表單中所有文字框的內容，而且使選擇功能表項目恢複到初始值

input type="submit"
表單提交按鈕

input type="text"
單行文字框

select
下拉式清單方塊，可單選和多選。預設為單選，如果增加多項選擇功能，增加 <select name="select" size=" 自訂欄數 " multiple="multiple"> 即可

option
列表下拉式功能表，和 select 配合使用，顯示供選擇的值

textarea
多行文字框，在使用文字框時需要關閉標籤之間的常值內容，形成如下格式：
<Textarea> 你的文字

表單input屬性：

屬性	值	描述	4	5
accept	list_of_mime_types	一個逗號分隔的 MIME 類型列表，指示檔案傳輸的 MIME 類型。注釋：僅可與 type="file" 配合使用。	4	5
align	left right top texttop middle absmiddle baseline bottom absbottom	定義映像之後的文本對齊。 不支援，請使用 CSS 代替。	4
alt	text	定義映像的替代文本。 注釋：僅可與 type="image" 配合使用。	4	5
autocomplete				5
autofocus	true false	當頁面載入時，使輸入欄位獲得焦點。 注釋：type="hidden" 時，無法使用。		5
checked	true false	指示此 input 元素首次載入時應當被選中。 注釋：請與 type="checkbox" 及 type="radio" 配合使用。	4	5
disabled	true false	當 input 元素首次載入時禁用此元素，這樣使用者就無法在其中寫文本，或選定它。 注釋：不能與 type="hidden" 一同使用。	4	5
form	true false	定義輸入欄位屬於一個或多個表單。		5
inputmode	inputmode	定義預期的輸入類型。		5
list	id of a datalist	引用 datalist 元素。如果定義，則一個下拉式清單可用於向輸入欄位插入值。		5
max	number	輸入欄位的最大值。		5
maxlength	number	定義文本域中所允許的字元最大數目。	4	5
min	number	輸入欄位的最小值。		5
name	field_name	為 input 元素定義唯一的名稱。	4	5
pattern				5
readonly	readonly	指示是否可修改該欄位的值。	4	5
replace	text	定義當表單提交時如何處理該輸入欄位。		5
required	true false	定義輸入欄位的值是否是必需的。 當使用下列類型時無法使用：hidden, image, button, submit, reset		5
size	number_of_char	定義 input 元素的大小。不再支援。	4
src	URL	定義要顯示的映像的 URL。 僅用於 type="image" 時。	4	5
step				5
template	template	定義一個或多個模板。		5
type	button checkbox date datetime datetime-local email file hidden image month number password radio range reset submit text time url week	指示 input 元素的類型。 預設值是 "text" 注釋：該屬性不是必需的。但是我們認為應該使用它。	4	5
value	value	對於按鈕、重設按鈕和確認按鈕：定義按鈕上的文本。 對於映像按鈕：定義傳遞向某個指令碼的此域的符號結果。 對於複選框和選項按鈕：定義 input 元素被點擊時的結果。 對於隱藏欄位、密碼域以及文本域：定義元素的預設值。 注釋：不能與 type="file" 一同使用。 注釋：與 type="checkbox" 和 type="radio" 一同使用時，此元素是必需的。

表單select屬性：

屬性	值	描述	4	5
autofocus	true false	在頁面載入時使這個 select 欄位獲得焦點。		5
data	url	供自動插入資料。		5
disabled	true false	當該屬性為 true 時，會禁用該菜單。	4	5
form	true false	定義 select 欄位所屬的一個或多個表單。		5
multiple	true false	當該屬性為 true 時，規定可一次選定多重專案。	4	5
name	unique_name	定義下拉式清單的唯一識別碼。	4	5
size	number	定義菜單中可見項目的數目。不支援。	4

表單option屬性：

屬性	值	描述	4	5
disabled	disabled	規定此選項應在首次載入時被禁用。	4	5
label	text	定義當使用 <optgroup> 時所使用的標註。	4	5
selected	selected	規定選項（在首次顯示在列表中時）表現為選中狀態。	4	5
value	text	定義送往伺服器的選項值。	4	5

表單textarea屬性：

屬性	值	描述	4	5
autofocus	true false	在頁面載入時，使這個 textarea 獲得焦點。		5
cols	number	規定文本區內可見的列數。	4	5
disabled	true false	當此文本區首次載入時禁用此文本區。	4	5
form	true false	定義該 textarea 所屬的一個或多個表單。		5
inputmode	inputmode	定義該 textarea 所期望的輸入類型。		5
name	name_of_textarea	為此文本區規定的一個名稱。	4	5
readonly	true false	指示使用者無法修改文本區內的內容。	4	5
required	true false	定義為了提交該表單，該 textarea 的值是否是必需的。		5
rows	number	規定文本區內可見的行數。	4	5

 特殊用法：label標籤 for屬性

編寫動態產生radio的函數

程式碼<?php
//函數體
function generate_radio_group($name,$options,$default){
    $name = htmlentities($name);
    foreach ($options as $value => $labls){
        $value = htmlentities($value);
        $html .="<input type=/"radio/" ";
        $html .= "name=/"$name/" value=/"$value/" ";
        if ($value == $default){
            $html .= "CHECKED";
        }
        $html .=">";
        $html .=$labls."<br>";
    }
    return ($html);    
}
//初始化資料
$options = array('010'=>'北京',
'022'=>'天津',
'024'=>'瀋陽',
'020'=>'上海',
);
$default = '022';
//調用函數
$html = generate_radio_group('city',$options,$default);
//輸出內容
echo $html;
?>

表單的處理方法

來看幾個PHP全域數組： 程式碼<?php
$action = $_SERVER['PHP_SELF'];
echo $action."<br>";
$name = $_SERVER['SERVER_NAME'];
echo $name."<br>";
$ref = $_SERVER['HTTP_REFERER'];
echo $ref;
?>

輸出結果： 程式碼/chap5/test.php
http://127.0.0.1/chap5/
127.0.0.1

HTTP_REFERER 儲存一個完整的來源URL地址。
SERVER_NAME 當前的伺服器名稱。
PHP_SELF 當前指令碼的完整路徑，包括檔案名稱。

看一個防止站外提交資料的例子：

程式碼<?php
$action = $_SERVER['PHP_SELF'];//當前指令碼的完整路徑，包括檔案名稱
if ($_SERVER['REQUEST_METHOD'] == 'POST'){//判斷表單提交方法
    $ref = $_SERVER['HTTP_REFERER'];//存一個完整的來源URL地址
    $srv ="http://{$_SERVER['SERVER_NAME']}$action";//擷取伺服器名稱.$action一個完整的URL
    echo "用戶端：$ref<br>服務端:$srv<hr>";
    
    if (strcmp($ref,$srv == 0))    {//利用strcmp函數判斷兩者是否相同
        echo "合法提交";
    }else{
        echo "非法提交";
    }
}else{
    echo "請提交表單！";
}
?>
<form action="<?php echo $action;?> " method="post">
<input type="submit" value="sumbit">
</form>

一個綜合的例子：

form.htm

HTML代碼

 <html>
<head>
<meta http-equiv="Content-Language" content="gb2312" />
<meta name="GENERATOR" content="Zend Studio" />
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>title</title>
</head>
<body bgcolor="#FFFFFF" text="#000000" link="#FF9966" vlink="#FF9966" alink="#FFCC99">
<form action="someform.php" method="post">

<table width="541" border="0">

<tr>

<td width="26%">姓名：</td>

<td width="74%"><input type="text" name="username" value="raymond" id="username" /></td>

</tr>

<tr>

<td>密碼：</td>

<td><input type="password" name="password" maxlength="10" id="password" /></td>

</tr>

<tr>

<td>年齡：</td>

<td>

<select name="age">

<option value=">16">小於16</option>

<option value="16-30" selected>16-30</option>

<option value="31-50">31-50</option>

<option value="51-80">51-80</option>

</select>

</td>

</tr>

<tr>

<td valign="top">自我介紹:</td>

<td><textarea name="intro" rows="3" cols="50" id="intro">請輸入您的自我介紹</textarea></td>

</tr>

<tr>

<td><br />

體育愛好： </td>

<td><input type="radio" name="fave_sport" value="tennis" checked>

網球

<input type="radio" name="fave_sport" value="football">

足球

<input type="radio" name="fave_sport" value="baseball">

籃球

<input type="radio" name="fave_sport" value="polo">

保齡球 </td>

</tr>

<tr>

<td> 開發語言：</td>

<td><input name="from" type="hidden" id="from" value="註冊表單">

<input type="checkbox" name="languages[]" value="php" checked id="languages[]">

php

<input type="checkbox" name="languages[]" value="java" id="languages[]">

java

<input type="checkbox" name="languages[]" value="perl" id="languages[]">

perl

<input type="checkbox" name="languages[]" value="cpp" id="languages[]">

c++

<input type="checkbox" name="languages[]" value=".net" id="languages[]">

.NET

<input type="checkbox" name="languages[]" value="delphi" id="languages[]">

delphi </td>

</tr>

<tr>

<td valign="top"><br>

<label> 開發工具：</label></td>

<td><select name="develop_ide[]" size="5" multiple id="develop_ide[]">

<option value="ZDE" selected>Zend Studio</option>

<option value="Eclipse">Eclipse</option>

<option value="Editplus">Editplus</option>

<option value="Ultraedit">Ultraedit</option>

<option value="Other">Other</option>

</select></td>

</tr>

<tr>

<td valign="top"> </td>

<td><input type="submit" name="btn_submit" value="提交" /></td>

</tr>

</table>

</form>
</body>
</html>
someform.php

程式碼

<?php

//通過判斷按鈕的變數名是否在$_POST中定義，如果有表示該表單已提交
if(isset($_POST["btn_submit"])){
if (empty($_POST['username'])){
echo "您沒有輸入使用者名稱";
exit(0);
}
if (empty($_POST['password'])){
echo "您沒有輸入密碼: ";
exit(0);
}
echo "您的使用者名稱： ".$_POST['user_name']."<br />";
echo "您的密碼(明文)： ".$_POST['password']."<br />";
echo "您的年齡： ".$_POST['age']."<br />";
if (!empty($_POST['languages'])){
echo "您選擇的語言為：";
//處理使用者選擇興趣的checkbox按鈕產生的數組
foreach ($_POST['languages'] as $lang){
echo $lang. "  ";
}
} else {
echo "您沒有輸入任何興趣愛好";
}
if (!empty($_POST['develop_ide'])){
echo "您使用的開發工具為：";
//處理使用者多選開發工具菜單產生的數組
foreach ($_POST['develop_ide'] as $ide){
echo $ide. "  ";
}
} else {
echo "您沒有選擇開發工具";
}
echo "您的自我介紹： ".nl2br($_POST['intro'])."<br />";
echo "網頁隱藏值(通過hidden標籤值傳遞)： ".$_POST['from']."<br />";
}
?>

form 表單的DOM與樣式控制

1 this.selectedIndex  這個是所選擇的select所屬的options的下標，就是說選擇的是第幾個option,第一個是0

2 得到一個select標籤中的option選項中的value值和text的值，有兩種方式：
 
  1)最好是採用名字的方式
 
  例如：var vaule_option1 = document.free.free_select.value;
 
  但是不能使用document.free.free_select.text得到text值
 
  form 裡面的其它的非塊級標籤最好是用name,塊級標籤最好是用id，然後樣式最好是用  
  class來定義
 
  2) 使用參數傳遞的this和.selectedIndex
 
  例如 this.options[this.selectedIndex].value;同時this.options[this.selectedIndex].text也是好用的

3 同樣可以使用var input_element=getElementsByName("free_input");
              var value_option3 = input_element[0].value;
  得到vaule的值option3
 
  注意：getElementsByName();得到的是數組物件類型，所以要使用下標的方式才能得到具體的元素

4 option下拉式清單寬度的控制是在select中定義樣式控制的
 
  例如  select{width:100px}

5 this.options.length是select下option元素的個數，常用作刪除
 
  例如  for(var i=this.options.length-1;i>=0;i--){
          this.remove(i);//this是要刪除的select元素可以documenet.getElementById()來得到或通過this傳值
        }

6 向空的select中添加option的最簡單的方法是
  doucment.getElementById('id').options.add(new Options(text,value));
  也可以使用標準的dom操作，有時間能一下

  也可以使用rel.options[i]=new Option(text,value)的方式
 
  new Option(text.value)添加option的文字和value的值

7 使用document.free.elements['free-select'] 來得到對應的元素，然後document.free.elements['free-select'].value就可以得到這個元素的值，docuemnt.free.elememts得到的是這個表單的所有的元素

 
html代碼
<form name="free">
  <select name="free_select" onchange="red(this)" id='free-select'>
    <option vaule="option1">aa</option>
    <option vaule="option2">bb</option>
  </select>
  <input type="text" name="free_input" value="option3" />
</form>

js代碼
<script type="text/javascript">
  function red(rel){
  }
</script>