1、表格案例

要求：
按照如下形式创建员工入职登记表，要求
（1）性别（男女）、婚姻状况（已婚，未婚）、政治面貌（党员，团员）、血型（A,B ,AB）用单选按钮
（2）民族使用下拉列表(汉，苗，回)
（3）使用表单提交数据；
（4）照片使用文件上传

代码

<html><head><meta charset="utf-8"><title></title></head><style type="text/css">table{width: 1100px;text-align: center;}table caption{font-size: 40px;}tbody td{width: 150px;height: 30px;}</style><body><form action="#" method="post"><table border="1" cellspacing="0" cellpadding="0" align="center"><caption>新员工入职登记表</caption><tbody><tr><td>姓名</td><td></td><td>性别</td><td><input type="radio" name="role" />男<input type="radio" name="role" />女</td><td>出生日期</td><td></td><td rowspan="5">一寸近照<br /><input type="file" /></td></tr><tr><td>曾用名</td><td></td><td>体重</td><td></td><td>身高</td><td></td></tr><tr><td>民族</td><td><select><option value="han">汉族</option><option value="miao">苗族</option><option value="hui">回族</option></select></td><td>籍贯</td><td></td><td>婚姻状况</td><td><input type="radio" name="marriage" />已婚<input type="radio" name="marriage" />未婚</td></tr><tr><td>政治面貌</td><td><input type="radio" name="politics" />党员<input type="radio" name="politics" />团员</td><td>健康状况</td><td></td><td>血型</td><td><input type="radio" name="xx" />A<input type="radio" name="xx" />B<input type="radio" name="xx" />AB</td></tr><tr><td>身份证号码</td><td colspan="5"></td></tr></tbody></table></form></body>
</html>

HTML表格表单案例相关推荐

2017-2-15从0开始前端学习笔记（HTML）-图片-表格-表单
2017-2-15从0开始前端学习笔记-图片-表格-表单标签图片图片<img src="#" alt="文本说明不能加载图片时显示" title= ...
定义列表的特点html,HTML的列表表格表单知识点
无序列表格式 ...
Bootstrap框架(基础篇)之列表,表格,表单
继续上篇的基础部分延伸,主要说一下列表,表格,表单相关Bootstrap框架变化以及基础知识. 1.列表篇除了HTML提供的三种基本列表样式: 无序列表 <ul><li>-& ...
vue.js 表格表单序号
vue.js 表格表单序号表格是动态的,通过v-for="(item,index) in sites" 循环出来的表格 ,通过index属性,实现表格序号自增, 结合页码和每页数 ...
JFlow工作流流程与表单案例
流程案例: 表单案例: 发送提示:
【4001】通过html做一个静态页面的表格表单，嘿嘿。
学习目标: [ 1]学习前端第一天掌握 html(主要表单表格相关)入门知识,梳理今天的学习知识点: [ 2]通过已学知识做静态页面表格表单完成效果,效果图如下: 表单不加颜色是这样的,自己看着设计: ...
通过CSS，H5，JavaScript实现表格表单的随机选择，和简单的随机点名。
目录一.表格表单的随机选择效果展示(表单内容可以根据自己需要进行修改) 1.H5的布局第一步: 第二步: 2.CSS布局 3.JS的布局第一步: 第二步: 第三步: 二.简单的随机点名效果展 ...
表格表单HTML代码学生登记,html实现用户注册页面（表单+表格）——html小练习...
1 2 3 4 5 表格+表单练习 6 7 8 9 10 11 注册新用户 12 13 14 15 16 17 18 19 20 21 22 23 用户名 24 25 26 27 登陆邮箱 28 29 ...
js table 生成序号_el-table树形表格表单验证，js树形列表生成序号
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...
js table 生成序号_el-table树形表格表单验证(列表生成序号)
树形表格表单验证预览树形列表生成序号首先需要生成一个序号用来确定表单验证的目标row,通过广度优先遍历,以1,1.1,1.1.1的规则对树形列表生成确定唯一值的索引,因为列表自身可以做CURD,因 ...

HTML表格表单案例

1、表格案例

代码

HTML表格表单案例相关推荐

最新文章

热门文章