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

最新推荐文章于 2024-07-24 10:40:52 发布

白马过平川-m0_73143451

最新推荐文章于 2024-07-24 10:40:52 发布

阅读量342

点赞数 9

分类专栏： Educoder刷题文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_73143451/article/details/136405812

版权

Educoder刷题专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇文章详细描述了一个HTML表单，包括用户名、昵称、性别选择、教育程度、婚姻状况和兴趣爱好的输入字段，用于收集用户的基本信息。

摘要由CSDN通过智能技术生成

<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>


<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="disabled"/>保密
    </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>
<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>
    <label for="football">
        <input type="checkbox" id="football" name="hobby"/>踢足球
    </label>
     <label for="basketball">
        <input type="checkbox" id="basketball" name="hobby"/>打篮球
    </label>
     <label for="film">
        <input type="checkbox" id="film" name="hobby" checked="checked"/>看电影
    </label>
</div>
<div>
    <span>描述自己的特点：</span>
<textarea maxlength="20" class="common"></textarea>
</div>
<div>
 <span></span> <input type="submit" value="提交" class="common"/>  
</div>
<!-- ********* End ********* -->
</form>