表单元素的综合案例

第1关：表单元素的综合案例

任务描述

本关任务：完成一个表单的创建任务。

这里标签要按照规定格式来写，因为有 <div> 标签，会自动换行，就不用<br>标签了。

属性的先后顺序为： type -- id -- class -- name -- value ，其他需要添加的属性最后写。

其他要求如下：

• 用户名：添加类.common；

• 昵称：添加类.common；

• 性别：name属性的值为sex，禁用保密；

  • 男：<label>标签的for属性的值为male；

  • 女：<label>标签的for属性的值为female；

  • 保密：<label>标签的for属性的值为other；

• 教育程度：添加类.common，默认选中本科；

  • 选项有：高中，中专，大专，本科，硕士，博士，其他；

• 婚姻状况：name属性的值为state，默认选中未婚；

  • 未婚：<label>标签的for属性的值为single；

  • 已婚：<label>标签的for属性的值为married；

  • 保密：<label>标签的for属性的值为secret；

• 兴趣爱好：name属性的值为hobby，默认选中看电影；

  • 踢足球：<label>标签的for属性的值为football；

  • 打篮球：<label>标签的for属性的值为basketball；

  • 看电影：<label>标签的for属性的值为film；

• 描述自己的特点：添加类.common，字符最大长度为20；

• 提交：添加空<span></span>，用来占位，添加类.common，value值为提交。

要求：像“用户名、昵称”这些采用<span>标签包裹文本，而‘男、女’这些单选框和多相框采用<label>标签包裹文本。

效果如下：

下拉框：

相关知识

本关是一个综合案例，是对前面所学知识的总结和拓展。

前面学的都是表单元素，这些表单元素都是属于表单的， 用<form></form>标签包裹。

这里需要添加一些简单的样式，让界面更美观、大方。

因为表单有多个表单元素，所以每个元素都要有间距。这里先小小的做个规定：

• 每个表单元素都用<div></div> 标签包裹；

• 表单元素里的文本都用<span></span>标签包裹，对于有<label>标签包裹文本的，就不用<span>标签了；

• input元素需要改变宽和高的添加类.com。

例子如下：

1. <style>
2. div{
3. margin-bottom: 10px;
4. }
5. .com{
6. width: 200px;
7. height: 30px;
8. }
9. </style>
11. <div>
12. <span>用户名：</span>
13. <input type="text" class="com"/>
14. </div>
16. <div>
17. <span>密码：</span>
18. <input type="password" class="com"/>
19. </div>

效果如下：

这个是不是更美观一些呢。可以把类.com去掉，看一下有什么区别。

编程要求

请仔细阅读右侧代码，结合相关知识，在 Begin-End 区域内进行代码补充，完成一个表单的创建任务。

测试说明

平台会对你的代码进行运行测试，如果实际输出结果与预期结果相同，则通关；反之，则 GameOver。

---

赶快试一下吧！！！

//本题注意一下教育程度和描述自己的特点的标签添加方式就行，实时效果图可能与题目要求有差，这是展示的格式问题。并不是自己的代码有问题，可以通过评测结果来查看问题。

<!-- ********* Begin ********* -->

<div>

    <span>用户名：</span>

    <input type="text" class="common"/>

</div>

<div>

    <span>昵称：</span>

    <input type="text" class="common"/>

</div>

<div>

     <span>性别：</span>

     <input type="radio" id="male" name="sex"/>

     <label for="male">男</label>

     <input type="radio" id="female" name="sex"/>

     <label for="female">女</label>

     <input type="radio" id="other" name="sex" disabled="disabled"/>

     <label for="other">保密</label>

</div>

<div>

    <span >教育程度：</span>

    <select  class="common">//类添加写在select中

        <option>高中</option>

        <option>中专</option>

        <option>大专</option>

        <option selected="selected">本科</option>

        <option>硕士</option>

        <option>博士</option>

        <option>其他</option>

    </select>

</div>

<div>

    <span>婚姻状况：</span>

  <input type="radio" id="single" name="state" checked="checked"/>

    <label for="single">未婚</label>

    <input type="radio" id="married" name="state"/>

    <label for="married">已婚</label>

    <input type="radio" id="secret" name="state"/>

    <label for="secret">保密</label>

</div>

<div>

   <span>兴趣爱好：</span>

    <input type="checkbox" id="football" name="hobby"/>

    <label for="football">踢足球</label>

    <input type="checkbox" id="basketball" name="hobby"/>

    <label for="basketball">打篮球</label>

    <input type="checkbox" id="film" name="hobby" checked="checked"/>

    <label for="film">看电影</label>

</div>

<div>

    <span>描述自己的特点：<textarea maxlength="20" class="common"></textarea> </span>

     //类添加写在textarea中

</div>

<div>

    <span></span>

     <input type="submit" class="common" value="提交"/>

</div>

<!-- ********* End ********* -->