html 前台通用表单

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
	function validate() {
		if(loginform.username.value == ""){
			alert("账号不能为空!");
			return;
		}
		if(loginform.password.value == ""){
			alert("密码不能为空!");
			return;
		}
		loginform.submit();
	}
	</script>
</head>
<body>
	<form action="test" method="post" name="loginform">
		用户名:<input type="text" name="username"><br>

		密码: <input type="password" name="password"><br>

		性别:<input type="radio" name="sex" value="boy" checked="true">男
		<input type="radio" name="sex" value="girl">女<br>

		家乡:<select name="home">
			<option value="beijing">北京</option>
			<option value="shanghai">上海</option>
			<option value="guangdong">广东</option>
		</select><br>

		隐藏域:<input type="hidden" name="page"><br>

		个人信息:<textarea name="info" cols="30" rows="10"></textarea><br>

		爱好:<input type="checkbox" name="fav" value="sing">唱歌
		<input type="checkbox" name="fav" value="dance">跳舞
		<input type="checkbox" name="fav" value="ball">打球
		<input type="checkbox" name="fav" value="game">打游戏<br>

		<select name="hobby" multiple="true">
			<option value="sing">唱歌</option>
			<option value="dance">跳舞</option>
			<option value="ball">打球</option>
			<option value="game">打游戏</option>
		</select><br>

		号码1:<input type="text" name="phone"><br>
		号码2:<input type="text" name="phone"><br>
		号码3:<input type="text" name="phone"><br>
		号码4:<input type="text" name="phone"><br>
		号码5:<input type="text" name="phone"><br>

		<input type="submit" value="查询">
		
		<input type="button" value="验证查询" onclick="validate()">
	</form>
</body>
</html>


效果图例如以下:

html 前台通用表单

你可能感兴趣的:(html)