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()焦点的区别:

 onclick="document.form1.text1.select()" 阴影全部选中
onclick="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" onfocus="document.form1.txt2.select()" /><br />
    <input type="text" value="information2" name="txt3" size="45" /><br />
    <input type="button" name="btn1" value="panic button" onclick="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" onchange="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" onclick="document.form1.text1.select()"><br>
<input type="button" name"button2" value="text box #2" onclick="document.form1.text2.focus()"><br>
<input type="button" name="button3" value="text box #3" onclick="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>







你可能感兴趣的:(JavaScript,XHTML,server,input,button,textbox)