//1. 找出所有"input type="" 的类型，自己动手做例子。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>课堂功课1</title>
<style style="text/css">
.parent{
background:#06518A;
width:270px;
height:46px;
position:absolute;
top:0px;
left:0px;
}
.child{
background:blue;
width:270px;
height:20px;
position:absolute;
top:46px;
left:0px;
}
.ch{
background:purple;
width:270px;
height:46px;
position:absolute;
top:66px;
left:0px;
}
.ml{
background:black;
width:270px;
height:26px;
position:absolute;
top:112px;
left:0px;
}
.cm{
background:#FF60AF;
width:270px;
height:20px;
position:absolute;
top:138px;
left:0px;
}
.cc{
background:#00A600;
width:270px;
height:20px;
position:absolute;
top:158px;
left:0px;
}
.mm{
background:#743A3A;
width:270px;
height:24px;
position:absolute;
top:178px;
left:0px;
}
</style>
</head>
<body>
<div class="parent">
帐号：<br><input id="aaa" type="text" /> <input type="image"/>
</div>
<div class="child">
<input type="radio" name="myradio" value="0"> 男<input type="radio" name="myradio" value="1"> 女
</div>
<div class="ch">
密码:<br><input type="password" id="yyy"/>
</div>
<div class="ml">
<input type="file"/>
</div>
<div class="cm">
<input type="checkbox"/>1 <input type="checkbox"/>2 <input type="checkbox"/>3 <input type="checkbox"/>4 <input type="checkbox"/>5
</div>
<div class="cc">
<input type="hidden"/>
</div>
<div class="mm">
<input type="button" value="显示" onclick="check();"/> <input value="提交" type="submit" onclick="nn();"/> <input type="reset"/>
</div>
</body>
</html>
<script>
function check(){
var o=document.getElementById("aaa").value;
alert("帐号："+o);
}
function nn(){
var a=document.getElementById("aaa").value;
var b=document.getElementById("yyy").value;
alert("帐号："+a+" "+"密码："+b);
}
</script>
- type 属性取值:
text -- 文字输入域(输入型)password -- 也是文字输入域,但是输入的文字以密码符号'*'显示(输入型)file -- 可以输入一个文件路径(输入型)checkbox -- 复选框.可以选择零个或多个(选择型)radio -- 单选框.只可以选择一个而且必须选择一个(选择型)hidden -- 代表隐藏域,可以传送一些隐藏的信息到服务器button -- 按钮(点击型)image -- 使用图片来显示按钮,使用src属性指定图像的位置(就像img标签的src屬性)(点击型)submit -- 提交按钮,表单填写完毕可以提交,把信息传送到服务器.可以使用value属性來显示按鈕上的文字(点击型)reset -- 重置按钮,可以把表单中的信息清空(点击型)
不是太明白如何使用以上的属性。
//2. 用javascript 的alert 打出他们的输入值。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>课堂功课2</title>
<style style="text/css">
.parent{
position:absolute;
top:0px;
left:0px;
width:350px;
height:120px;
background-color:red;
}
.child{
position:absolute;
top:0px;
left:350px;
width:80px;
height:50px;
background-color:blue;
}
</style>
</head>
<body>
<div class="parent">
请输入你想得到得值
<input id="aaa" type="text"/><br><br><br>
注：在文本框内你所输入的值，在你按下显示按钮，你的值就会显示在提示框上。
</div>
<div class="child">
<input type="button" id="bbb" value="显示" onclick="check();"/>
</div>
</body>
</html>
<script>
function check(){
var a=document.getElementById("aaa").value;
alert(a);
}
</script>
posted on 2008-12-22 14:26
..゛緣々ゞ 阅读(105)
评论(0) 编辑 收藏 引用