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

STM32单片机定制

于 2023-12-07 15:02:19 发布

阅读量230

点赞数 2

分类专栏：《Java web 程序设计》文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_64562382/article/details/134831852

版权

《Java web 程序设计》专栏收录该内容

27 篇文章 7 订阅

订阅专栏

任务描述

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

这里标签要按照规定格式来写，因为有<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>标签包裹文本。

效果如下：

下拉框：

编程要求

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

测试说明

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

赶快试一下吧！！！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>

    .container{
        width: 40%;
        margin: 20px auto;
    }
    .common{
        width:230px;
        height: 30px;
    }
    span{
        display:inline-block;
        width: 150px;

        text-align: right;
    }
    div{
        margin-bottom: 10px;
    }
    </style>
</head>
<body>

    <form class="container">
    <!-- ********* 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/>
            <label for="other">保密</label>
    </div>
    <div>
        <span> 教育程度：</span>
        <select class="common">
            <option>高中</option>
            <option>中专</option>
            <option>大专</option>
            <option selected = "select">本科</option>
            <option>硕士</option>
            <option>博士</option>
            <option>其他</option>
        </select>
    </div>
    <div>
        <span>婚姻状况：</span>
        <input type="radio" id="single" name="state" 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/>
            <label for="film">看电影</label> 
    </div>
    <div>
        <span>描述自己的特点：</span>
        <textarea class="common" maxlength="20"></textarea>
    </div>
    <div>
        <span></span>
        <input type="submit" class="common" value="提交"/>
    </div>