HTML Form

我把一些經常使用的HTML form規格與參數給記下來

1. Hidden Elements
   <input type=hidden name="apple" value="fruit">
   使用者不會看到任何的東西，但是當表單送出時，會傳送apple=fruit這個值。
2. Text Elements
   
   <input type=text name="pie_filling" value="">
   顯示出一行可輸入文字的文字框，若使用者輸入cherry，則會傳送pie_filling=cherry這個值。
3. Password Elements
   
   <input type=password name="pie_filling" value="cherry">
   同上是可輸入文字的文字框，但是輸入的文字會以.取代，傳送數值時，仍是以明碼傳送。
4. Checkboxes
   
   <input type=checkbox name="pie_filling" value="choose">
   使用者無法改變value之值，若是使用者選取了此選項，則會傳送pie_filling=choose之值。若在設計時沒有設定value之值，則在傳送時會送出name=on。
   若要一開始就預設選取，可在最後面加上checked，如下：
   
   <input type=checkbox name="default" value="choose" checked>
5. Radio Buttons
   常用於多選一的情形，和checkboxes類似，在選取raido buttons其中一項時，同名的buttons會從on<->off。
   
   
   
   <input type=radio name="test" value=1 checked>
   <input type=radio name="test" value=2>
   <input type=radio name="test" value=3>
6. Submit Buttons
   
   <input type=submit value="Go" name="test">
   按下按鈕時，會送出form，value之值是顯示在button上面的文字。
   
   也可用同名的buttons來辨別不同的動作，如下：
   <input type=submit name="what_to_do" value="Continue shopping">
   <input type=submit name="what_to_do" value="Check out">
   <input type=submit name="what_to_do" value="Erase order">
   
   若是Form有action屬性時，在按下submit時，會把form裡面的參數傳給action所指定的url。
   <form type=get action="searcher.cgi">
   <input type=hidden name="session" value="3.14169">
   <input type=text name="key" value="">
   <input type=submit name="verb" value="search">
   </form>
   會將session=3.14169, key=chen, verb=search傳給searcher.cgi。
7. Image Buttons
   <input type=image name="img_btn" src="test.gif">
   和submit相同，只是顯示在按鈕上面從文字變成了圖片，用src指定圖片的路徑。
   Image button還可以知道使用者按到了圖片的那一部份，在按鈕中，圖片的最左上方的坐標值為(0,0)，也就是若使用者是按左上方送出時，會傳送img_btn.x=0, img_btn.y=0值。若在一開始時沒有指定name的名稱時，傳送時慣例是用x=0,y=0的方式送出。
8. Reset Buttons
   
   <input type=reset value="nevermind>
   清除form的內容且不送出任何資料，返回form原始的狀態，value之值為顯示在按鈕上的文字。
9. Textarea Elements
   Defalut content, first line. Another Line. The last Line.
   <textarea name="pairname">Defalut content, first line.
   Another Line.
   The last Line.</textarea>
   使用者可以輸入多行文字。
10. Select Elements and Option Elements
    下拉式選單
    Cherry Vanilla Lemon
    <select name="flavor">
    <option value="cherry">Cherry</option>
    <option value="vanilla" selected>Vanilla</option>
    <option value"lemon">Lemon</option>
    </select>
    當選擇Cherry時，會送出flavor=cherry這個值。屬性selected代表預設選項。
    若是opton沒有設定value之值時，會以在<option></option>之間的文字當做值送出，如下：
    <option>apple</option> 等同於
    <option value="apple">apple</option>
    
    Cherry Vanilla Lemon
    <select name="flavor" multiple>
    <option value="cherry">Cherry</option>
    <option value="vanilla">Vanilla</option>
    <option value="lemon">Lemon</option>
    </select>
    當加上multiple屬性時，可讓使用者多選，但較少用。