表单嵌套表格实例
一、效果图
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: flex;
justify-content: center;
width: 100vw;
}
</style>
</head>
<body>
<div>
<form action="">
<table>
<tr>
<td>性别</td>
<td><label><input type="radio" name="sex" value="1"><img src="./man.png" width="20px">男</label>
<label><input type="radio" name="sex" value="0"><img src="./women.png" width="20px">女</label>
</td>
</tr>
<tr>
<td>生日</td>
<td><select name="yera">
<option selected disabled>请选择年</option>
<option value="0">2000</option>
<option value="1">2001</option>
<option value="2">2002</option>
<option value="3">2003</option>
<option value="4">2004</option>
<option value="5">2005</option>
<option value="6">2006</option>
<option value="7">2007</option>
<option value="8">2008</option>
<option value="9">2009</option>
</select>
<select name="month">
<option disabled selected>请选择月</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
</select>
<select name="day">
<option disabled selected>请选择日</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
<option value="17">17</option>
<option value="18">18</option>
<option value="19">19</option>
<option value="20">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
</select>
</td>
</tr>
<tr>
<td>所在地区</td>
<td><input type="text"></td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<label><input type="radio" name="Marital status" value="0">未婚</label>
<label><input type="radio" name="Marital status" value="1">离婚</label>
<label><input type="radio" name="Marital status" value="2">丧偶</label>
</td>
</tr>
<tr>
<td>学历</td>
<td><input type="text" name="Education"></td>
</tr>
<tr>
<td>月薪</td>
<td><input type="text" name="Salary"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" name="phonenum"></td>
</tr>
<tr>
<td>昵称</td>
<td><input type="text" name="Nickname"></td>
</tr>
<tr>
<td>喜欢的类型</td>
<td><label><input type="checkbox" name="likestyle" value="0">妩媚</label>
<label><input type="checkbox" name="likestyle" value="1">柔美</label>
<label><input type="checkbox" name="likestyle" value="2">可爱</label>
<label><input type="checkbox" name="likestyle" value="3">小鲜肉</label>
<label><input type="checkbox" name="likestyle" value="4">型男</label>
<label><input type="checkbox" name="likestyle" value="5">气质</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td><textarea name="zwjs" cols="45" rows="10"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<div
style="background-color: #F22843;color: white;width: 120px;height: 30px;text-align: center;">
免费注册
</div>
</td>
</tr>
<tr>
<td></td>
<td><label><input type="checkbox" name="YorN">我同意注册条款和会员加入标准</label></td>
</tr>
<tr>
<td></td>
<td><a href="login.html">我是会员，立即登录</a></td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18岁，单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
二、效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.f_div{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<div class="f_div">
<form action="">
<table>
<tr>
<td></td>
<td><h3 style="color:#6A6A6A">会员登录</h3></td>
</tr>
<tr>
<td>登录账号</td>
<td><input type="text" name="username" placeholder="邮箱/ID/手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="userpwd" placeholder="密码"></td>
</tr>
<tr>
<td></td>
<td><label><input type="checkbox" name="YorN" value="0">两周内自动登录</label></td>
</tr>
<tr>
<td></td>
<td><div style="background-color: #2DABCE;width: 65px;text-align: center;color: white;display: inline-block;">登录</div><a href="">忘记密码</a></td>
</tr>
<tr>
<td>其他账号登录</td>
<td><img src="./qq.png" width="20px">QQ账号
<img src="./weibo.png" width="20px">新浪微博
<img src="./百度.png" width="20px">百度账号</td>
</tr>
<tr>
<td></td>
<td><a href="register.html">还不是会员？立即注册</a></td>
</tr>
</table>
</form>
</div>
</body>
</html>
三、效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form{
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<form action="">
<table cellpacing>
<caption><h2>注册手机号码邮箱</h2> </caption>
<tr>
<td align="right">手机号码</td>
<td><input type="text" name="phonenum"></td>
</tr>
<tr>
<td align="right">图片验证码</td>
<td><input type="text" name="img_num"></td>
</tr>
<tr>
<td></td>
<td><input type="button" value="免费获取验证码"></td>
</tr>
<tr>
<td align="right">短信验证码</td>
<td><input type="text" name="msg"></td>
</tr>
<tr>
<td align="right">密码</td>
<td><input type="password" name="pwd"></td>
</tr>
<tr>
<td align="right">确认密码</td>
<td><input type="password" name="pwd_sure"></td>
</tr>
<tr>
<td></td>
<td > <label><input type="checkbox" name="server">同意服务条款</label> </td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="立即注册"></td>
</tr>
</table>
</form>
</body>
</html>
四、效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.s_div {
border: 1px solid;
width: 500px;
}
.f_div {
display: flex;
justify-content: center;
width: 100vw;
}
</style>
</head>
<body>
<div class="f_div">
<form action="">
<caption>
<h2 style="text-align: center;">学生信息表</h2>
</caption>
<div class="s_div" style="text-align: center; height: 25px;">
学生姓名: <input type="text" name="username">设置密码: <input type="password" name="pwd">
</div>
<div class="s_div">
性别: <br>
<label>男生:<input type="radio" name="sex" value="1"></label> <label>女生: <input type="radio" name="sex" value="0"></label>
<hr>
籍贯: <select name="city">
<option disabled selected>===请选择===</option>
<option>北京</option>
<option>上海</option>
<option>河南</option>
<option>广西</option>
<option>深圳</option>
</select>
<hr>
自我介绍：<textarea name="" id="" cols="50" rows="10"></textarea>
</div>
<div class="s_div">
兴趣爱好：<br>
<label>足球：<input type="checkbox" name="hobbies" value="0"></label>
<label> 篮球：<input type="checkbox" name="hobbies" value="1"></label>
<label>动漫：<input type="checkbox" name="hobbies" value="2"></label>
<hr>
上传照片 <input type="file" accept=".jpg,.png">
</div>
</div>
</form>
</body>
</html>
五、效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
margin: auto;
border: 1px solid;
border-collapse: collapse;
height: 200px;
}
th,
td {
border: 1px solid;
}
</style>
</head>
<body>
<form action="">
<table>
<tr>
<th colspan="4">教员搜索</th>
</tr>
<tr>
<td>搜索类型</td>
<td><select name="teachermsg">
<option disabled selected>搜索教员信息</option>
<option value="1">校内</option>
<option value="0">校外</option>
</select></td>
<td>教员身份</td>
<td><select name="teacher_identity">
<option disabled selected>不限</option>
<option value="1">管理员</option>
<option value="0">老师</option>
</select></td>
</tr>
<tr>
<td>所在地区</td>
<td><select name="city">
<option disabled selected>不限</option>
<option value="1">北京</option>
<option value="0">伤害</option>
</select></td>
<td>性别</td>
<td><select name="sex">
<option disabled selected>不限</option>
<option value="1">男</option>
<option value="0">女</option>
</select></td>
</tr>
<tr>
<td>学习科目</td>
<td colspan="3"><select name="study">
<option disabled selected>请在以下列表中选择</option>
<option value="1">语文</option>
<option value="0">数学</option>
</select></td>
</tr>
<tr>
<td>学习</td>
<td colspan="3"><input type="text" name="study_text"></td>
</tr>
<tr>
<td>专业</td>
<td colspan="3"><input type="text" name="study_text"> <input type="button" value="搜索"></td>
</tr>
</table>
</form>
</body>
</html>
2702
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
