姓名输入框:<input type="text" value="默认有值"/>
密码输入框:<input type="text" value="默认有值"/>
性别选择框:
<input type="radio" name="sex"/><label for="nan">男</label>
<input type="radio" name="sex"/><label for="nv">女</label>
PS:name相同,是防止多选。这段代码是通用的,可扩展为学历选择框等等。
复选框:
<input type="checkbox" name="sex">睡觉
<input type="checkbox" name="sex">吃饭
<input type="checkbox" name="sex">足球
<input type="checkbox" name="sex">篮球
PS:可同时选择,在web代码中十分常见。
选择列表框:
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>武汉</option>
<option>长沙</option>
</select>
PS:大多用于地区选择。
文本输入框:<textarea rows="10" cols="80"></textarea>
PS:这里是行数为10,列数为80。
普通按钮:<input type="button" value="我是一个普通的Button"/>
PS:value是默认的文字,也可以无。
提交按钮:<input type="submit"/>
重置按钮:<input type="reset"/>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script>
window.onload=function(){
function $(id){
return document.getElementById(id);
}
$("btn").onclick=function(){
if($("txt").value==123456&&$("txt1").value==123456789){
alert("登陆成功");
}else{
alert("登陆失败");
}
}
}
</script>
</head>
<body>
<input type="text" id="txt" value="请输入账号" />
<input type="password" id="txt1" value="请输入密码" />
<button id="btn">登陆</button>
</body>
</html>