11、表单表格高级
2019-03-02 本文已影响0人
calvinbj
简单表单登录界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
form{width: 600px; border: 1px #000 solid; margin: 0 auto; padding: 10px;}
p{margin-bottom: 10px;}
</style>
</head>
<body>
<form action="" name="f1" method="post">
<p>姓名： <input type="text"/></p>
<p>密码：<input type="password"/></p>
<p><input type="submit"/><input type="reset"/></p>
<p>性别：男<input type="radio" name="sex" />女：<input type="radio" name="sex"></p>
<p>爱好：聊天<input type="checkbox" name="like" />睡觉<input type="checkbox" name="like" />打游戏<input type="checkbox" name="like" /></p>
<p>出生年月：
<select name="" id="">
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
</select>年
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>月
</p>
<p>个人简介：</p>
<p><textarea name="" id="" cols="30" rows="10"></textarea></p>
</form>
</body>
</html>
下面是利用fieldset对表单进行分组：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
form{width: 600px; border: 1px #000 solid; margin: 0 auto; padding: 10px;}
p{margin-bottom: 10px;}
fieldset{margin-bottom: 10px; padding: 10px; }
.fd1{border: 1px #f00 dashed;}
</style>
</head>
<body>
<form action="" name="f1" method="post">
<fieldset class="fd1">
<p>姓名： <input type="text"/></p>
<p>密码：<input type="password"/></p>
<p><input type="submit"/><input type="reset"/></p>
</fieldset>
<fieldset>
<p>性别：男<input type="radio" name="sex" />女：<input type="radio" name="sex"></p>
<p>爱好：聊天<input type="checkbox" name="like" />睡觉<input type="checkbox" name="like" />打游戏<input type="checkbox" name="like" /></p>
<p>出生年月：
<select name="" id="">
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
</select>年
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>月
</p>
<p>个人简介：</p>
<p><textarea name="" id="" cols="30" rows="10"></textarea></p>
</fieldset>
</form>
</body>
</html>
要插入如下图的标题：
可以用到<legend>标签
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
*{margin: 0;padding:0;}
form{width: 600px; border: 1px #000 solid; margin: 0 auto; padding: 10px;}
p{margin-bottom: 10px;}
fieldset{margin-bottom: 10px; padding: 10px; }
.fd1{border: 1px #f00 dashed;}
.ld1{border: 1px #f00 dashed; padding: 5px; }
.ld2{border: 1px #f00 solid; padding: 5px; }
</style>
</head>
<body>
<form action="" name="f1" method="post">
<fieldset class="fd1">
<legend class="ld1">用户登录</legend>
<p>姓名： <input type="text"/></p>
<p>密码：<input type="password"/></p>
<p><input type="submit"/><input type="reset"/></p>
</fieldset>
<fieldset>
<legend class="ld2">用户注册</legend>
<p>性别：男<input type="radio" name="sex" />女：<input type="radio" name="sex"></p>
<p>爱好：聊天<input type="checkbox" name="like" />睡觉<input type="checkbox" name="like" />打游戏<input type="checkbox" name="like" /></p>
<p>出生年月：
<select name="" id="">
<option value="">1991</option>
<option value="">1992</option>
<option value="">1993</option>
<option value="">1994</option>
</select>年
<select name="" id="">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>月
</p>
<p>个人简介：</p>
<p><textarea name="" id="" cols="30" rows="10"></textarea></p>
</fieldset>
</form>
</body>
</html>
效果如下：
将上文用到的代码中的性别单选框添加<label>标签：
<p>性别：<label for="male">男</label><input type="radio" name="sex" id="male" /><label for="female">女</label><input type="radio" name="sex" id="female" /></p>
<p>性别：<label for="male">男</label><input type="radio" name="sex" id="male" /><label for="female">女</label><input type="radio" name="sex" id="female" /></p>
