头哥（Educoder）HTML表单基础-综合练习，自己完成代码编写

最新推荐文章于 2024-03-05 20:57:10 发布

Mighty-牙仔

最新推荐文章于 2024-03-05 20:57:10 发布

阅读量1.5k

点赞数 2

文章标签： elementui javascript html

本文链接：https://blog.csdn.net/Fury1234/article/details/123286924

版权

<!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>
    <label for="male"><input type="radio"name="sex"id="male"/>男</label>
    <label for="female"><input type="radio"name="sex"id="female"/>女</label>
    <input type="radio"name="sex"id="other" disabled="disabled"/><label for="other">保密</label>
</div>

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

<!-- ********* End ********* -->
</form>
</body>
</html>

有关关卡的任务描述---

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

这里标签要按照规定格式来写，因为有<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值为提交。

Mighty-牙仔

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
头哥（Educoder）HTML表单基础-综合练习，自己完成代码编写

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <style> .container{ width: 40%; margin: 20px auto; } .common{ width:230px; height: 30px; } span{ displa.
复制链接

扫一扫