实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示表单以及常用控件元素的使用</title>
<style>
h1{
text-align: center;
}
form{
width: 600px;
height: 500px;
margin: 0 auto;
display: block;
background-color: lightgray;
}
form p{text-align: center;line-height: 30px;}
footer{
text-align: center;
line-height: 40px;
font-size: 20px;
}
</style>
</head>
<body>
<h1>用户注册</h1>
<form action="" method="post" name="register">
<!--用户名-->
<p>
<label for="username">账号：</label>
<input type="text" name="username" id="username" placeholder="不超过8个字符" autofocus>
</p>
<!--密码-->
<p>
<label for="password">密码：</label>
<input type="password" name="password" id="password" placeholder="6-12字符组成" autofocus>
</p>
<!--邮箱-->
<p>
<label for="email">邮箱：</label>
<input type="email" name="email" id="email" placeholder="example@mail.com" required>
</p>
<!--年龄-->
<p>
<label for="age">年龄：</label>
<!--min - max: 设置取值范围-->
<input type="number" name="age" id="age" min="6" max="70" >
</p>
<!--性别 单选按钮-->
<p>
<label for="female">性别</label>
<input type="radio" name="gender" value="male" id="male"><label for="male">男生</label>
<input type="radio" name="gender" value="female" id="female"><label for="female">女生</label>
<input type="radio" name="gender" value="secrecy" id="secrecy" checked><label for="secrecy">保密</label>
</p>
<!--出生日期 -->
<p>
<label for="birthday">出生日期：</label>
<input type="date" name="birthday" id="birthday">
</p>
<!--从事工作 下拉框-->
<p>
<lable for="work">从事工作：</lable>
<select name="work" id="work" size="1">
<optgroup>
<lable for="技术："></lable>
<option value="0">平面设计</option>
<option value="1">前端工程师</option>
<!--selected: 设置默认选项-->
<option value="2" selected>PHP</option>
</optgroup>
<optgroup>
<lable for="营销推广："></lable>
<option value="3">客服</option>
<option value="4">招商人员</option>
<option value="5">文案</option>
</optgroup>
</select>
</p>
<!--爱好 多选按钮-->
<p>
<label for="programme">爱好：</label>
<input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label>
<input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label>
<input type="checkbox" name="hobby[]" value="movies" id="movies" checked><label for="movies">看电视</label>
</p>
<!--自我介绍 文本域-->
<p>
<label for="commnet">简介：</label>
<textarea name="commnet" id="commnet" cols="50" rows="5" maxlength="20" placeholder="不超过20个字"></textarea>
</p>
<p>
<!--按钮写法1->
<!--<input type="submit" name="submit" value="提交">-->
<!--<input type="reset" name="reset" value="重置">-->
<!--<input type="button" name="button" value="按钮">-->
<!--按钮推荐使用这种-->
<button type="submit" name="submit">提交</button>
<button type="reset" name="reset">重置</button>
<button type="button" name="button">按钮</button>
</p>
</form>
<footer>
<span>版权归：Joe所有</span>
</footer>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
