HTML初学，表单类标签

最新推荐文章于 2024-09-27 09:21:53 发布

qq_58835719

最新推荐文章于 2024-09-27 09:21:53 发布

阅读量993

点赞数 3

文章标签： html 前端 css

本文链接：https://blog.csdn.net/qq_58835719/article/details/123197827

版权

HTML初学，表单类标签

**
表单元素的综合案例
本关任务：完成一个表单的创建任务。

这里标签要按照规定格式来写，因为有

标签，会自动换行，就不用
标签了。

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

其他要求如下：

用户名：添加类.common；

昵称：添加类.common；

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

男：标签的for属性的值为male；

女：标签的for属性的值为female；

保密：标签的for属性的值为other；

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

选项有：高中，中专，大专，本科，硕士，博士，其他；
婚姻状况：name属性的值为state，默认选中未婚；

未婚：标签的for属性的值为single；

已婚：标签的for属性的值为married；

保密：标签的for属性的值为secret；

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

踢足球：标签的for属性的值为football；

打篮球：标签的for属性的值为basketball；

看电影：标签的for属性的值为film；

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

提交：添加空，用来占位，添加类.common，value值为提交。

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

效果如下：
在这里插入图片描述
下拉框：

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

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

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

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

每个表单元素都用

标签包裹；

表单元素里的文本都用标签包裹，对于有标签包裹文本的，就不用标签了；

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

例子如下：

用户名：

密码：

***

效果如下：

在这里插入图片描述

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

编程要求

请仔细阅读右侧代码，结合相关知识，在 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>
        <label for="male">
        <input type="radio" id="male" name="sex"/>男</label>
        <label for="female">
        <input type="radio" id="female" name="sex"/>女</label>
        <label for="other">
        <input type="radio" id="other" name="sex" disabled/>保密</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>
        <label for="secret">
            <input type="radio" id="secret" name="state" />保密
        </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 class="common" maxlength="20"></textarea>
    </div>
    <div>
        <span></span>
        <input type="submit" class="common" value="提交"/>
    </div>
<!-- ********* End ********* -->
</form>
</body>
</html>