HTML基础学习

1.HTML表单元素的使用


<!doctype html>
<html>
<head>
    <title>NEFU</title>
</head>
<body>
    <center>
        <h2><font color="blue">中国百度</font></h2>
		<a href="http://www.baidu.com/"><h3>百度</h3></a>
	</center>

	<form action="" method="post">
	
        <font color="red">编 号:</font>
	    <input type="text" name="userid" color="red" size="14" maxlength="14">
	    <br><br>
	    
		<font color="red">用户名:</font>
	    <input type="text" name="username" value="请输入用户名" size="14" maxlength="14">
	    <br><br>

	    <font color="red">密 码:</font>
	    <input type="password" name="userpass" value="请输入密码" size="14" maxlength="14">
	    <br><br>

	    <font color="red">性 别:</font>
	    <input type="radio" name="sex" value="男" checked>男
	    <input type="radio" name="sex" value="女">女
	    <br><br>

	    <font color="red">部 门:</font>
	    <select name="dept">
		    <option value="技术部">技术部</option>
		    <option value="财务部">财务部</option>
		    <option value="销售部">销售部</option>
		    <option value="人力部">人力部</option>
	    </select>
	    <br><br>

	    <font color="red">兴 趣:</font>
	    <input type="checkbox" name="inst" value="唱歌">唱歌        
	    <input type="checkbox" name="inst" value="编程">编程
	    <input type="checkbox" name="inst" value="上网">上网
	    <input type="checkbox" name="inst" value="看书">看书
	    <input type="checkbox" name="inst" value="睡觉">睡觉
	    <br><br>

	    <font color="red">说 明:</font>
	    <textarea name="note" cols="30" rows="3">
			中国百度网址地址:http://www.baidu.com
	    </textarea>
	    <br><br>

	    <input type="submit" value="注册">
	    <input type="reset"  value="重置">

    </form>
</body>
</html>


2.onLoad事件与onUnload事件


在HTML中事件都统一命名,都是以on开头的。

<!doctype html>
<html>
    <head>
        <title>Gou JinPing</title>
    </head>
    <script>
			
		function Hello(){
			alert("Welcome to the page!");
		}

		function Byebye(){
			alert("Bye bye!");
		}

    </script>
    <body onLoad="Hello()" onUnload="Byebye()">
        <a href="http://www.baidu.com/" onclick="Hello()"></font color="green">进入百度首页</font></a>
    </body>
</html>



3.输出表单中的内容

<html>
    <head>
        <title></title>
    </head>
    <script>

		function show()
		{
			var value=document.myform.text1.value;
			alert("姓名:"+value);
			
			var sex;
			//在JavaScript中,多个控件定义了同一个名字,此时将按照数组的形式操作。
			if(document.myform.sex[0].checked)
				 sex=document.myform.sex[0].value;
			else
				 sex=document.myform.sex[1].value;
			alert("性别:"+sex);

			var inst="";
			for(i=0;i<document.myform.inst.length;i++){
				if(document.myform.inst[i].checked){
					inst += document.myform.inst[i].value+" ";
				}
			}
			alert("兴趣:"+inst);
		}

	</script>
	<body>     
		<form action="" method="post" name="myform">  

			<font color="green">Input Name:</font>
			<input type="text" name="text1"><br><br>

			<font color="green">Select Sex:</font>
			<input type="radio" value="男" name="sex" checked>男
			<input type="radio" value="女" name="sex">女<br><br>

			<font color="green">Interest:</font>
			<input type="checkbox" name="inst" value="唱歌">唱歌
			<input type="checkbox" name="inst" value="跳舞">跳舞
			<input type="checkbox" name="inst" value="看书">看书
			<input type="checkbox" name="inst" value="编程" checked>编程
			<input type="checkbox" name="inst" value="睡觉">睡觉
			<input type="checkbox" name="inst" value="游泳">游泳
			<br><br>

			<input type="button" value="show" onclick="show()">
			<br><br>
			
		</form>
    </body>
</html>


4.对下拉列表框的所选的内容的输出

<html>
    <head>
        <title></title>
    </head>
    <script language="javascript">
	
		function show(val){
			document.myform.result.value=val;
		}

    </script>
	<body>     
		<form action="" method="post" name="myform">  
			<font color="green">部门:</font>
			<select name="dept" onchange="show(this.value)">
				<option value="技术部">技术部</option>
				<option value="销售部">销售部</option>
				<option value="财务部">财务部</option>
				<option value="经理部">经理部</option>
			</select>
			<br><br>
			<font color="green">结果:</font>
			<input type="text" name="result" value="">
		</form>
	</body>
</html>


你可能感兴趣的:(HTML基础学习)