2.6 案例：小尚的个人资料修改

本节将结合之前所讲解的知识点，来实现一个经典案例。先来看一下要实现的页面效果，如图2-56所示。

观察图片可知，该案例用到了表格和表单的相关知识。表格用来固定布局，表单的相关内容用来标记需要修改的一些选项内容。

下面我们将从结构和表格两部分进行分析。

1.结构分析

将图2-56进行划分，如图2-57所示。

可以将该案例的整体结构看为一个10行2 列的表格。其中，图中编号①和编号③两部分只有一个单元格，但是占据了2列的空间；编号②就是普通8行2列的表格，在结构上没有什么特殊的部分，这里不做具体讲解。

由此，创建section06.html文件，该案例的结构代码可以书写为如下代码。

运行代码查看效果，如图2-58所示。

2.表单分析

根据表单中的相关内容对表单进行部分划分，如图2-59所示。

图2-59中共被划分为了10个区域，下面将对每个区域进行详细介绍。

（1）图中编号①是标题部分，可以使用<h1>标签来实现。

（2）图中编号②是一个文本输入框，文本输入框内有默认值“lgzhyan”。登录账号默认是不允许修改的，因此还需要在<input>标签上加上readonly（只读）属性。

（3）图中编号③、编号④是密码框，这里不多做讲解。

（4）图中编号⑤是一个文本输入框，对应的是邮箱地址。

（5）图中编号⑥是单选框，有两个选项：“男”“女”。从图2-59中可知，默认选中“男”，因此在“男”对应的标签上需要书写checked。

（6）图中编号⑦是复选框，有五个选项：“登山”“郊游”“养鱼”“钓鱼”“交友”。其中，“登山”不允许被选中，因此要使用disabled属性禁用；“交友”为默认选中项，需要使用checked属性。

（7）图中编号⑧是下拉列表。其默认项为“中国”，需要在其对应的<option>标签上书写属性checked。

（8）图中编号⑨是个人简介。因为输入内容较多，所以使用文本域<textarea>标签实现比较合适，其中默认值为“这个人很懒什么都没有留下！”。

（9）图中编号⑩是确认修改按钮，这里不多做讲解。

分析后，代码实现就很简单了。最后整体代码的实现如下。

运行代码查看效果，如图2-60所示。