任务描述:利用HTML+CSS制作下面的表格

在这里插入图片描述

任务分析:

1.需用到表单方面的知识,from标签 input标签及其属性
2.该表背景为粉色,需设置背景色
3.有两个表单按钮,提交和重置按钮
4.文本框内填充了一定文字

HTML代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>员工信息登记表</title>
<link href="style.css" type="text/css" rel="stylesheet" />
</head>
<body>
<div class="a">
<h1 align="center">员工信息登记表</h1>
<form >
用户登陆名:<input type="text" name="Usename" placeholder="wcz@163.com"/><br />
真实姓名:&nbsp;&nbsp;<input type="text" placeholder="王传志" />(必填,只能输汉字)<br />
真实年龄:&nbsp;&nbsp;<input value="24" type="text" />(必填)<br />
出生日期:&nbsp;&nbsp;<input type="text" value="&nbsp;&nbsp;年/&nbsp;&nbsp;月/&nbsp;&nbsp;日" />(必填)<br />
电子邮箱:&nbsp;&nbsp;<input type="text" placeholder="123456@126.com" />(必填)<br />
身份证号:&nbsp;&nbsp;<input type="text"  />(必填,能够以数字、字母x结尾的短身份证号)<br />
手机号码:&nbsp;&nbsp;<input type="text"  />(必填)<br />
幸运颜色:&nbsp;&nbsp;<input type="text"  />(请选择你喜欢的颜色)<br /><br />
<input type="button" value="提交" /><span class="b"></span>
<input type="button" value="重置" />
</form>
</div>
</body>
</html>

CSS代码

/* CSS Document */
.a{background:#FFC0CB;height:400px;width:630px;margin:200px;padding:30px;}
.b{margin:120px;}

总结

制作工程中,忘记了placeholder 属性,下面介绍一下placeholder属性的意义及功能

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>placeholder属性功能</title> 
</head>
<body><form><input type="text" name="fname" placeholder="方框内灰色填充部分"><br>不影响输入结果,输入内容时将自动覆盖掉文本框内内容
</form>
<p><strong>注意：</strong> Internet Explorer 9及更早 IE 版本不支持 input 标签的 placeholder 属性。</p>
</body>
</html>