[Web]JS表單篇

• 圖片送出按鈕

<a href="javascript:form1.submit();">    <img src="img.jpg"</a>

• 重設按鈕

<a href="javascript:form1.reset();">    <img src="img.jpg"</a>

• 允許/禁止 訪問表單

document.form1.disabled = true / false;

讀取表單所有名稱

form1.elements.lengthform1.elements[i].name

• 驗證是否輸入是否為數字

var num = "0123456789"var str = form.id.value;for(i=0;i<str.length;i++){    if(num.indexOf(str.charAt(i))== -1)}

• 使用鍵盤快速選取欄位

<form>    <label for="Namebox" accessKey="N"><u>N</u>ame:</label>    <input type="text" id="Namebox"></form>

• 文字欄位取得focus

<input type="text" id="txID">form.txID.focus();

• 選取文字欄位中的文字

form.ID.focus();form.ID.select();

• 改變文字欄位中的顏色

<input type="text" value="HERE" onMouseOver = "this.style.color = 'red' ">

• 改變文字欄位中的背景顏色

<input type="text" value="HERE" onMouseOver = "this.style.background= 'red' ">

• 改變文字欄位中的1邊框顏色

<input type="text" value="HERE" onMouseOver = "this.style.borderColor= 'red' ">

• 文字欄位自動調整大小

onKeyPress = "autoWidth()"str = form.ID.value;if(str.length !=0){    form.ID.size = str.length;}

• 改變文字欄位中的對齊方式

form.Id.style.textAlign = left/center/right;

• 製作Google搜尋表單

<form id="fm1_Id" action="http://www.google.com/search"> <input name="q" id="searchWord" > <br> <input type="submit" value="搜尋"></form>

• 檢驗一組按鈕的選擇狀態

<form id="form1"><input name="sex" type="radio" checked>男<input name="sex" type="radio" >女</form>
form1.sex[0].checked  form1.sex[1].checked  

• 核取方塊狀態

form1.id[i].checked

• 帶標籤的核取方塊

<input type="checkbox" id="ch1"><label for="ch1" > 標籤 </label>

• 取得下拉選單中選取的值

<form id="form1"><select id="sel1" onChange="get()"><option value="第一項">第一項</option><option value="第二項">第二項</option><option value="第三項">第三項</option></form>
form1.sel1.value

• 取得下拉選單的索引值

form1.sel1.selectedIndex

• 取得選單中的多個值

<select id="sel1" multiple>form.id[i].selected  // 看看有沒有被選到form.id[i].value

• 在新視窗中開啓網頁

open（）取代window.loction（）open(http://www.google.com);

• 取得檔案位置(含路徑)

<form id="form2" enctype="multipart/form-data" ><input type="file" id="file">  <input type="button" onClick="get()" value="FileName"></form>
form2.id.value

• 取得檔案名稱（不含路徑）

取得檔案路徑後，用split()將路徑以“\”切割，再存入陣列中，最後取出陣列的最後一項在JavaScript中插入一個反斜線必須用雙斜線表示。var fName  = form2.id.value;var fileName = new Array();fileName = fName.split("\\");fileName[fileName.length-1]

• 取得選取檔案的副檔名

取得檔案路徑後，用split()將路徑以“.”切割，再存入陣列中，最後取出陣列的最後一項
fileName = fName.split(".");

• 將選取的檔案圖片顯示出來

先判斷是不是圖檔
extname.toUpperCase() =="JPG"pic.src = fileName;  //完整路徑

• 取得選取圖片的檔案大小

先建立圖片物件，並為圖片物件指定來源，再使用物件屬性取得size
img = new Image();
img.src = fileName;
size = img.fileSize / 1024 ;  //將圖片大小轉成KB

• 取得選取圖片的寬高

img.widthimg.height

• 選取圖片作為網頁背景

document.body.backgronund = imgURL;