HTML表单类的标签——第11关：表单元素的综合案例（Web）

最新推荐文章于 2023-12-07 15:02:19 发布

day by day get on

最新推荐文章于 2023-12-07 15:02:19 发布

阅读量2.1k

点赞数 1

分类专栏：学习之实验平台与作业文章标签： HTML

本文链接：https://blog.csdn.net/qq_52626583/article/details/123927116

版权

学习之实验平台与作业专栏收录该内容

6 篇文章 9 订阅

订阅专栏

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

知识点：
文本框，密码框，单选框、多选框、单选框checked属性、单选框disabled属性、label标签、文本域、提交按钮

代码如下：

<!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="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>
        <input type="radio" id="single" name="state" checked="checked"/>  
        <label for="single">未婚</label>      

        <input type="radio" id="married" name="state"/> 
        <label for="married">已婚</label>      
       
        <label for="secret" name="state">
        <input type="radio" id="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" class="common" value="提交"/>
    </div>
<!-- ********* End ********* -->
</form>
</body>
</html>

day by day get on

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
HTML表单类的标签——第11关：表单元素的综合案例（Web）

用户名：添加类.common；昵称：添加类.common；性别：name属性的值为sex，禁用保密；男：<label>标签的for属性的值为male；女：<label>标签的for属性的值为female；保密：<label>标签的for属性的值为other；教育程度：添加类.common，默认选中本科；选项有：高中，中专，大专，本科，硕士，博士，其他；婚姻状况：name属性的值为state，默认选中未婚；未婚：<label>标签的for属性的值为single；已婚：<l
复制链接

扫一扫