Javascript學習筆錄14(表單應用)

1 使用文本框

一些網站上有textbox上有自動選中的功能:

onfocus="document.form1.txt2.select()"

2 密碼框屬性

type="password" ,網頁上textbox裏面就是密碼形式輸入。

用password.value這個屬性則可以明文輸出密碼。

3 表單常見按鈕的屬性

這裏說一下單選框radio,設置2個radio,讓他們的name相同,這樣他們就屬於同一組,才能做到“單選”

 <input type="radio" name="radio1" />male
 <input type="radio" name="radio1" />female

4 表單中select標籤的簡單應用

這個select啊 我總是叫他Dropdownlist 囧

<select >
<option></option>
<optgroup>
<option></option>
</optgroup>

</select>

5 select()全選和focus()焦點的區別:

 οnclick="document.form1.text1.select()" 陰影全部選中
οnclick="document.form1.text2.focus()"   光標位置

具體代碼:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Js11.aspx.cs" Inherits="Javascript_Js11" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Javascript學習筆錄14(表單應用) </title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="text" value="information" name="txt1" />
    <input type="text" value="information1" name="txt2" οnfοcus="document.form1.txt2.select()" /><br />
    <input type="text" value="information2" name="txt3" size="45" /><br />
    <input type="button" name="btn1" value="panic button" οnclick="document.form1.txt3.value='sit down'" /><br />
    <input type="password" name="pw1" value="daylight"><br />
    <input type="checkbox" name="cb1" value="have name" checked="checked" />哈根達斯
    <input type="radio" name="radio1" />male
    <input type="radio" name="radio1" />female
    <br />
    <select name=select1 size=4>
    <option name=option1 value=lon selected ="selected">london,England</option>
    <option name=option2 value=dub>Dublin,Ireland</option>
    <option>手機</option>
	<option>座機</option>
	<option>電子郵件</option>

    </select>
    <br />
  興趣: <select multiple="multiple">
	    <optgroup label="球類">
	    <option>足球</option>
	    <option>籃球</option>
	    <option>羽毛球</option>
	    <option>乒乓球</option>
	    </optgroup>
	    <optgroup label="其他">
	    <option>游泳</option>
	    <option>健身</option>
	    </optgroup>
        </select>
        <br />
  自我描述:<textarea row="4" cols="12" name="ta" οnchange="validate()"></textarea><br />
  <input type="text" name="text1" value="where is you focus?"><br>
  <input type="text" name="text2" value="is there?"><br>
  <input type="text" name="text3" value="or maybe here?"><br>
<input type="button" name="button1" value="text box #1" οnclick="document.form1.text1.select()"><br>
<input type="button" name"button2" value="text box #2" οnclick="document.form1.text2.focus()"><br>
<input type="button" name="button3" value="text box #3" οnclick="document.form1.text3.focus()"><br>

  
    </div>
    </form>
</body>
</html>
<script >
document.write("表單text1類型是:"+document.form1.txt1.type+"</br>");
document.write("表單text1名稱是:"+document.form1.txt1.name+"</br>");
document.write("表單pw1的類型:"+document.form1.pw1.type+"<br>")
document.write("表單pw1的名稱:"+document.form1.pw1.name+"<br>")
document.write("表單pw1的值:"+document.form1.pw1.value+"<br>")
document.write("表單pw1的大小:"+document.form1.pw1.size+"<br>")
document.write("表單cb1的類型:"+document.form1.cb1.type+"<br>")
document.write("表單cb1是否被選擇?:"+document.form1.cb1.checked+"<br>")
document.write("表單cb1的名稱:"+document.form1.cb1.name+"<br>")
document.write("表單cb1的值:"+document.form1.cb1.value+"</br>")
document.write("第一個按鈕被選擇"+document.form1.radio1[0].checked+"</br>")
document.write("第二個按鈕被選擇"+document.form1.radio1[1].checked+"</br>")
document.write("第一個按鈕的名稱"+document.form1.radio1[0].name+"</br>")
document.write("按鈕個數"+document.form1.radio1.length+"</br>")

document.write("這個選擇列表的名稱"+document.form1.select1.name+"<br>")
document.write("這個選擇列表的長度"+document.form1.select1.length+"<br>")
document.write("這個選擇列表當前被選擇的索引號"+document.form1.select1.selectedIndex+"<br>")
document.write("這個選擇列表的尺寸"+document.form1.select1.size+"<br>")

function validate()
{
    if(document.form1.ta.value!='1'||'2')
    {
        alert("請輸入1 或2")
    }
//    if(ta.value!='1'||'2')    js腳本中以document開始層層去找
//    {
//        alert("請輸入1 或2")
//    }
}

</script>







發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章