HTML——表单类的标签

最新推荐文章于 2024-10-05 16:51:11 发布

不准跷二郎腿

最新推荐文章于 2024-10-05 16:51:11 发布

阅读量59

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/weixin_62285502/article/details/129784827

版权

任务描述

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

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

<!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">男</label>
    <input type="radio" id="male" name="sex">     
    <label for="female">女</label>
    <input type="radio" id="female" name="sex">       
    <label for="other">保密</label>
    <input type="radio" id="other" name="sex" disabled=disabled/>
</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>
    <label for="single">未婚</label>
    <input type="radio" id="single" name="state" checked>
    <label for="married">已婚</label>
    <input type="radio" id="married" name="state" >
    <label for="secret">保密</label>
    <input type="radio" id="secret" name="state" >  
</div>
<div>
    <span>兴趣爱好：</span>
    <label for="football">踢足球</label>
    <input type="checkbox" id="football" name="hobby" >
    <label for="basketball">打篮球</label>
    <input type="checkbox" id="basketball" name="hobby">
    <label for="film">看电影</label>
    <input type="checkbox" id="film" name="hobby"checked>
</div>
<div>
    <span>描述自己的特点：</span>
    <textarea maxlength="20" class="common"></textarea>
</div>
<div>
    <span></span>
    <input type="submit" class="common" value="提交">
</div>


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